listview is not showing the data in another page using jquery mobile - jquery-mobile

Question

i am newly working for jquery mobile panels, i have tried the reference of this jsfiddle link here http://jsfiddle.net/Gajotres/vds2U/47/ , i just added jquery ajax call to parse xml data. My problem is after searching city and keyword in page1, ajax call shows success alert but not trigger to page2. I want to display data in page2. If i click on page2 in jquery panel it appends the searched data. What wrongs here If any changes need to do please help me. My code is like below:
html code:
<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">Close menu</li>
<li>Main panel page</li>
<li>page 1 page</li>
<li>page 2 Page</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>
Menu
</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>
Menu
</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>
Menu
</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 code:
$(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

Use the jQM pagecreate instead of $(document).ready, then in the success function, append the new items to the list, navigate to page2 using pagecontainer("change"), then refresh the list:
$(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");
});
});
});
Simplified DEMO
I have left the AJAX out of the demo. I am just appending 3 items and then changing page.