Design dynamic loading using jquery's Load method and troubleshoot loaded page JavaScript failures

First, the problem analysis

For the back-end system, compared to everyone has an impression, know the layout structure,

In this layout we need to separate the header,sidebar,footer, and the content of the middle part needs to change dynamically, that is, according to different menus to navigate to different pages, and the overall layout will not change

This layout structure for simple HTML does not have the ability to embed parts of the content, so we need ourselves to find or solve this problem, because jquery compatibility and the breadth of use is quite good, here

Use the jquery load method to handle this page layout framework.

Second, the Load method detailed

1. Definition
$ (selector). Load (URL,data,callback);

The required URL parameter specifies the URL that you want to load.

The optional data parameter specifies the collection of query string key/value pairs that are sent with the request.

The optional callback parameter is the function name that is executed after the load () method completes.

2. Example

• You can also add the JQuery selector to the URL parameter.

The following example loads the contents of the id= "P1" element in the "Demo_test.txt" file into the specified <div> element:

    $ ("#div1"). Load ("Demo_test.txt #p1");

• The optional callback parameter specifies the callback function to be allowed after the load () method completes. The callback function can set different

$ ("#div1"). Load ("Demo_test.txt",function(RESPONSETXT,STATUSTXT,XHR) {    if( statustxt== "Success")      alert ("External content loaded successfully!") ");     if (statustxt== "Error")      alert ("error:" +xhr.status+ ":" +Xhr.statustext);  });

Third, the use of the layout framework load

1. Questions

Many people on the internet encountered a common problem when loading dynamic pages using the Load method, that is, the JavaScript code in the loaded page fails, because the external file loaded by load will delete the script part. Xxxfunction is undefined when the page's JavaScript is invoked on the loaded page.

2. Resolve

• For Header,sidebar,footer, a section that contains only static HTML code is loaded directly using load
• The content that corresponds to the change in the intermediate contents will generally contain the corresponding JavaScript code, using the custom Load method (code below), while loading the corresponding content using the Jquery.load () method, Using the load callback method to handle the loading of the JavaScript, load the JavaScript code of the loaded page into the layout page of the <div id= "content" ></div> so each load () Content is overwritten, so there's no need to worry about duplicate loading. This is the perfect solution to the load page JS failure problem. The specific code looks like this:

Iv. code Examples

Layout page:

<! DOCTYPE html>‘s background. This div must is placed immediately after the control sidebar--<div class= "CONTROL-SIDEBAR-BG" ></div> </div> <!--./wrapper-- <!--jQuery 2.2.3---<script src= ". /resources/plugins/jquery/jquery-2.2.3.min.js "></script> <!--Bootstrap 3.3.6-<script Src= ". /resources/bootstrap/js/bootstrap.min.js "></script> <!--left menu--<script src=". /resources/dist/js/common/global.js "></script> <script src=". /resources/dist/js/menu/menutemplate.js "></script> <script src=". /resources/dist/js/menu/menu.js "></script> </body><script>//load the contents of the Header,sidebar,footer of the page layout$ ("#header"). Load ("inc/header.html")); $("#sidebar"). Load ("inc/sidebar.html")); $("#footer"). Load ("inc/footer.html")); /** Load the transformation content, the main URL parameter is the DOM object, and the URL in the DOM is placed in the href, * call way: <span onclick= "javascript:load (this);" Href= "/backstage/ website/test.html "> Test </span> * Note: 1. The DOM object is best not to use a tag, because clicking on the a tag will enter the page specified by the href * 2. The content to be loaded is labeled with id=" content ". Because load indicates the contents of the content specified in the loading page, * 3. The javascript for the corresponding page is written under content*/ functionload (URL, data) {//alert ($ (URL). attr ("href"));$.ajaxsetup ({cache:false }); $("#content"). Load ($ (URL). attr ("href") + "#content", data,function(Result) {//alert (result);         //loading JavaScript on the loaded page to the page for execution$result =$ (result); $result. Find ("Script"). AppendTo (' #content ')); }); }</script>
The page is loaded:
<div id= "Content" >    <div> Test two </div>    <span onclick= "javascript:load (this);" href= "/ backstage/website/test.html "> Test </span>    <a href=" javascript:test (); " > Test </a>    <script>        function Test () {            alert ("test two pages");        }     </script>    <script>        function  test2 () {            alert ("Ceshi");        }    </script></div>
Effect:
Design dynamic loading using jquery's Load method and troubleshoot loaded page JavaScript failures