0

jquery.mobile を使用して 2 番目のページにリストビューをレンダリングしようとしています。

複数の「ページ」を持つ単一の HTML を使用しています。

    <div data-role="page" id="foo">
    <a href="#bar" data-role="button" data-inline="true" id="loadList)">List</a>

</div>

<div data-role="page" id="bar">
    <div id="ListDiv">
    <ul id="listview" data-role="listview" data-inset="true">
    </ul>
    </div>

</div>

<!--application UI goes here-->

<script type="text/javascript">
$("#loadList").click(function(){
    $.getJSON(
              "http://localhost/index.php/api/list",{format: "json"},
              function(data){
                  var output = '';
                      $.each(data, function(key, val) {
                          output += '<li><a href="#">' + val +'</a></li>';
                      });
                      $('#listview').append(output).listview('refresh');
                  });
    });

しかし、問題は、#loadList ボタンをクリックすると、#bar ページに移動しますが、リストが実行されないため、$("#loadList").click() が実行されないようです。 #bar ページに表示されます。つまり、#listView には何も追加されません。

何かご意見は？

4

2 に答える 2

2

まず、このコードには問題が$.getJSONあります。読み込みロジックが false です。との同時使用はできません$.getJSON。

これを機能させるには、次の 2 つの方法があります。

  1. onclick イベントを削除し、2 ページ目の初期化中にデータをロードします。

    $(document).on('pagebeforeshow', '#bar', function(){       
    $.getJSON(
              "http://localhost/index.php/api/list",{format: "json"},
              function(data){
                  var output = '';
                      $.each(data, function(key, val) {
                          output += '<li><a href="#">' + val +'</a></li>';
                      });
                      $('#listview').append(output).listview('refresh');
                  });
    });
});

    残念ながら、このソリューションには問題があります。使用済みページ イベントは を待機しないため$.getJSON、場合によっては、ページが読み込まれたときにリストビューが空になり、コンテンツが突然表示されます。したがって、このソリューションはそれほど優れていません。

  2. 2 番目の解決策は、ボタンから属性を削除href="#bar"し、クリック イベントを残すことです。$.getJSONアクションが成功すると、関数を使用して次changePageのページをロードします。2 番目のページのリストビューへのアクセスに問題がある場合は、結果を保存し (この記事で方法 を確認するか、こちらを参照してください)、 rページのpagebeforeshowイベント中に再度追加します。#ba

私はあなたに実際のjsFiddle例を作りました: http://jsfiddle.net/Gajotres/GnB3t/

HTML : 

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>        
        <div data-role="content">
            <a href="#" data-role="button" id="populate-button">Load JSON data</a>
        </div>
    </div>
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="#index" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">
            <h2>Simple list</h2>
            <ul data-role="listview" data-inset="true" id="movie-data" data-theme="a">

            </ul>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>      
</body>
</html>

JS:

$(document).on('pagebeforeshow', '#index', function(){     
    $('#populate-button').on('click',function(e,data){     
        $.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
            dataType: "jsonp",
            jsonpCallback: 'successCallback',
            async: true,
            beforeSend: function() {
                $.mobile.showPageLoadingMsg(true);
            },
            complete: function() {
                $.mobile.hidePageLoadingMsg();
            },
            success: function (result) {
                ajax.jsonResult = result;
                $.mobile.changePage("#second");
            },
            error: function (request,error) {
                alert('Network error has occurred please try again!');
            }
        });
    });        
});

$(document).on('pagebeforeshow', '#second', function(){       
    ajax.parseJSONP(ajax.jsonResult);
});


var ajax = {  
    jsonResult : null,
    parseJSONP:function(result){
        $('#movie-data').empty();
        $('#movie-data').append('<li>Movie name:<span> ' + result[0].original_name+ '</span></li>');
        $('#movie-data').append('<li>Popularity:<span> ' + result[0].popularity + '</span></li>');
        $('#movie-data').append('<li>Rating:<span> ' + result[0].rating+ '</span></li>');
        $('#movie-data').append('<li>Overview:<span> ' + result[0].overview+ '</span></li>');
        $('#movie-data').append('<li>Released:<span> ' + result[0].released+ '</span></li>');  
        $('#movie-data').listview('refresh');
    }
}
于 2013-02-24T08:59:19.730 に答える
0

id="loadList)" があります。つまり、閉じ括弧が

<a href="#bar" data-role="button" data-inline="true" id="loadList)">List</a>

多分これがあなたの問題を引き起こしていますか？

于 2013-02-24T08:50:19.833 に答える