jquery mobile Dynamically Injecting Pages

Question

I'm using jQuery mobile and currently build a menu on the fly using the code below. I now need to create actual pages for menu items as my next step. I have been looking at jQuery Mobile and Dynamic Page Generation and think this is something I 'could' use to achieve this. I have read the Dynamic Page Generation docs and don't understand how I could fit this into my current code or even if its right for what I need to achieve.

I you can see below I have the ID and page name etc already when I build my menu output for the home page, could someone show me an example of how I now dynamically build the html pages needed using jquery for these menu items? Thank you.

$.each(siteData["pages"], function(i,v) {
             $.mobile.activePage.find('[data-role=content]').append('' +
                     '<a href='+ v["id"] + ' data-role="button">' + v["name"] + '</a>').trigger('create');

            // NOW I HAVE THE MENU LETS CREATE THE ACTUAL PAGES INSIDE HERE TOO
         });

Current markup menu items created inside navlist:

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
    </div>

    <div data-role="content" class="navlist">
    </div>

    <div data-role="footer">
    </div><!-- /footer -->
</div>

So now for each item I need the to generate the markup for each item using jquery.

UPDATE: so based on suggestion I tried something like this, but it does not work.

 $.each(siteData["pages"], function(i,v) {
     $.mobile.activePage.find('[data-role=content]').append('' +
             '<a href='+ v["id"] + ' data-role="button">' + v["name"] + '</a>').trigger('create');



     // Prepare your page structure
     var newPage = $("<div data-role='page' id=v[id]><div data-role=header>" +
             "<a data-iconpos='left' data-icon='back' href='#' data-role='button' " +
             "data-rel='back'>Back</a><h1>Dynamic Page</h1></div><div data-role=content>Stuff here</div></div>");

    // Append the new page info pageContainer
                 newPage.appendTo($.mobile.pageContainer);

    // Move to this page by ID '#page'
                 $.mobile.changePage('#'+v["id"]);


 });

Create a page and move to it? you can create page inside a page. The buttons you've created should generate a page and move to it. — Omar, Mar 31 '13 at 14:28
Hi @Omar no at the moment all the code seems to do is create the menu items on the homepage as I desired. but I now need actual pages for each of the items. so ie... it creates the whole thing for each starting ...
etc — MarkO, Mar 31 '13 at 14:34

Omar · Accepted Answer · 2013-03-31T15:29:27.630

9

Here is a simple way of creating new pages dynamically.

Working example

// Prepare your page structure
var newPage = $("<div data-role='page' id='page'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>Dynamic Page</h1></div><div data-role=content>Stuff here</div></div>");

// Append the new page into pageContainer
newPage.appendTo($.mobile.pageContainer);

// Move to this page by ID '#page'
$.mobile.changePage('#page');

edited Mar 31 '13 at 15:29

answered Mar 31 '13 at 14:41

Omar

32,302
9
69
112

so could I do this within my loop $.each(siteData["pages"], function(i,v) { etc? – MarkO Mar 31 '13 at 14:43
2

@MarkO Yes you can but remove the last part in my answer. Your next question would be, who to navigate between dynamically generated pages ;) i'll get you with an example. – Omar Mar 31 '13 at 14:52

score 0 · Answer 2 · answered Sep 06 '16 at 10:08

There is a cashing problem if you want to recreate the page with new content. So you must do this...

var $i = 0;
$('#test').on('click', function () {
 $i++;
  alert("I="+$i);
    // Prepare your page structure
    var newPage = $("<div data-role='page' id='page'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>Dynamic Page</h1></div><div data-role=content>Stuff here = " + $i + "</div></div>");

    // Append the new page into pageContainer
    newPage.appendTo($.mobile.pageContainer);

    // Move to this page by ID '#page'
    $.mobile.changePage('#page');
});

$(document).on('pagehide', '#page', function(){
    $(this).remove();
});

<a data-role=button id=test>test</a>

jquery mobile Dynamically Injecting Pages

2 Answers2

Linked