CODEWITHSUNDEEP
jqueryjquery-mobile
Taztingo
Taztingo

Reputation: 1945

Jquery Mobile + Dynamically Created pages

I'm dynamically creating jquery mobile pages, and the only page that seems to be showing is the first one I create. All the html elements are being created. I tried using...

$.mobile.changePage("#page2");

Nothing happened

So I tried using

$("#page1").hide();
$("#page2").show();

With this code page1 would hide, but page2 would not show.

I also tried combining them

$("#page1").hide();
$("#page2").show();
$.mobile.changePage("#page2");

Strings to generate html pages inside the sections.

"<div data-role=\"page\" id=\"page1\" data-theme=\"b\" data-content-theme=\"b\"><h1>Page 1</h1></div>"

"<div data-role=\"page\" id=\"page2\" data-theme=\"b\" data-content-theme=\"b\"><h1>Page 2</h1></div>"

This is the generated html:

<body>
<section id="index_page" class="ui-mobile-viewport ui-overlay-b" style="display: none;"><!-- Start of home page --><div data-role="page" id="page1" data-theme="b" data-content-theme="b" data-url="index" tabindex="0" class="ui-page ui-page-theme-b ui-page-active" style="min-height: 901px;"><h1>Page 1</h1></div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span><h1>loading</h1></div></section><section id="page2" style="display: block;"><div data-role="page" id="page2" data-theme="b" data-content-theme="b"><h1>Page 2</h1></div></section>
</body>

Any idea what I might be missing, or if this is a bug with jquery mobile and dynamically created html?

Upvotes: 0

Views: 53

Answers (1)

Romain Derie
Romain Derie

Reputation: 516

Indeed, the correct way to navigate from page to page programmatically is the $.mobile.changePage();

  • I made you an exemple JsFiddle where you can see how to navigate from a page to another injected page directly or programmatically.

  • I made you another exemple with just the informations you provided
    and asked for : JsFiddle where the pages are being injected, and then displayed. But it seems to be the same code you gave us. I don't know why it is not working for
    you.

    $("body").append("<div data-role=\"page\" id=\"page1\" data-theme=\"b\" data-content-theme=\"b\"><h1>Page 1</h1></div>");
$("body").append("<div data-role=\"page\" id=\"page2\" data-theme=\"b\" data-content-theme=\"b\"><h1>Page 2</h1></div>");

$.mobile.changePage("#page1");

    NB : the 2 last jquery lines (commented) are just here to show that the page navigation is still working after the first time.

  • Finally, you shouldn't use the hide() and show() functions to display/hide pages.

Upvotes: 1

Related Questions