How to use the same HTML clip "continued" on multiple pages

Previous Article We use textarea to simulate Ajax return results, causing some misunderstanding.

Here we first use Asp.net's generic handler to create a simple background to reproduce this Ajax process.
1. html page:

 
<SCRIPT type = "text/JavaScript"> $ (function () {$ ("# clicktoinsert"). Click (function () {$. Get ("service. ashx? File1_pages2_1.txt ", function (data) {$ (" # Placeholder ").html (data) ;}," text ");});}); </SCRIPT> <input type = "button" id = "clicktoinsert" value = "insert HTML"/> <Div id = "Placeholder"> </div>
 

2. Service. ashx backgroundCode:

Public void processrequest (httpcontext context) {string filepath = context. request ["file"]. tostring (); string filecontent = string. empty; using (streamreader sr = new streamreader (context. server. mappath (filepath) {filecontent = sr. readtoend ();} context. response. contenttype = "text/plain"; context. response. write (filecontent );}
 

3. pages2_1.txt file:

<SCRIPT type = "text/JavaScript"> $ (function () {var parent = $ ("# complex_page_segment"); $ (". previous ", parent ). click (function () {$ (". content ", parent).html (" Previous Page Content ") ;}); $ (". next ", parent ). click (function () {$ (". content ", parent).html (" next page content ");});}); </SCRIPT> <Div id = "complex_page_segment"> <input type = "button" value = "Previous Page" class = "previous"/> <input type = "button" Value = "next page" class = "Next"/> <Div class = "content"> page content </div>
 

Extract JavaScript from HTML fragments into a file
This is naturally expected, especially when there are a lot of JavaScript code in HTML fragments,
Extracted as a JS file, it is a good way for the browser to help cache.
1. Redefine pages2_2.txt

<SCRIPT type = "text/JavaScript" >$ (function () {setup ();}); </SCRIPT> <SCRIPT src = "pages2_2.js" type = "text/JavaScript"> </SCRIPT> <Div id = "complex_page_segment"> <input type = "button" value = "Previous Page" class = "previous"/> <input type = "button" value = "next page" class = "Next"/> <Div class = "content"> page content </div>
 

2. pages2_2.js

 
Function setup () {var parent = $ ("# complex_page_segment"); $ (". previous ", parent ). click (function () {$ (". content ", parent).html (" Previous Page Content ") ;}); $ (". next ", parent ). click (function () {$ (". content ", parent).html (" next page content ");});}
 

3. An error occurred while running!

Problem Analysis
The error message is that the setup function is not defined, but we can see from firebug that pages2_2.js is indeed loaded.
It is very likely that the setup function is called before loading pages2_2.js.
However, our setup function is put in jquery's $ (function () {}), that is, it is called only after the page is loaded.

In fact, the problem is obvious now. When Ajax returns a page segment, the whole page has been loaded, that is, Dom ready.
So in the page segment:

 
$ (Function () {setup ();});
 

It is equivalent to the following direct call:

 
Setup ();
 

Solve the problem
There are three solutions to this problem.
1. Load External JS files on the page, instead of HTML fragments returned by Ajax.

2. We can use JavaScript to first load external JS and then load pure HTML fragments.
Implementation of pages2_3.htm under "tables:

<SCRIPT type = "text/JavaScript"> $ (function () {$ ("# clicktoinsert "). click (function () {$. getscript ("pages2_2.js", function () {$. get ("service. ashx? File1_pages2_3.txt ", function (data) {$ (" # Placeholder ").html (data) ;}," text ");});});}); </SCRIPT> <input type = "button" id = "clicktoinsert" value = "insert HTML"/> <Div id = "Placeholder"> </div>
 

3. Use JavaScript to load pages sequentially, and place external JS references in HTML fragments at the top.

Pages2_4.htm:

<SCRIPT type = "text/JavaScript"> $ (function () {$ ("# clicktoinsert"). Click (function () {$. Get ("service. ashx? File1_pages2_4.txt ", function (data) {$ (" # Placeholder ").html (data) ;}," text ");});}); </SCRIPT> <input type = "button" id = "clicktoinsert" value = "insert HTML"/> <Div id = "Placeholder"> </div>
 

Pages2_4.txt:

 
<SCRIPT src = "pages2_2.js" type = "text/JavaScript"> </SCRIPT> <SCRIPT type = "text/JavaScript"> setup (); </SCRIPT> <Div id = "complex_page_segment"> <input type = "button" value = "Previous Page" class = "previous"/> <input type = "button" Value = "next page" class = "Next"/> <Div class = "content"> page content </div>
 

You may think that the third method is unnecessary, but if you encounter such a requirement, you will know the importance of the third method.

• Do not load this JS file on every page
• The caller does not know which JS files are associated with an HTML clip.

========================================================== ================================
Sequential execution of JS
Some people may not be very clear about this feature. I will explain it through an example.

 
<HTML>  
 
Js1.js:
 

Console. log ("START load JS1:" + new date (). tolocaletimestring (); // the middle is a very long piece of JavaScript, with 12 Mb of console. log ("end load JS2:" + new date (). tolocaletimestring ());
 
 
Js2.js:
 

 
Console. Log ("load JS2:" + new date (). tolocaletimestring ());
 
 
Let's take a look at the firebug record:
 

 
 

 
 

 
As you can see, although js2.js is loaded earlier, js2.js is executed only after js1.js is executed.
 

 
Source code download