0

jquery/phonegap でアプリを開発しています。国を選択できるページがあります。それに基づいて、さまざまなリストを取得できます。ただし、この「設定」ページに戻って国を変更することもできます。開始すると、クリックは本来のように発火します。ただし、設定に戻って国を変更しようとすると、2 回クリックする必要があります。簡単に解けるかも？誰にもアイデアはありますか？

<!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：2回目にページに移動すると、デフォルトの防止が機能しないようです。代わりに、ページをリロードするだけです（http://localhost/arenaapp/www/index.html?country=hollandたとえば、オランダをクリックすると、URLが になります）。そのため、2回目にクリックすると機能します。

EDIT2: あなたがたどり着いたページのコードもここに掲載します: 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>

JS ファイルの 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');
    });
}

最後の編集: 最後の編集として、同じ問題を抱えている人のために指摘したいのですが、最初のコード スニペットでわかるように、私が大きな問題を抱えていた理由の 1 つは、データの前にスクリプトがあったことです。 -role="ページ". また、最初のページの後に jquery を使用すると、ページ タグ内のものだけが残りのページで実行されます。そのため、jquery アーキテクチャのため、コードは最初のインデックス ページ (どこでも) またはデータ ロールの「ページ」の後の他のページに配置する必要があります。

これを読んでください：https://stackoverflow.com/a/8724964/2466991

4

1 に答える 1

0

submitおそらく、アクションの種類の中でこれを処理しようとするべきではないと思います。本当にあなたが話しているのは、ボタンのクリック ハンドラを実行することだけです。内部で実行しようとすると、form onsubmitおそらく不要な複雑さが追加され、クロスブラウザーの問題が発生する可能性があります。

送信ボタンを通常のbutton要素に変更してみてください。ここで、クリック ハンドラーを登録します。<form onsubmit="">タグからハンドラーを削除します。

<input type="button" value="Go!" onclick="ProcessC();" />

event.preventDefault()また、単純なボタンクリックハンドラーのデフォルトを実際に防止する必要がないため、その時点でおそらくドロップできると思います。デフォルトはまさにあなたがやっていることです!

于 2013-06-12T17:51:02.250 に答える