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..

• jquery
• html5
• jquery-mobile

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