JQuery Mobile page return does not need to be get_jquery

JQuery Mobile is a front-end development framework for creating mobile WEB applications.

JQuery Mobile can be applied to smartphones and Tablet PCs.

JQuery Mobile uses the HTML5 & CSS3 Minimal Script layout page.

The recent company's Web App project has made me privileged to be in touch with and learn about jquery Mobile. This is a really good mobile development library, helping engineers who are good at web development, getting started quickly and building their own mobile apps. But in the first two days, I ran into a problem, so I checked a lot of data did not find a good solution, and finally forced me to read the jquery mobile source code, and then wrote an extension, to be resolved. Let me tell you the next word.

Problem description

Suppose that there are three pages in the project, namely Main.html, test1.html, test2.html (followed by Main, Test1, Test2), where main page contains a link to the Test1 page (that is, a tag), There is a link to data-rel= "back" in the Test1 and a link to the Test2, test2 only a link with a property of Data-rel= "back". After main turns to Test1, click the back link to return main (equivalent to clicking the browser's return button) without resending the GET request, but when test1 to Test2, when the Test2 page clicks the back link to return to Test1, A GET request is sent again. The problem with this is that all the operations that test1 do will fail after the Test2 returns. For example, a is a paging list page, turned to the second page and then to B, then when a return to a, you will not be able to position to the second page.

Cause analysis

I first looked at the structure of the HTML with Firebug, and found that jquery mobile would add main and test1 to the page structure, and that when you moved from Test1 to Test2, Test1 was automatically deleted so that the DOM tree contained only main and test2 , so returning test1 in Test2 sends a GET request. So does that mean that if you can cache the history page into the DOM (like Main and test1), you can solve the problem.

Solve the problem

After some searching, I saw a description of the Caching pages in the DOM at the jquery Mobile website:

Caching pages in the DOM
To keep all previously-visited pages in the DOM, set the Domcache option on the page plugin to true, like this:
$.mobile.page.prototype.options.domcache = true;
Alternatively, to cache just a particular page, you can add the data-dom-cache= "true" attributes to the page ' s container:
<div data-role= "page" id= "Cacheme" data-dom-cache= "true" >
can also cache a page programmatically like this:
Pagecontainerelement.page ({domcache:true});
The drawback of DOM caching is this DOM can get very large, resulting in slowdowns and memory on issues some. If you enable DOM caching, take care to manage the DOM yourself and test thoroughly on a range of devices.

As you can see from this citation, these three methods can cache the page into the DOM, so I use the second method, which adds the data-dom-cache= "true" attribute to the page Div, but the following two problems occur:

1, as shown in the following figure, when my access path is Main->test1->test2->test1 (Test2 is History.back () returned), Firebug can see that the test2 still exists in the DOM, Such results are described in the Red section: the DOM becomes large, resulting in slower pages and memory errors on some devices.

2, when I exist such a page, it through different parameters to display different content, and on the page, there is a JS script, will do some processing of the elements on the page, and our common way is to use ID to get the target element, because we are using cache page, will cause JS event or operation confusion. For example, here I added a test1_1 page, it's almost the same as test1, they all have the same ID div and the same event processing button, this event is to add content to this div, when access path is main->test1-> Test1_1, click on the Test1_1 button, will find that does not seem to trigger this event, in fact it has been triggered, but the content added to the test1 in the Div, respectively, into the following figure

So for most applications today, this scenario is undesirable unless you manage the life cycle of pages in the DOM.

Optimization scheme

Through the experiments above, I also know that I need to meet my needs, I can only manage the life cycle of the page in the DOM. Then there is the question: when does the page expire (that is, it is removed from the DOM)? According to my requirements, when you return to Test1 from Test2, you should remove the test2 from the DOM, and delete test1 from the DOM when you return main from Test1. If you navigate from main to Test1 again, you have to launch a GET request, which I think is reasonable because the user doesn't think that clicking links to a new page also requires caching. So I should be on the page before or after the display, delete it after the history, so I did the pagebeforeshow, pageshow when the delete operation, that is, the following script (plug-in form):

(function ($, undefined) {
$.fn.subpage = function (options) {
$ (document). Bind (
"Pagebeforeshow",
function () {
var ForWord = $.mobile.urlhistory.getnext ();
if (ForWord) {
var dataurl = Forword.url;
var forwordpage=$.mobile.pagecontainer
. Children (": Jqmdata (url= '" + Dataurl + ")");
if (forwordpage) {
forwordpage.remove ();
}
}
$.mobile.urlhistory.clearforward ();
});
$ (document). Bind ("pagecreate create", function (e) {
$ (": Jqmdata (role= ' page ')", e.target). subpage ();

The result backfired, when the page returned, there was a JS script error, the following figure:

So what's the reason? Do not deal with this incident, where to deal with it? So I studied the jquery mobile source and found the following paragraph:

Transitionpages (ToPage, FromPage, Settings.transition, Settings.reverse)
. Done (function () {
Removeactivelinkclass ();
If there ' s a duplicatecachedpage, remove it from the DOM today that it's hidden
if (settings.duplicatecachedpage) { C5/>settings.duplicatecachedpage.remove ();
}
Remove initial build class (present in only pageshow)
$html. Removeclass ("ui-mobile-rendering");
Releasepagetransitionlock ();
Let listeners know we do changing the current page.
Mpc.trigger ("Pagechange", triggerdata);

The page after switching over, will trigger the Pagechange event, so I changed the pagebeforeshow to Pagechange, everything in accordance with the expected operation, and there is no mistake, finally done.

Summarize

When using this plug-in, note the following points:

1. You must refer to the jquery and jquery mobile script files before referencing the script;

2, you must add Data-dom-cache= "true" on the page.

The above is a small series to introduce the jquery mobile page return does not need to get the relevant instructions, I hope to help!