Use the same HTML fragment on more than one page _javascript technique of continuous

1. HTML page:

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("#clickToInsert"). Click (function () {
$.get ("Service.ashx?file=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 Background code:

Copy Code code as follows:

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 Documents:

Copy Code code as follows:

<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>
</div>

Extracts JavaScript from HTML fragments into a single file
This is also natural to think of, especially in HTML snippets in the case of more JavaScript code,
Extract as a JS file, let the browser help caching is a good way.
1. Redefining Pages2_2.txt

Copy Code code as follows:

<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>
</div>

2. Pages2_2.js

Copy Code code as follows:

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. Run, incredibly error!




Problem Analysis
The error message is that the Setup function is not defined, but it is obvious from the firebug that the pages2_2.js is actually loaded.
It is most likely that the setup function was invoked before the pages2_2.js load.
But our setup function call is placed in jquery's $ (function () {}), which is called when the page is loaded.

In fact, the problem is now very obvious, when the Ajax return page fragment, the entire page is already loaded, that is, Dom Ready.
So in the page fragment:

Copy Code code as follows:

$ (function () {
Setup ();
});

is equivalent to the following direct invocation:

Copy Code code as follows:

Setup ();

Solve the problem
There are three kinds of solutions to this problem.
1. The external JS file is loaded on the page, not the HTML fragment returned in Ajax.

2. We can load the external JS first, then load the pure HTML fragment.
Look at the implementation of Pages2_3.htm:

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("#clickToInsert"). Click (function () {
$.getscript ("Pages2_2.js", function () {
$.get ("Service.ashx?file=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 on the page is the sequential loading feature, the HTML fragment in the external JS reference on the top
Pages2_4.htm:

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("#clickToInsert"). Click (function () {
$.get ("Service.ashx?file=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:

Copy Code code as follows:

<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>
</div>

You may find that the third method is not necessary, but if you encounter such a need, 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 fragment
============================================================
On the sequential execution characteristics of JS
There may be some people who are not very clear about this feature, and I'll explain it by an example.

Copy Code code as follows:

<title></title>
<script src= "Js1.js" type= "Text/javascript" ></script>
<script src= "Js2.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
Console.log ("After JS2:" + new Date (). tolocaletimestring ());
</script>
<body>
</body>

Js1.js:

Copy Code code as follows:

Console.log ("Start load js1:" + new Date (). tolocaletimestring ());
The middle is a long, long piece of JavaScript, with a 12M of
Console.log ("End load Js2:" + new Date (). tolocaletimestring ());

Js2.js:

Copy Code code as follows:

Console.log ("Load js2:" + new Date (). tolocaletimestring ());

Let's take a look at the Firebug record:






As you can see, although the Js2.js was loaded earlier, it was only after js1.js execution that the execution of Js2.js was started.
Source code Download