Dynamic pages with jQuery Mobile

10

votes

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 content from content.php (a list view of all pages) as soon as it loads.

I use page.php for a page content template, which displays the content depending on a variable, like so: page.php?id=01 page.php?id=02 page.php?id=03... And so on.

I was thinking the best way to go from here would be to have two jQm 'pages' on index.html, one for the app's homepage, and one that dynamically loads the content from page.php?id=xx. This way I don't have to load all my content as soon as my app is loaded.

How should this be done? How can I make the list view items go to the next page and load the right content into it?

jqueryjquery-mobile

6

votes

Just create links with <a href="... and it works. JQM loads them with AJAX

The app that you create with JQM should work in any old browser without javascript. The rest is taken care of by the JQM itself.

[edit]

To get URLs and put them anywhere you want just use plain old .load() or .get() from jquery arsenal and when you get the content to a div you wanted -

deprecated: use .page() from jquery mobile

current: call .trigger('create')

(this event adds styles and controls). Detailed instruction is in my FAQ: http://jquerymobiledictionary.pl/faq.html

3

votes

Working commented example:

Create an empty jqMobile page (div with the appropriate data-role, and an id of id="dynamicPage")
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"
});

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?

2

votes

Here's what I came up to solve this for my page

$("#masterList").empty();
var listItems = "";
$.each(data.Messages, function (i, item)
{
    listItems += "<li><div><a href='#messageData' onclick='$(" +   // Use a click handler to set the attr of detailPage div
             '"#detailPage").attr("detailId", "'+ item.Id +       // my JSON item has an ID
             '")' + "'>";                                         // note the crazy quoting

    listItems += "Test about the item</a></li>";

}
$("#masterList").append(listItems);

For the detailPage I used the pageshow event handler to fetch the JSON object using the id and loaded the detail item based on the id in the detailId attribute - something like loadDetail($("#detailPage").attr("detailId")) and my loadDetail function did the rest.

Unfortunately this will break the URL strategy for jQuery mobile. Since the selected item is stored in the page itself - this is no good. I am going to try using an external link that is an HTML page and passing the id as an arg.

0

votes

enter image description here

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/>
<link rel="stylesheet"  href="jquery.mobile-1.0.1.css" /> 
<title> Hello World </title>

<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(e) {

$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><a href="index.html"><h3>Broken Bells</h3><p>Broken Bells</p></a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album </a></ul>').trigger('create');
    });
</script>
</head>

<body>
omt
<div>
    <div id="omtList">  


    </div><!--/content-primary -->  
</body>
</html>

Dynamic pages with jQuery Mobile

4 Answers