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?
1 answers
solution1
1 ACCPTED 2015-03-09 20:55:51
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.