Usually, we load JQuery by including JQuery resource in <script src="..."></script>. What's happening if there is always a JQuery to be loaded in parent page or another control. To resolve this, we do 2 steps:
1) Check if JQuery has existed or not.
2) If not exist, load JQuery directly in script code as opposed to including resource. Here is the code:
document.writeln("<script type='text/javascript' src='scripts/jquery-1.4.1.js'><" + "/script>");
Remember that, document.writeln("...") doesn't run sequentially. That means all the codesnipet written after this code can be executed immediately without waiting for document.writeln() to end. If you write your own control and use more than 2 controls in the same Web page, you might run across a conflict when JQuery is loaded more than 2 times. To resolve this, we need the 3rd step:
3) Use the flag variable to make sure JQuery is loaded only once.
var setLoadOnce = false;
To sum up, it should look like:
<head runat="server">
<script type="text/javascript">
var setLoadOnce = false;
function initJQuery() {
if (typeof(jQuery) == 'undefined') {
if (! setLoadOnce) {
setLoadOnce = true;
document.writeln("<script type='text/javascript' src='scripts/jquery-1.4.1.js'><" + "/script>");
}
}
}
initJQuery();
</script>
</head>
Please note if you load JQuery in JS code as above, the handler of JQuery events ('ready' event for example) must be placed after <body> to avoid running in wrong sequences (jquery events run first, jquery load runs later). Even if JQuery load is set to be written first, JQuery events load does after, it doesn't work.
In the following example, try to put all the scripts in <head> tag. Run it to see if both message "init jquery" and 'jquery ready" is displayed alltogether?
<head runat="server">
<script type="text/javascript">
var setLoadOnce = false;
function initJQuery() {
if (typeof(jQuery) == 'undefined') {
if (! setLoadOnce) {
alert('init jquery');
setLoadOnce = true;
document.writeln("<script type='text/javascript' src='scripts/jquery-1.4.1.js'><" + "/script>");
}
}
}
</script>
<script type="text/javascript">
$(document).ready(function () {
alert('jquery ready');
});
</script>
</head>
Now, put the "ready" event after <body>, we can see that both messages are displayed alltogether. It indicates that JQuery is loaded and executed as normally:
<head runat="server">
<script type="text/javascript">
var setLoadOnce = false;
function initJQuery() {
if (typeof(jQuery) == 'undefined') {
if (! setLoadOnce) {
alert('init jquery');
setLoadOnce = true;
document.writeln("<script type='text/javascript' src='scripts/jquery-1.4.1.js'><" + "/script>");
}
}
}
</script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
alert('jquery ready');
});
</script>
</body>
Side-effect of loading JQuery dynamically:
Loading JQuery on demand is great, but should not abuse it. The truth is, with JQuery loaded dynamically, you cannot create HTML elements on the fly using JQuery! There are always certain problems with dynamic script loading, no matter what. So please be careful! You should only use this technical if really needed.
Happy coding,
