I have been going around and around and around, trying to apply as many different solutions as possible, trying to solve this problem by myself. The fact is that I cannot!
I am developing a very simple app in HTML5 on Adobe PhoneGap. The app is only a list of links that the user should click and access to the respective websites. Problem? The problem is that the websites are opening on the app and not on the browser. I already tryed everything I knew... Set target _blank, applied this solution, this one, this one and this one. I've been googling also, but the results are exactly the same: no solution for my problem.
There must be something that I am doing wrong, and right now I don't think I have the discernment to see what it is! And it is driving me crazy... Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Northern Landscape APP</title>
<meta name="description" content="Northern Landscape APP - With this APP you can keep up with the latest news of our group: Features, Group Messages, new magazine issues and more!" />
<meta name="author" content="LFS" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
$('.link').live('tap', function() {
url = $(this).attr("rel");
loadURL(url);
});
function loadURL(url){
navigator.app.loadUrl(url, { openExternal:true });
return false;
}
</script>
</head>
<body>
<div id="contentor">
<header>
</header>
<nav>
<div id="cabeca">
<img src="imgs/cabecalho.png">
</div>
<br>
<br>
<br>
<div id="botoeswraper">
<div id="linha1">
<div id="b1">
<div id="icone"><img src="imgs/logo_compus.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.northernlandscape.org'>Official Website</a> </div>
</div>
</div>
<div id="linha2">
<div id="b2">
<div id="icone"><img src="imgs/rblogo.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.redbubble.com/groups/northern-landscape'>Redbubble group</a> </div>
</div>
</div>
<div id="linha3">
<div id="b3">
<div id="icone"><img src="imgs/groupmsg.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.redbubble.com/groups/northern-landscape/forums/7330'>Group messages</a> </div>
</div>
</div>
<div id="linha4">
<div id="b4">
<div id="icone"><img src="imgs/issues.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.northernlandscape.org/alli.php'>All NL magazine issues</a> </div>
</div>
</div>
<div id="linha5">
<div id="b5">
<div id="icone"><img src="imgs/tweeter.png"></div>
<div id="texto">
<a href="#" class='link' rel='https://twitter.com/NL_host'>Check us on Tweeter</a> </div>
</div>
</div>
</div>
</nav>
<p> </p>
<p> </p>
<footer>
<p>
NL APP version 1.0 - Developed by LFS©
</p>
</footer>
</div>
</body>
</html>
I am most appreciated for any help that I can get...
I have done the changes below and each one works for me.
<!-- Opens in new tab -->
Official Website
<!-- Opens in new window -->
Redbubble group
Related
I am trying to make multiple pages in my hybrid app on IBM MobileFirst Platform on eclipse juno using the Dojo toolkit.
In design view: the text in pages other than the homepage does not appear.
after running and deploying all environments, i preview on the browser(chrome) and the tabs are not working
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>MoodApp</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user- scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
</head>
<body style="display: none;">
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
<ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:loginPage,transition:'slide',icon:'images/done.png'">Log in</li><li
data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:signupPage,icon:'images/comments16.png',transition:'slide'">Sign up</li>
</ul>
<div data-dojo-type="dojox.mobile.View" id="loginPage" data-dojo-props="selected:true">Enter username and password</div>
<div data-dojo-type="dojox.mobile.View" id="signupPage" data-dojo-props="selected:false">sign up now</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
Eclipse Juno is not a supported version of Eclipse in IBM MobileFirst Platform - upgrade to Eclipse Java EE Kepler or Luna.
In design mode, you will see only the active tab, so per your code you will see only view 0. Swap between the true/false values of data-dojo-props="selected to switch between your pages... but better yet, see the fuller example below.
Your tabs do not work because you did not put the moveTo values in single quotes:
<ul data-dojo-type="dojox.mobile.TabBar">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'loginPage',transition:'slide',icon:'images/done.png'">Login</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'signupPage',icon:'images/comments16.png',transition:'slide'">Signup</li>
</ul>
Fuller example:
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
<p>
This is view 0.<br/>
This is view 0.<br/>
This is view 0.<br/>
</p>
<ul data-dojo-type="dojox.mobile.TabBar">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'loginPage',transition:'slide',icon:'images/done.png'">Login</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'signupPage',icon:'images/comments16.png',transition:'slide'">Signup</li>
</ul>
</div>
<div data-dojo-type="dojox.mobile.View" id="loginPage" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
Enter username and password
</div>
<div data-dojo-type="dojox.mobile.View" id="signupPage" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
sign up now
</div>
I have a jquery code that adds the tel: link to a style in a span around a phone number but it only works for one phone number. I have a page with 20 different phone numbers and when I add the style to all of the phone numbers it will populate all 20 tel: links with the last phone number in the list to all of the tel: links.
How can I make the tel: link for each phone number populate correctly? Currently It populates just the last phone number in the list to all of the tel: links.
Any help would be much appreciated!
$(document).ready(function() {
// if Modernizr detects class "touch"
if($('html').hasClass('touch')) {
// for each element with class "make-tel-link"
$(".make-tel-link").each(function () {
//$.each(".make-tel-link", function () {
var jPhoneNumber = $(this).text();
// wrap phone with href="tel:" and then insert phone number
$(this).wrapInner('<a class="jPhoneLink" href=""></a>');
$('.jPhoneLink').attr('href', 'tel:'+jPhoneNumber);
});
}
});
Here is an example of the markup.
<!DOCTYPE html>
<html class="touch">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<!-- Extra Codiqa features -->
<link rel="stylesheet" href="codiqa.ext.css">
<!-- jQuery and jQuery Mobile -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="codiqa.ext.js"></script>
<script src="modernizr.custom.39046.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page2">
<div data-theme="a" data-role="header">
<div id="head"> <strong>Contacts</strong></div>
<div data-role="navbar" data-iconpos="left">
<ul>
<li>
<a href="index.php" data-transition="fade" data-theme="" data-icon="">
home
</a>
</li>
<li>
<a href="3.php" data-transition="fade" data-theme="" data-icon="">
contact
</a>
</li>
</ul>
</div>
</div>
<div data-role="content">
<h1>CONTACT US</h1>
<div class="layout">
<h4>Headquarters</h4>
4235345 High bar<br />
Suite 345<br />
Quence, AL 45205
<br />
<h4>Customer Service</h4>
info#fgfghgdgh.com<br />
<span class="make-tel-link">888-555-5555</span><br />
<span class="make-tel-link">800-555-5555</span><br />
<span class="make-tel-link">866-555-5555</span><br />
</div><br />
</div>
</div>
</div>
</body>
</html>
you can create the link first and in there set its attributes and the wrap it
$(function(){
$.each($(".make-tel-link"), function () {
//replace all instances of '-'
var jPhoneNumber = $(this).text().replace(/-/g,'');
var link = $('<a />', {class: 'jPhoneLink', href: 'tel:'+jPhoneNumber});
$(this).wrapInner(link);
});
});
working example
http://jsfiddle.net/pUkUb/3/
Edit:
the problem in your script is here:
$('.jPhoneLink').attr('href', 'tel:'+jPhoneNumber);
you are assigning the attribute to all the elements that have that class, not the one you just created
Hi all I have the following code
<script type="text/javascript" src="/js/jquery-2.0.0.min.js"></script>
<script src="/js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
but for some reason in Chrome and on any android it just crashes the page and at the bottom I just get a "Loading" message
does anyone know why?
thanks
Solution
Don't use jQuery 2.0 with jQuery mobile 1.3.1
jQuery Mobile is locked to a certain jQuery version range. Use only jQuery 1.7 up to 1.9.X
And you have several errors in your live example.
CSS should be initialized before js files and your HTML tag was missing. Also DIV containing the page must have data-role="page" attribute.
EDIT :
Your final code should look like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>Packer Forbes Communications</title>
</head>
<body>
<div id="pageHead" data-role="page">
<div id="logo"><img src="images/packerForbesLogo.jpg" width="226" height="106" alt="Packer Forbes" /></div>
<div id="socMedia"><img src="/images/socIconPM.jpg" width="35" height="40" alt="PMLive" /><img src="/images/socIconIN.jpg" width="35" height="40" alt="LinkedIn" /><img src="/images/socIconTW.jpg" width="35" height="40" alt="Twitter" /><img src="/images/socIconYT.jpg" width="35" height="40" alt="YouTube" /></div>
<div id="mainNav" role="navigation">
Show navigation
Hide navigation
<ul id="nav" class="clearfix">
<li>Home</li>
<li>What We Do
<ul>
<li>Market Access</li>
<li class="navIndent">Case Studies</li>
<li>Public Relations</li>
<li class="navIndent">Case Studies</li>
<li>Medical Education</li>
<li class="navIndent">Case Studies</li>
<li>Digital</li>
<li class="navIndent">Case Studies</li>
</ul>
</li>
<li>About Us
<ul>
<li>Awards</li>
<li>The Team</li>
<li>Life at Packer Forbes</li>
<li>Our Values</li>
</ul>
</li>
<li>Clients</li>
<li>News</li>
<li>Careers
<ul>
<li>Training</li>
<li>Internships</li>
<li>Benefits</li>
<li>Current Vacancies</li>
</ul>
</li>
<li>Contact</li>
<li>Download Centre</li>
</ul>
</div>
<div id="mainBanner"><img src="images/twentyBanner.gif" alt="We Are Twenty!" width="400" height="80" border="0" class="homeBanner" /></div>
</div>
<div id="mainBody">
<div id="contentWrapper">
<p class="brandStrip"> </p>
<div id="mainColumn">
<!--<h1>Who We Are</h1>-->
<h2>What We Do</h2>
<div id="marketAccess"> <img src="images/marketAccess.jpg" width="160" height="160" alt="Market Access" />
<h3>Market Access</h3>
</div>
<div id="communications"> <img src="images/communications.jpg" width="160" height="160" alt="Communications" />
<h3>Public Relations</h3>
</div>
<div id="medicalEducation"> <img src="images/medicalEducation.jpg" width="160" height="160" alt="Medical Education" />
<h3>Medical Education</h3>
</div>
<div id="digital"><img src="images/digital.jpg" width="160" height="160" alt="Digital" />
<h3>Digital</h3>
</div>
<p class="firstParaHome">Packer Forbes is an award-winning independent healthcare communications consultancy, specialising in medical communications. Our integrated approach ensures that our clients benefit from a compelling fusion of bespoke market access, public relations, medical education and digital communications approaches, all built on insight developed from years of experience.</p>
<p class="dividerLong"><span class="dividerLongMore">Find Out More»</span></p>
<p class="mobileindexorgslogos">
<img src="images/logoHCA.jpg" width="102" height="109" alt="HCA" />
<img src="images/logoEMIG.jpg" width="102" height="109" alt="EMIG" />
<img src="images/logoIIP.jpg" width="121" height="109" alt="IIP" />
<img src="images/abpi_new.jpg" width="102" height="109" alt="IIP" />
<div class="mobileclear"></div>
</p>
</div>
<div id="sideColumn"></div>
<p class="brandStrip"> </p>
</div>
</div>
<div id="pageFoot">
<ul>
<li>1.09 Harbour Yard, Chelsea Harbour, London, SW10 0XD</li>
<li>t: +44 (0)20 7036 8550</li>
<li>f: +44 (0)20 7036 8569</li>
<li>e: healthmail#packerforbes.com</li>
<li>cookie policy</li>
</ul>
<p>Registered office: Packer Forbes Communications Ltd, 1.09 Harbour Yard, Chelsea Harbour, SW10 0XD Registered number: 3753460 </p>
</div>
</body>
</html>
If you are using JQM 1.3.1, you can use this 2 script files.
jQuery JavaScript Library v1.9.1 http://view.jquerymobile.com/1.3.1/dist/demos/js/jquery.js
jQuery Mobile 1.3.1 http://view.jquerymobile.com/1.3.1/dist/demos/js/jquery.mobile.min.js
Loading message error
If you want to hide this message, try to use this as soon as on load.
$(document).ready(function() {
$('.ui-loader').hide();
});
I have found a weird behavior that is in all versions of cordova after 2.0.0 ( as in cordova-2.0.0.jar )
This is in a html/css/jQuery/jQueryMobile mobile app on a HTC One X phone. The problem is that the hardware back button goes back to the last data-role=page that the user viewed instead of just closing the soft-keyboard. (LogCat log is below)
My question is: What can I do, using the latest version of the cordova API, so that the hardware back button just closes the keyboard, and does not go back to my most recent data-role=page?
The use case is:
HTC One X phone
open the app; it opens on page_1
tap a footer button to go to page_3
click a footer button to go back to page_1
tap in an input box (the soft keyboard comes up)
tap the hardware back button
The soft keyboard closes and the app goes to page_3
on cordova versions 1.9.0 and 2.0.0 the soft keyboard closes and the app stays on page_1
all versions after 2.0.0 do it.
I can't use the older version because they have issues with the Samsung Galaxy 3
The following html performs exactly as I have described.
<!DOCTYPE html>
<html>
<head>
<title>GFE Tool</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="scripts/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="scripts/themeswf2.css" />
<link rel="stylesheet" href="scripts/jquery.mobile.simpledialog.min.css" />
<link rel="stylesheet" href="scripts/css_gfe.css" />
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile.simpledialog2.min.js" type="text/javascript">
</script>
<script src="scripts/using_timios_ws.js" type="text/javascript" ></script>
<script src="scripts/jsrender.js" type="text/javascript"></script>
</head>
<body>
<section id="page_1" data-role="page" data-theme="a">
<header data-role="header" data-position='fixed'>
<div class="standard_table our_header" >
<span><img src="images/LogoWhite.png" width="187" height="61" alt="Timios logo"/></span>
<span class="setup_gear" style="height: 61px;background-color:#4d4d4d;">
<a id='the_gear' href="#setup_page">
<img src="images/geargray.png" width='61' height="61" alt="Set Up"/></a>
</span>
</div>
</header>
<div data-role="content" class="content">
<div >
<table class='standard_table'>
<tr><td><div class='page_title' >Enter Property Data</div>
<div class='page_title' id='div_welcome_user'></div>
</td>
</tr>
</table>
</div>
<input type="number" />
</div>
<div data-role="footer" data-position='fixed' align="center">
<a id='get_results_2' href="#" >
<div class="one_line_footer_button" >Get Closing Costs</div>
</a>
<a href="#page_3" id='CmdGoToNews' >
<div class="one_line_footer_button" >New at Our Company</div>
</a>
</div>
</div>
</section>
<section id="page_3" data-role="page" data-theme="f">
<header data-role="header" data-position='fixed'>
<div class="standard_table our_header" >
<a href="#page_1" >
<span><img src="images/LogoWhite.png" width="187" height="61" alt="HEADER IMAGE"/></span>
</a>
<span class="setup_gear" style="height: 61px;background-color:#4d4d4d;">
<a id="the_gear_3" href="#setup_page"><img src="images/geargray.png" width="61" height="61" alt="Set Up"/></a>
</span>
</div>
</header>
<div data-role="content" class="content">
<div id='divNews' class="about_us" style="padding-left: 5px; padding-right: 5px; ">
This is where New at our company goes.
</div>
</div>
<div data-role="footer" data-position='fixed' align="center" class='our_footer'>
<a id="NewAccountSetup" href="#setup_page" >
<div class="two_line_footer_button">New Account<br>Sign Up</div>
</a>
<a id='ClientSetup' href="#setup_page" >
<div class="two_line_footer_button">Client<br>Sign In</div>
</a>
<a href="#page_1" >
<div class='two_line_footer_button'>
<img src='images/home_icon_white_36.jpg' />
</div>
</a>
</div>
</section>
</body>
NOTE: I am not using PhoneGap Build. I am creating the exec in eclipse.
The LogCat log (below) starts w the moment I hit the hardware back-button. It shows that CordovaWebView is tracking my "browser history" - The URL at index: 0 is ... The log when I use the older versions of the cordova jar does not show these lines.
04-13 16:15:54.964: D/SoftKeyboardDetect(32763): Ignore this event
04-13 16:15:55.124: D/CordovaWebView(32763): The URL at index: 0is file:///android_asset/www/gfe_one.html
04-13 16:15:55.124: D/CordovaWebView(32763): The URL at index: 1is file:///android_asset/www/gfe_one.html#page_3
04-13 16:15:55.124: D/CordovaWebView(32763): The URL at index: 2is file:///android_asset/www/gfe_one.html#/android_asset/www/gfe_one.html
04-13 16:15:55.124: D/SoftKeyboardDetect(32763): Ignore this event
04-13 16:15:55.164: D/Cordova(32763): onPageFinished(file:///android_asset/www/gfe_one.html#page_3)
04-13 16:15:55.164: D/Cordova(32763): Trying to fire onNativeReady
04-13 16:15:55.164: D/DroidGap(32763): onMessage(onNativeReady,null)
04-13 16:15:55.164: D/DroidGap(32763): onMessage(onPageFinished,file:///android_asset/www/gfe_one.html#page_3)
04-13 16:15:56.475: I/Adreno200-EGLSUB(32763): <ConfigWindowMatch:1991>: Format RGBA_8888.
Open your res/xml/config.xml file and look for:
<preference name="useBrowserHistory" value="false" />
You may want to play with the value of useBrowserHistory to return to the old way the back button worked.
#Nanashi wrote: you need to add an event handler for back button once phonegap/cordova is loaded. Please refer this stackoverflow.com/questions/14207690/stop-exit-on-back-button-android-in-phonegap-build
NOTE: in my js function that now handles the hardware back button, I just did return;
The examples do other things or have // do stuff here
I'm new to jquery and jquery mobile and and having an issue with custom selects (data-native-menu="false"). When I tap to open one, with just 4 options, sometimes it opens as normal, but closes itself a second later, before I've had a chance to choose an option.
Another issue, which perhaps may be related, is that sometimes when I open a dialog (data-rel='dialog') it will not close when I tap the "X" button it provides.
My code validates as HTML 5 and the only custom config I have done is defaultDialogTransition & defaultPageTransition off.
I have it so each form element has a unique ID, as has each page.
Both issues happen with opera and android browsers, on 2.3 gingerbread.
Thanks, Kevin
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>title</title>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src='/js/jquery_mobile_global_defaults.js'></script>
<script src='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'></script>
<link rel='stylesheet' href='/design/mobile_style.css'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css' />
</head>
<body>
<div data-role='page' id='homepage'>
<div class='header'>
<div class='logo'><a href='/' ><img src='/design/logo.png'></a></div>
<div class='login'><a href='/php/mobile_login.php' data-overlay-theme='b' data-transition='none' data-rel='dialog' data-role='button' data-inline='true' data-icon='arrow-r' data-iconpos='right' data-theme='a' data-mini='false'>Login</a></div>
</div>
<div class='mobile_content'>
<form data-ajax='true' method='GET' id='btipdgnkrb_form' action='/php/mobile_search.php'>
<div>
<select data-native-menu='false' onchange='ajaxcreateSubCatSelect("btipdgnkrb");' name='main_catetory_type' id='btipdgnkrb_maincat'>
<option>Career path / role</option>
<option value='CONSTRUCTION'>Construction roles</option>
<option value='DESIGN'>Design roles</option>
<option value='ENERGY'>Energy roles</option>
<option value='GENERIC'>General roles</option>
</select>
</div>
<div id='btipdgnkrb_subcatloaddiv' style='text-align:center;'></div>
<div>
<select data-overlay-theme='b' disabled data-native-menu='false' name='profession_id' id='btipdgnkrb_subcat'><option data-placeholder='true'>
Select role / category</option></select>
</div>
<div><select name='location_id' id='btipdgnkrb_location' data-overlay-theme='b' data-native-menu='false' data-icon='arrow-d'><option data-placeholder='true' value='0'>Location (optional)
</option>
<option></option>
<option value=37>Ireland</option>
<option value=61>Ulster</option>
</select></div>
<label for='btipdgnkrb_keywords' class='ui-hidden-accessible'>Keywords:</label>
<div><input type='text' name='keywords' id='btipdgnkrb_keywords' value='' placeholder='Keywords (optional)'></div>
<div><input type='submit' data-theme='b' data-icon='search' data-iconpos='right' value='Search'></div>
<div><input type='button' onclick='reset_search_form("btipdgnkrb");' data-theme='c' data-iconpos='right' value='Clear form'></div>
</form>
<p> <p>
<script src='/js/main.js'></script>
</div>
<div data-role='footer' data-theme='a' >
<div data-role='navbar' data-iconpos='right'>
<ul>
<li><a data-icon='home' href='/'>Home / Search</a></li>
<li><a data-icon='plus' href='#'>Menu</a></li>
</ul>
</div><!-- /navbar -->
</div>
</div>
</body>
</html>