Question

我正在为jquery移动面板工作，我在这里尝试了这个jsfiddle链接的引用http://jsfiddle.net/Gajotres/vds2U/47/，我刚刚添加了jquery ajax调用来解析xml数据。我的问题是在page1中搜索city和keyword后，ajax调用显示成功警报但不触发page2。我想在第2页显示数据。如果我点击jquery面板中的page2，它会附加搜索到的数据。这里有什么错误如果需要做任何改变请帮助我。我的代码如下：

html代码：

<div data-role="panel" data-display="push" data-theme="b" id="nav-panel" data-position="left">
<h2> All Pages </h2>
<ul data-role="listview"  data-icon="false">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#panel-main">Main panel page</a></li>                
<li><a href="#page1">page 1 page</a></li>
<li><a href="#page2">page 2 Page</a></li>
</ul>
</div> 


<div data-role="page" id="panel-main" data-title="Panel main"  data-theme="a" >
<div data-role="header" data-position="fixed">
<h1 id="header1">main panel</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
</div>
<div role="main" class="ui-content"">
<p id="para1">main panel</p>
</div>            
</div>

<div data-role="page" id="page1" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>page 1</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
</div>
<div data-role="main" class="ui-content">
<div class="text"><input type="text" id="p1" name="p1" placeholder="Location...." class="user-text1 textboxes" data-clear-btn="true" data-mini="true" />
</div>
<div class="height"></div>
<div class="text"><input type="text" id="p2" name="p2" placeholder="Term...." class="user-text2 textboxes" data-clear-btn="true" /></div>
<div class="height"></div>

<button type="submit" id="searchBtn" data-theme="f" data-corners="false"/>Search Events</button>
</div>
</div> 

<div data-role="page" id="page2"  data-theme="a" >
<div data-role="header" data-position="fixed">
<h1>page 2</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
</div>
<div data-role="main" class="ui-content">
<ul id="list" data-role="listview" data-icon="false" data-autodividers="true" data-theme="c"></ul>
</div>
</div>  
<script>
$(function () {
$("[data-role=panel]").enhanceWithin().panel();
});

javascript代码：

$(document).ready(function(){ 
$("#searchBtn").bind("click",function(){
// alert('success');
$.mobile.loading('show');
var p1=$("#p1").val();
var p2=$("#p2").val();
$.ajax({
type: 'GET',
url:"http://api2.yp.com/listings/v1/search?searchloc="+p1+"&term="+p2+&format=xml&key=5cbqjx3cdl",

dataType: "xml",
success: function(data){
//alert('success');    
$(data).find("searchListing").each(function(){        
var name=$(this).find("businessName").text();
var  id=$(this).find("listingId").text();                   
window.location.href="#page2";
//$.mobile.changePage("#page2");       
$.mobile.loading('hide');           
$("#list").append('<li>name:'+ name +'</li>');
$("#list:visible").listview("refresh");

});//ajax ends


});


});

Answer 1

使用jQM pagecreate而不是$（document）.ready，然后在success函数中，将新项追加到列表中，使用pagecontainer（“change”）导航到page2，然后刷新列表：

$(document).on("pagecreate", "#page1", function(){
    $("#searchBtn").on("click" ,function(){

      // your AJAX code

      success: function(data){
        //alert('success');    
        $(data).find("searchListing").each(function(){        
        var name=$(this).find("businessName").text();
        var  id=$(this).find("listingId").text();                   
        $.mobile.loading('hide');           
        $("#list").append('<li>name:'+ name +'</li>');
        $("body").pagecontainer( "change", "#page2", {} );
        $("#list").listview("refresh");

    });
  });
});

简化 DEMO

我已经将AJAX从演示中删除了。我只是附加3个项目，然后更改页面。

listview没有使用jquery mobile在另一个页面中显示数据

1 个答案: