CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
MarkO
MarkO

Reputation: 795

jQuery Mobile: How to navigate between dynamically generated pages

Using jQuery Mobile the code below does the following...

1) It generates menu items and adds them to the index page.

2) It creates actual pages for the menu items.

Now when I click on a menu item it does not seem to move to that page? I can see in the markup the pages exist with the correct id's.

This is what I have so far.

$.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);



             });

markup

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3></h3>
    </div>
    <div data-role="content" class="navlist"></div>    
</div>

How do I navigate between dynamically generated pages?

Could someone give me an example using my code. Thank you.

Upvotes: 1

Views: 810

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Unfortunately you have few errors.

Take a look at my working example, it is made out of your code: http://jsfiddle.net/Gajotres/3kPTf/

$(document).on('pagebeforeshow', '#index', function(){       
    $.mobile.activePage.find('[data-role=content]').append('<a href="#second" data-role="button">Second</a>').trigger('create');

    var newPage = $("<div data-role='page' id='second'><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);    

});
  • First error, close an a tag inside a button and give it a # tag.
  • Your dynamic page div is not closed properly

Upvotes: 2

Related Questions