...

View Full Version : External javascript synchronization.



nobitavn
10-04-2011, 06:44 AM
Dear All,

I got a problem with order of loading external javascript file.
I have 2 external javascript files: jsFile1. js and jsFile2.js.
And file jsFile2 use an object in file jsFile1.js. So file jsFile2.js have to load after file jsFile1.js.
But sometime I got runtime error, because file jsFile2.js is loaded before jsFile1.js
I added 2 js files by:
document.getElementsByTagName('head')[0].appendChild(jsFile1.js);
document.getElementsByTagName('head')[0].appendChild(jsFile2.js);

Does anyone know how to solve this problem.
Please help. Thank you.
Best Regards.

chump2877
10-04-2011, 07:42 AM
You need to look into "lazy loading" your dynamically inserted scripts.

This is one way: http://dotnetfollower.com/wordpress/2011/07/javascript-how-to-add-a-script-tag-dynamically/

And some more ways: http://www.google.com/search?client=opera&rls=en&q=script+onload&sourceid=opera&ie=utf-8&oe=utf-8&channel=suggest#sclient=psy-ab&hl=en&safe=off&client=opera&tbo=1&rls=en&channel=suggest&tbs=qdr:y&source=hp&q=javascript+lazy+loading&pbx=1&oq=javascript+lazy+loading&aq=f&aqi=&aql=&gs_sm=s&gs_upl=0l0l0l7809l0l0l0l0l0l0l0l0ll0l0&bav=on.2,or.r_gc.r_pw.,cf.osb&fp=f898fa5c2f00d7d8&biw=1355&bih=863

Basically, use script.onload for all non-IE browsers and script.onreadystatechange for IE to test for cross-browser, script readiness.

Also, another way to achieve this is to declare a global JS object/variable at the very end of your main script, and then, on a timer, check for when the variable is set, i.e.:


<!-- ..Somewhere near top of file.... -->

<script type="text/javascript">
var pgHead = document.getElementsByTagName("head")[0];
var pgScript = document.createElement("script");
pgScript.type = "text/javascript";
pgScript.src = "/js/tooltips.js";
pgHead.appendChild(pgScript);

function checkTooltipsCodeLoaded()
{
if (typeof CheckTooltipsClassLoaded == "function" && typeof pageIsAllDoneLoading != "undefined")
{
new Tooltips(document.getElementsByTagName("img"), true);
}
else
{
setTimeout("checkTooltipsCodeLoaded()", 250);
}
}
checkTooltipsCodeLoaded();
</script>


<!-- ..... lots of HTML/JS code here....then at the end of the file: -->


<script type="text/javascript">var pageIsAllDoneLoading = true;</script>

nobitavn
10-04-2011, 08:30 AM
Dear,

Thank you very much for your help.
I tried 2 ways, but the result is still not good. The error object missing is still happen: "A Runtime Error has occurred: 'OBJ' is undefined"
This is my code:


function AddScript(url, callback) {
var script = document.createElement('script');
script.src = url;
script.type = 'text/javascript';
script.defer = false;

if (typeof callback != "undefined" && callback != null) {
// IE only, connect to event, which fires when JavaScript is loaded
script.onreadystatechange = function() {
if (script.readyState == 'complete' || script.readyState == 'loaded') {
script.onreadystatechange = script.onload = null; // prevent duplicate calls
callback();
}
};

// FireFox and others, connect to event, which fires when JavaScript is loaded
script.onload = function() {
script.onreadystatechange = script.onload = null; // prevent duplicate calls
callback();
};
}

document.getElementsByTagName('head')[0].appendChild(script);
}

function loadScript() {
script = document.createElement('script');
script.type = 'text/javascript';
script.src = "jsFile2.js";
document.getElementsByTagName('head')[0].appendChild(script);
}

$(function() {
AddScript("jsFile1.js", loadScript());
});


'OBJ' is defined in jsFile1.js and used in jsFile2.js
Do I miss anything?
Thank you.

chump2877
10-04-2011, 08:49 AM
It's really hard to say what the problem is without seeing the full code and full error messages. And please enclose your code in code tags! (see hash mark/pound sign button in forum post edit mode)

I'm off to bed for the night, so maybe someone else can help you now...good luck!

Kor
10-04-2011, 09:47 AM
Dear All,

I got a problem with order of loading external javascript file.
I have 2 external javascript files: jsFile1. js and jsFile2.js.
And file jsFile2 use an object in file jsFile1.js. So file jsFile2.js have to load after file jsFile1.js.
But sometime I got runtime error, because file jsFile2.js is loaded before jsFile1.js
Techically, this is impossible, unless you use an asynchronous operation, which means you are performing an AJAX request.

In this case, either you make your request synchronous (by setting the asynchronous argument of the open() method to false:


AJAX.open("GET", url, false);

or you re-create your codes in such a manner that whichever function triggered in the second JS should be triggered after the request was delivered.

nobitavn
10-04-2011, 09:57 AM
Dear Kor,

Thank you very much.
Can you tell me more about this way? How to do that?

or you re-create your codes in such a manner that whichever function triggered in the second JS should be triggered after the request was delivered.

Do need any extend library to use this way?

AJAX.open("GET", url, false);

Hope for your help. Thank you.
Best Regards,

Kor
10-04-2011, 11:55 AM
I have no idea what is in your JS files, thus I have nothing else to add.

nobitavn
10-04-2011, 03:25 PM
Dear Kor,

Thank you very much.
My problem was solved with your method:



var xmlhttp=new XMLHttpRequest();
xmlhttp.open('GET', "jsFile1.js", false);
xmlhttp.send();

scr = document.createElement('script');
scr.type = 'text/javascript';
scr.text = xmlhttp.responseText;
document.getElementsByTagName('head')[0].appendChild(scr);



Thank you,
Best Regards.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum