Wait for the <script> tag to finish loading to execute another <script> tag inside the jQuery modal?
We load the HTML page using jQuery .modal()
;
In the HTML page, it does something like this:
<script src="load a .js file from some external domain"></script>
<script>
$(document).ready(function() {
console.log('Trying to call function...');
function_call_defined_in_external_domain_js_file();
});
</script>
If you've also tried without the doc ready function (and would rather not rely on jQuery):
<script src="load a .js file from some external domain"></script>
<script>
console.log('Trying to call function...');
function_call_defined_in_external_domain_js_file();
</script>
The problem is that for whatever reason it function_call_defined_in_external_domain_js_file()
tries to execute BEFORE the original <script>
ever loads and executes.
I can test this by adding console.log () debugging to both scripts, and I end up with something like this in the Chrome console:
Attempting to call a function ...
Now the code in the remote tag is being executed!
Somewhere as I expected the opposite would be:
Now the code in the remote tag is being executed!
Attempting to call a function ...
Can someone explain why this is happening and what can I do to avoid it?
source to share
You can use something pending js.
like this:
<script>
// Check if a name is defined
var isModuleDefined = function(moduleName) {
var fields = moduleName.split('.'), cur = window;
for(var i=0; i<fields.length; i++){
if(typeof cur[fields[i]] === "undefined") return false;
cur = cur[fields[i]];
}
return true;
};
var runWhenReady = function(){
// Wait for the availability of the function
if (!isModuleDefined("function_call_defined_in_external_domain_js_file")){
setTimeout(runWhenReady, 50);
return;
}
console.log('Trying to call function...');
function_call_defined_in_external_domain_js_file();
};
runWhenReady();
</script>
I use this method when I am trying to load a large compressed js file and the callback method is called before the js has been interpreted
source to share
You are setting up a race condition because the tags are loaded asynchronously. When the browser sees the tag, it starts loading the source onto another thread and continues to parse the rest of the page. So, unless this load is incredibly fast, your function definition won't exist in time even with $(document).ready
.
What you need is a callback called by your function definition.
var function_call_defined_in_external_domain_js_file = function() {
//do stuff here
}
// more code here if you want
call_me_when_function_is_ready_to_run ();
//end of file
and in the html page:
<script>
var call_me_when_function_is_ready_to_run = function() {
console.log('Trying to call function...');
function_call_defined_in_external_domain_js_file();
};
</script>
<script src="load a .js file from some external domain"></script>
Note that the order of the script has to be changed in HTML because the callback has to be defined before it can be potentially called.
source to share