Jquery Mobile + Dynamically Created pages

Question

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?

Do you have a first page not generated that links to the generated pages ? Or do you just have a body tag and EVERY page are behind generated — Romain Derie
– Romain Derie, Commented Mar 9, 2015 at 20:44

Romain Derie · Accepted Answer · 2015-03-09 21:07:05Z

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.

Collectives™ on Stack Overflow

Jquery Mobile + Dynamically Created pages

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related