Dynamic pages with jQuery Mobile

Question

I\'ve been using jQuery for quite a while, and taking my first steps with jQuery Mobile.

I use index.html as the jQuery Mobile & design of my app, which calls the co

Answer 1

Working commented example:

1. Create an empty jqMobile page (div with the appropriate data-role, and an id of id="dynamicPage")

2. Get your menu link's id, and insert it as the title attribute of the empty page.

    $("#appMainMenu a").live("click", function(evt){
    var whatpageto = $(this).attr('id');
    $('#dynamicPage').attr('title', 'dpage-'+whatpageto); // the title would look like title="dpage-linksid"
});

1. Load data like so:

    $('#dynamicPage').bind('pageshow', function() {
        $('#dPage').html(''); // animate while we're loading data
        var whatpage = $(this).attr('title'); // get the page's title we changed earlier
        var whatpage1 = whatpage.replace("dpage-", ''); // remove the 'dpage-' part from the title, and we have our id.
        var whatpage2 = 'path/to/pagewhereyourcontentis.html'; // where is the content coming from? url or path to file
        $.get(whatpage2, function(data) { // load content from external file
          $('#dynamicPage').html(data); // insert data to the jqMobile page (which is a div).
          $('#dynamicPage').page(); // Re-render the page otherwise the dynamic content is not styled.
        });
});

Hope this helps. Questions?