使用jQuery Mobile在多頁面模板上填充listview

我想在使用jquery.mobile的第二頁上呈現listview。使用jQuery Mobile在多頁面模板上填充listview

我正在使用一個具有多個「頁面」的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」）。點擊（）會被執行，因爲列表不會顯示在#bar頁面上。也就是說，沒有任何東西會被附加到#listView。

有什麼想法？

來源

2013-02-24 Maxim Mai

首先這個代碼有問題，$.getJSON加載邏輯是錯誤的。更改頁面不能與$.getJSON同時使用。

有2種方法可以使這項工作：

刪除onclick事件，並在第二頁初始化加載數據：

$(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，所以在某些情況下，當頁面加載和內容突然出現時，您的列表視圖將爲空。所以這個解決方案並不好。

第二種解決方案是刪除按鈕href="#bar"屬性，但留下一個click事件。當$.getJSON操作成功使用changePage功能並加載下一頁。如果有一個與第二個訪問列表視圖頁的店面結果的問題（在此ARTICLE，你會發現如何，或HERE）和#ba [R頁的pagebeforeshow活動期間再次追加了。

我給你做一個工作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-24 08:59:19 Gajotres

謝謝，第二種方法的工作，雖然這不是我想要的最好的解決方案，但它解決了我的問題。再次感謝。 – 2013-02-27 06:55:30

你的id = 「loadList）」，也就是在

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

一個右括號也許這是造成問題了嗎？

來源

2013-02-24 08:50:19 voyager42

好眼睛，我拼寫正確在我原來的代碼。我在這裏編輯代碼之前，我提交 – 2013-02-27 06:56:16

使用jQuery Mobile在多頁面模板上填充listview

回答

相關問題