0
jquery/phonegap으로 앱을 개발하고 있습니다. 나는 당신이 국가를 선택할 수있는 페이지를 가지고있다. 이를 바탕으로 다른 목록을 얻을 수 있습니다. 하지만이 '설정'페이지로 돌아가서 국가를 변경할 수도 있습니다. 시작하면 클릭과 같이 실행됩니다. 그러나 설정으로 돌아가서 국가를 변경하려고하면 두 번 클릭해야합니다. 해결하기가 쉽지 않을까요? 누구든지 아이디어가 있습니까?처음 클릭 한 후 버튼을 다시 실행하려면 두 번 클릭해야합니다.
<!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 : 두 번째로 페이지를 열면 기본 방지 기능이 작동하지 않는 것처럼 보입니다. 대신 그냥 페이지를 다시로드합니다 (예를 들어, 내가 네덜란드를 클릭하면 URL은 http://localhost/arenaapp/www/index.html?country=holland이됩니다). 그래서 내가 두 번째로 클릭 할 때 작동합니다.
EDIT2 :
<!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>
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 나는 당신은뿐만 아니라 여기에서 도착 페이지의 코드를 게시 할 수 있습니다 편집 : 마지막 편집으로 같은 문제가있는 사람들에게 내가 큰 문제가있는 이유 중 하나는 첫 번째 코드 단편에서 볼 수 있듯이 데이터를 처리하기 전에 스크립트를 사용했다는 점입니다. role = "page". 초기 페이지 다음에 jquery를 사용하면 페이지 태그 내의 내용 만 나머지 페이지에서 실행됩니다. 따라서 코드는 jquery 아키텍처로 인해 첫 번째 인덱스 페이지 (어디에서나) 또는 데이터 역할 "페이지"다음의 다른 페이지에 있어야합니다.
를 읽으 : https://stackoverflow.com/a/8724964/2466991
'var input = $ ('input : radio [name = counrty] : checked ') .Val(); ** counrty **이거나 이름은 ** 국가 **입니까? –
이것이 문제인지는 모르겠지만'event.preventDefault(); 뒤에'event.stopPropagation();'을 추가해보십시오. – Dropzilla
관련이 있는지는 잘 모르지만 여기에 "country"가 잘못 입력되었습니다 :'input : radio [name = counrty] : checked ' –