Dynamic loading or execution of script analysis in jQuery Mobile

JQuery Mobile is the Mobile framework used in my new project. It is used only because of its compatibility and the rotation and elegance between pages. But I don't like jQuery Mobile's UI, so I introduced bootstrap. During development, we found that because JQM uses ajax to load the linked page, we cannot place the scripts of different pages between the headers, just as we designed earlier, even if these scripts are transferred to the body, some code may fail to be executed. This article briefly introduces some situations I encountered during my own development.

1. Framework init initial event

The habit of using jquery is to start with $ (document). ready, but this does not work in jqm because the ready event is only executed once. When you open a URL, jqm intercepts the jquery ready event and runs a large chase before ready. The main event is the mobileinit event. Therefore, some core configurations of mobile should be put in the mobileinit event hook.

$ (Document). on ('leleinit ', function (){
$. Mobile. pageLoadErrorMessage = "loading error! "
});
However, it is very important that the DOM has not been fully loaded after mobileinit, so it is useless if you put the DOM operations in the mobileinit event hook, for example, append and remove.

The ready event occurs when the DOM has just been loaded. In this case, all the operations can be done. If jqm is used on your mobile web, remember that even if you click a link, the URL is changed and the page you see is changed, but the ready event has already been executed, therefore, you will not execute the ready event again unless you refresh the page. If you view the review elements, you can find that the loaded page actually captures the body content of the page pointed to by the link and stores it in a div data-role = 'page, hide the previous page. So it is actually very simple. If you use functions such as on or old live in ready to bind new things, you can still, for example:

$ (Document). ready (function (){
$ (Document). on ('click', '. btn', function (){
Alert ('OK ');
});
});
The above code uses the on to bind the click event, so the. btn button in the page loaded by ajax can also respond. However, some plug-ins require execution during DOM loading, so there is no way. JQM provides new events to solve this problem, namely pageinit.

Pageinit occurs when a new page is loaded by clicking a link. Because the entire application is loaded through ajax, when a new page is opened, only one DOM append and element hide can be implemented. What should I do when a new page is opened? Depends on pageinit. For example, you now have two pages, A and B, and A magic lamp plug-in is used at the same time, but the Magic Lamp plug-in is only executed in the ready event. If the entry is A page, when you enter A, you can see the magic light, but when you click B, you find that the magic light is not loaded. At this time, put the Magic Lamp code in the pageinit event hook.

$ (Document). on ('pageinit ', function (){
Flash_set ();
});
But the problem persists. Sometimes, even if you use code in the pageinit event hook, it cannot be executed. Do you think of the difference between mobileinit and ready: Before the DOM is loaded, the latter is just loaded. We can compare pageinit to mobileinit. Who will replace ready? Jqm provides a pageshow event. pageshow occurs when a new page is fully displayed. Don't talk about DOM at this time. It can basically be said that it is the last stage of page loading, so we can do everything at this time, including the newly loaded DOM through the jqm ajax operation.

2. How to place your code

Through the above explanation, you may think that it is better to put all the information in pageshow. But the fact is that there is no need to execute so many scripts on each page, and you have to consider how to arrange them in different page locations. For example, css. If you want to directly use a separate css in a page, do not place links between headers, because if it is newly loaded, no code between headers will be loaded in. You can only put this pile of css in the middle of the page body.

If your code is not properly placed, the script execution may be messy. For example, if the same id is used on different pages in your HTML element, two identical IDs may appear in the same DOM due to ajax loading, resulting in execution confusion. Even if you use the new javscript code on the new page, it may not be executed. For example, you want to check the submitted form on the new page, so the following code is added to the body of the new page.

$ ('# Form'). submit (function (){
...
});
The result shows that the task is not executed at all. The reason is very simple. The submit event is only added to the event listening sequence during ready, and the newly added js has passed the ready time. Therefore, the above code should be replaced

$ (Document). on ('pageshow ', function (){
$ ('# Form'). submit (function (){
...
});
});
3. Page jump problems

When jqm uses PHP header location to perform page jump, it is silly and cannot load anything. If you want to jump to the page, I will teach you a few ways to solve the jump problem in your application.

First, use data-ajax = "false" to cancel Ajax page loading. Although the page rotation of jqm looks really cool, it can only be discarded if it is a last resort. At this time, you must note: If you re-execute the page DOM, whether the css and js introduced in your new page can meet the requirements of the page to be loaded, because once you cancel Ajax, this is equivalent to changing the webpage title and the loaded file.

Second, PHP determines that different links are displayed under different circumstances. For example, for pages that require user logon, some pages can be viewed only after the user logs on. You can use PHP to determine whether to log on to the pages. If you do not log on to the pages, the links on the pages are directly replaced with those on the logon pages, if you have logged on, it will be displayed normally. Note that, for example, the home page may have such a link. If you log on, the link in the home page DOM will not change, therefore, you need to refresh the URL after logging on, or modify these links through the Ajax success callback function.

Third, use $. mobile. changePage for indirect jump. The reason why jqm cannot achieve jump is that its Ajax loading page cannot bypass the header, so if you 'd better not have a jump, such as where you need to jump, simply introduce the jump page, display the page. But this is obviously not good, so there is no way to use the indirect jump proposed in this. For example, if you want to use the header location somewhere, stop and replace the jump code with the following code:

<Html>
<Head>
<Title> Jump to the page... </title>
<Meta charset = "utf-8">
</Head>
<Body>
<Script>
$. Mobile. changePage ('{$ url }');
</Script>
</Body>
</Html>

$ Url is the destination address to jump. The principle of this implementation is very simple. The code loaded by Ajax is the <script> section above. After changePage is activated, the jump starts. However, this action is actually not good for the user experience, because this jump will show a blank page, although it does not affect the overall situation, but also very smooth implementation of the jump, but if the user pursues details, you may need to further beautify the interface, such as adding some jump prompt images.

The element cannot be correctly rendered after jquery mobile dynamically adds the element.

Listview: add jq (". detail"). listview ("refresh ");
Div or Other: Add. trigger ("create ");
========================================================== ====================================

Jqm inserts jqm attributes and classes in each element based on data-xxx during page initialization. After Page initialization, if an element is inserted dynamically, it is often ugly because the jqm style is not inserted. This can be viewed using development tools in the browser. Some elements have many more classes, and the dynamically inserted element code is what you wrote.

To make the dynamically inserted element have a jqm style, you can trigger the create event on the jqm object:

<Span style = "font-size: 18px;" >$ (selector). trigger ('create'); </span>

The create Event applies to a wide range of elements (raw markup ?), For example, to insert a button

$ ('<A data-role = "button"> dy button </a>'). appendTo ('# content'). trigger ('create ');

Some objects provide the refresh method, such as listview and flip toggle. The difference between the refresh method and the create method is that the refresh method must be applied to an existing object, as shown in figure

$ ('Ul '). listview ('refresh'), and refresh only updates the newly added elements. For example, the latest append elements in listview are updated, and the original elements remain unchanged. (I do not know whether it is understood or not. Some of them are not tested. Original http://stackoverflow.com/questions/7663078/jquery-mobile-page-refresh-mechanism

Do not use the jqm style:

If you do not want jqm to automatically initialize your elements, there are two methods. Add the data-role = "none" attribute, or configure the keepNative option in the mobileinit event.

$ (Document). bind ('leleinit ', function (){
$. Mobile. page. prototype. options. keepNative = "select, input. foo, textarea. bar ";
});