I'm trying to encapsulate a javascript that I built using jQuery, jQuery UI, jQuery Form and xmlDom.
I want to be able to send to my client just one javascript that references the other ones, including just a small piece of js for options settings.
Find below an example:
<script language="javascript">
var myOptions = {
shop: 1,
style: "gold"
}
load();
</script>
<script src="http://myServer/myScript.js" type="text/javascript"></script>
It's been nearly impossible to me to load jQuery and plugins dynamically. I read a lot of examples, jQuery works fine when I load it dynamically, but the rest of the extensions never worked properly. Following sequence is the unique one that loaded at least a couple of plugins:
Set a load function that loads jQuery dynamically:
load = function() {
load.getScript(url_base + "/js/jquery-1.3.2.js");
load.tryReady(0);
}
load.getScript = function(filename) {
var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.setAttribute("src", filename)
if (typeof script!="undefined")
document.getElementsByTagName("head")[0].appendChild(script)
}
load.tryReady = function(time_elapsed) {
// Continually polls to see if jQuery is loaded.
if (typeof $ == "undefined") { // if jQuery isn't loaded yet...
if (time_elapsed <= 5000) { // and we havn't given up trying...
setTimeout("load.tryReady(" + (time_elapsed + 200) + ")", 200); // set a timer to check again in 200 ms.
} else {
alert("Timed out while loading jQuery.")
}
} else {
...
}
Load every plugin after that, jQueryForm, jQuery UI, xmlDom
When I check for jQuery form it's available:
if (jQuery().ajaxForm)
When I check for xmlDom it works.
When I check for jQuery UI it's never available.
if(jQuery().ui)
It doesn't matter if I set a timeout to wait for UI, it's never loaded. Seems to be jQuery executes my UI features before it's loaded.
Can anybody send me a link to help with this?
I'm trying to encapsulate a javascript that I built using jQuery, jQuery UI, jQuery Form and xmlDom.
I want to be able to send to my client just one javascript that references the other ones, including just a small piece of js for options settings.
Find below an example:
<script language="javascript">
var myOptions = {
shop: 1,
style: "gold"
}
load();
</script>
<script src="http://myServer/myScript.js" type="text/javascript"></script>
It's been nearly impossible to me to load jQuery and plugins dynamically. I read a lot of examples, jQuery works fine when I load it dynamically, but the rest of the extensions never worked properly. Following sequence is the unique one that loaded at least a couple of plugins:
Set a load function that loads jQuery dynamically:
load = function() {
load.getScript(url_base + "/js/jquery-1.3.2.js");
load.tryReady(0);
}
load.getScript = function(filename) {
var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.setAttribute("src", filename)
if (typeof script!="undefined")
document.getElementsByTagName("head")[0].appendChild(script)
}
load.tryReady = function(time_elapsed) {
// Continually polls to see if jQuery is loaded.
if (typeof $ == "undefined") { // if jQuery isn't loaded yet...
if (time_elapsed <= 5000) { // and we havn't given up trying...
setTimeout("load.tryReady(" + (time_elapsed + 200) + ")", 200); // set a timer to check again in 200 ms.
} else {
alert("Timed out while loading jQuery.")
}
} else {
...
}
Load every plugin after that, jQueryForm, jQuery UI, xmlDom
When I check for jQuery form it's available:
if (jQuery().ajaxForm)
When I check for xmlDom it works.
When I check for jQuery UI it's never available.
if(jQuery().ui)
It doesn't matter if I set a timeout to wait for UI, it's never loaded. Seems to be jQuery executes my UI features before it's loaded.
Can anybody send me a link to help with this?
Share Improve this question edited Feb 25, 2011 at 10:35 mylesagray 8,8797 gold badges50 silver badges71 bronze badges asked Dec 27, 2009 at 17:25 Max RiosMax Rios 2,2562 gold badges21 silver badges37 bronze badges 2-
When you view the html is the ui script tag in the head? What happens when you test
if (jQuery.fn.ajaxForm)? – czarchaic Commented Dec 27, 2009 at 18:23 - That line you mentioned works, I mean, expression is true. I need all the extensions are loaded before my script. I could get a solution for IE but it doesn't work in Chrome and Firefox, which is test those conditions for certain period until it bees true or returns by timeout. – Max Rios Commented Dec 29, 2009 at 11:39
2 Answers
Reset to default 7Perhaps, this might help. From the dive.into.javascript site:
SidJS is a lightweight JavaScript library used to load JavaScript scripts and CSS stylesheets on demand. It increases AJAX applications performance by loading resources when they're needed.
Minified with the Google Closure Compiler, it weighs in at 1.12KB (625 bytes when GZipped).
If you absolutely cannot include another javascript library, you can take a look at the code (there isn't much of it, really); with the ideas in there, you should be able to fix your script.
EDIT
If you use the Google Closure Compiler to minify the script, you'll need to add back the node.sheet.cssRules line. It appears to be used in Gecko and Webkit browsers, to test if a lazy-loaded stylesheet has been pletely downloaded (of course, if you won't be lazy-loading stylesheets, you can remove that section pletely).
As Zen of Python says, "Simple is better than plex". Is all this mess with timeouts worth something? As I assume, the browswer will HAVE to load all js-libraries in any way (to execute your "myScript.js" file), so isn't it easier just to include them "normally"?