JavaScript function conflict and overwriting when jquery mobile loads the dialog box page with the same name

Source: Internet
Author: User

JavaScript function conflicts and overwrites when jquery mobile loads the dialog box page

Version: jquery mobile 1.1.0/1.2.0

Problem description: There are two pages: Main. cshtml and dialog. cshtml. Both pages are Based on. NET mvc4 and use the default template _ layout. cshtml.

On the Main. cshtm page, load the data list using JavaScript. Click the link to bring up the dialog. cshtml page in the form of a dialog box, and load data using JavaScript on the dialog. cshtml page.

The dialog box is closed and the JavaScript function on Main. cshtml is unavailable!

Experiment shows that this is because jquery mobile loads pages using Ajax, resulting in a conflict between JavaScript Functions with the same name on two pages!

 

The content of the _ layout. cshtml template of. Net MVC 4 is as follows:

<!DOCTYPE html>

When we create a new page and write <SCRIPT>... </SCRIPT> and HTML tags in the page, we actually write them in the following Div of the template page:

<Div data-role = "content">
@ Renderbody ()
</Div>

When jquery mobile loads other pages using Ajax, it only loads the <Div data-role = "content">... </div> section of the page.

If <Div data-role = "content">... </div> exists in the two pagesJavaScript Functions with the same name,This will cause a conflict.! After the dialog box is closed,The JavaScript function on the mian. cshtml page is changed to dialog. cshtml.
JavaScript function of the same name!

Shows the Ajax loading principle of jquery Mobile:

 

Summary:

When jquery mobile is used for development, if multiple pages jump to each other with JavaScript Functions, you should name the JavaScript Functions of each page with different names, avoid overwrite conflicts for functions with the same name.

 

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.