i am new to JQM. I have file index.html in which i have created many pages using div tag e.g
<div data-role="page" id="pg1 "></div>
now i want to reload a particular page using page id..how to do this using location.reload() , or other way round??
thanks..
If you are using a multi-page-template, where all the pseudo-pages are in a single document, then you can't by default refresh a page because it only exists in the current DOM. You could write a function that requests the same document in an AJAX request and then grabs the pseudo-page from the response and replaces the current page in the DOM:
function replace_multipage_template (SELECTOR) {
//show the loading spinner
$.mobile.showPageLoadingMsg();
$.ajax({
//request the same document as the current URL
url : window.location.href,
success : function (response) {
//select just the desired pseudo-page
var $ele = $(response).find(SELECTOR);
//replace the current pseudo-page with the new one
$(SELECTOR).replaceWith($ele);
//hide the loading spinner
$.mobile.hidePageLoadingMsg();
//navigate to the refreshed pseudo-page
$.mobile.changePage($ele);
},
error : function (jqXHR, textStatus, errorThrown) { /*make sure to handle errors*/ }
});
}
You could use this code in an event handler for click
events for links that direct the user to the page you want to refresh:
//bind via delegation to the click events for links that target a specific pseudo-page
$(document).delegate('a[href="#some-page-id"]', 'click', function () {
//call the function from above, using the HREF attribute as the SELECTOR variable
replace_multipage_template($(this).attr('href'));
//prevent the default behavior of the link
return false;
});
http://jquerymobile.com/test/docs/api/methods.html
use the $.mobile.changePage method with the reloadPage option