How to download multi-page template via AJAX using jQuery mobile?

I have a problem in my webapp: When I open the "multi-page template" page in my browser, I can see both pages in the DOM, but only one is active, this is logical, there is nothing to say about it.

But when I load the multi-page template page from the previous page using ajax transitions, I see the previous page in the DOM (it’s also logical: not to load this page again if the user wants to return), but only one of the pages that are located on my Multipage Template page (first).

I thought I made a mistake during my entire javascript process: I automatically delete inactive pages after loading to avoid conflicts with identifiers, but I wrote a specific case for this page without using my automatic delete page function. And it works fine when I open the "multi-page template" in my browser (both pages are in the DOM, my "special case" works)

So, I went to the documentation page: http://jquerymobile.com/demos/1.0/docs/pages/page-anatomy.html

I scroll to the part: "Structure of multi-page templates", right-click on the button "View multi-page template"> check element We can see the code:

<a href="../../docs/pages/multipage-template.html" data-inline="true" data-theme="b" data-role="button" rel="external" class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow vt-p ui-btn-up-b"> <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"><span class="ui-btn-text">View multi-page template</span></span> </a> 

therefore, rel = "external" code means that this page will not be loaded using an ajax transition, and when you click on this button, the multi-page template works fine (but it is not loaded via ajax ...) returning to the button code, I dynamically remove the rel = "external" attribute from the DOM, so the page will load in ajax. I pressed the button, the multi-page loaded well, but it was impossible to get to the "#two" page. And after a quick look at the DOM: the id = "two" page was not there, not loaded by the framework.

So this is probably normal behavior, but is there a way to load ALL the internal pages of a multi-page template using the ajax transition?

(sorry for my bad english, hope it is still clear)

+4
source share
1 answer

This is normal behavior, but there is a workaround. Check out Todd Thomson's jQuery-Mobile-Subpage-Widget.

+3
source

Source: https://habr.com/ru/post/1390670/


All Articles