Dynamically creating jQuery Mobile pages using jQuery Templates

Question

I am building a workout catalog using jquery mobile for the UI and jquery templates to deal with the html. I have been able to append html to an already created page AND get jquery mobile to change the markup thanks to the .page() function.

However, I want to be able to create new jq mobile pages. I can inject code into divs with data-role=page, call .page() on it and it's all fine. But appending a fully made page to the body does not work.

EDIT: This question and my answer refers to jquery mobile alpha 3

Bobby · Accepted Answer · 2011-02-19 02:01:23Z

9

Ok I got it. If you want to add a to the DOM you have to also add a value for data-url. When you create a static html page,

<div data-role="page" id="home">

jQuery mobile automatically adds a data-url equal to the id you give it. When you do it yourself, you have to hold its hand and pass it a data-url="home".

When you generate your html string append it to $.mobile.pageContainer so jQuery Mobile knows where to find it (appending it to the body works also, but it's probably best not to rock the boat). After that, call .page() on your page in the DOM so that jQuery mobile does all of its magical <span> magic to make it pretty.

$('#home').page();

answered Feb 19, 2011 at 2:01

Bobby

9312 gold badges8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dusda Over a year ago

Could you create a JSFiddle for this? I am having trouble reproducing your method. I can see in the dom that JQ Mobile seems to be decorating my template with all of the proper attributes once I call page(), but nothing actually appears in the browser window.

Shaun Budhram Over a year ago

It'd be great if we could get more details on appending the html string to $.mobile.pageContainer. I'm trying to to this but this variable is always null when I get to it. Do I need to initialize it?

Skylar Saveland · Accepted Answer · 2012-03-27 23:46:40Z

2

Gravedigging this thread. Using the jquery mobile (1.1.0), this was working for me, .trigger("create") ...

    content = '<div data-role="page" id="myID" data-url="myID">'
    // ...
    $('body').append(content).trigger("create")
    $("<a href='#myID' data-rel='dialog'/>").trigger("click")

edited Mar 27, 2012 at 23:46

answered Feb 21, 2012 at 2:51

Skylar Saveland

11.5k10 gold badges77 silver badges96 bronze badges

1 Comment

Adam Tuttle Over a year ago

Instead of saying "latest", since these threads live on a long time, maybe mention the specific version. :) I'm guessing that your "latest" at the time was either 1.0 or one of the alpha's leading up to 1.1.0, whereas 1.1.0rc1 was released on 2012-02-28.

howldev · Accepted Answer · 2012-01-31 08:40:53Z

1

when you call $('#home').page(); you're asking jQuery to enhance your div with the page's specific stylesheet and the js functions. The page is already present in the DOM, but to show it you must call $.mobile.changePage("#home",options). for more information (and object-specific options), see http://jquerymobile.com/test/docs/api/methods.html

answered Jan 31, 2012 at 8:40

howldev

111 bronze badge

Collectives™ on Stack Overflow

Dynamically creating jQuery Mobile pages using jQuery Templates

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related