I'm developing an app with jquery/phonegap. I have a page where you can choose a country. Based on that you will be able to get different lists. But you can also return to this 'settings's page and change the country. when you start, the click fires just like it should. But when you return to the settings and try to change country, you have to click twice. Might be easy to solve? Anyone have any ideas?
<!DOCTYPE HTML>
<html>
<head>
<title>The Arena App</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
function ProcessC(){
console.log('test');
var input = $('input:radio[name=country]:checked').val();
if (input =='belgium' ) {
window.localStorage.setItem("country", "Belgium");
document.location.href = "listarenas.html";
} else if (input =='holland') {
window.localStorage.setItem("country", "Holland");
document.location.href = "listarenas.html"; }
else {
window.localStorage.setItem("country", "all");
document.location.href = "listarenas.html";
}
}
</script>
</head>
<body>
<div data-role="page" id="countryPage">
<div data-role="header" data-position="fixed">
<h1>Choose Country</h1>
</div>
<div data-role="content">
<form action="" data-ajax="false" id="countryp">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a country:</legend>
<input type="radio" name="country" id="all" value="all" checked="checked">
<label for="all">All</label>
<input type="radio" name="country" id="be" value="belgium">
<label for="be">Belgium</label>
<input type="radio" name="country" id="nl" value="holland">
<label for="nl">Holland</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<input type="button" value="Go!" onclick="ProcessC();" />
</div>
</form>
</div>
</div>
<script src="js/arenalist.js"></script>
<script src="js/arenadetails.js"></script>
</body>
</html>
EDIT1: It seems like the prevent default doesn't work the second time you go to the page. Instead it just reloads the page(and the url becomes http://localhost/arenaapp/www/index.html?country=holland
, for example, if i click on holland), and that's why it works when you click the second time i guess.
EDIT2:
I'll post the code of the page you arrive from as well here:
listarenas.html
<!DOCTYPE HTML>
<html>
<head>
<title>The Arena App</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="ListArenasPage" data-role="page">
<div data-role="header" data-position="fixed">
<a href='index2.html' class='ui-btn-left' data-icon='settings' data-theme="a" >Countries</a>
<h1>The Arena App</h1>
</div>
<div data-role="content">
<ul id="arenaList" data-role="listview" data-filter="true" data-filter-placeholder="Filter arenas..."></ul>
</div>
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/arenalist.js"></script>
<script src="js/arenadetails.js"></script>
</body>
</html>
And the JS file arenalist.js:
var serviceURL = "http://localhost/arenaapp/services/";
var arenas;
$('#ListArenasPage').on('pageshow', function(event) {
getarenaList();
});
function getarenaList() {
var country = window.localStorage.getItem("country");
$.getJSON(serviceURL + 'getarenas.php?id=' + country, function(data) {
$('#arenaList li').remove();
arenas = data.items;
$.each(arenas, function(index, arena) {
$('#arenaList').append('<li><a href="arenaDetails.html?id=' + arena.id + '">' +
'<img src="pics/' + arena.picture + '"/>' +
'<h4>' + arena.arenaName + '</h4>' + '<p id="category">Club:' + arena.arenaClub + '</p>' +
'<p>Capacity:' + arena.arenaCapacity + '</p>' +
'<span class="ui-li-count">' + arena.id + '</span></a></li>');
});
$('#arenaList').listview('refresh');
});
}
LAST EDIT: As a last edit I would like to point out, for people with the same problem, that one of the reasons I had such big problems was that as you can see in the first code snippet, I had my script before the data-role="page". And with jquery after the initial page, only the things within the page tag will be executed in the rest of the pages. So code must go in the first index-page(where ever) or in other pages after the data-role"page", because of the jquery architecture.
Read this: https://stackoverflow.com/a/8724964/2466991