Develop Reference

Javascript window onload in one file and dependent function and its call in another: order of execution

I have two Javascript files:
drawField.js and updateState.js
drawField.js has this call:
window.onload = function() {
drawField(10);
}
It creates an element <div id="game-field">.
In updateState.js file I make use of that element:
function getGameField() {
var gameDivs = document.getElementById("game-field").children;
console.log(gameDivs);
}
getGameField();
However get an error: there are no children of element null.
If I place the getGameField() call inside window.onload, it works just fine. Which leads me to believe the call to the function gets executed before the div is created. Why would that be so? First, isn't the onload function supposed to be the first thing done once a page is loaded? Second, I have the first and second files imported like this into my page:
<script src="${pageContext.request.contextPath}/js/drawField.js"></script>
<script src="${pageContext.request.contextPath}/js/updateState.js"></script>
</body>
</html>
Which made me believe that code in the drawField.js would get executed before code in updateState.js, which doesn't seem to be the case.
How would I fix this problem, without placing getGameField() call inside window.onload?

First, isn't the onload function supposed to be the first thing done once a page is loaded?
The page's onload event is fired after it gets loaded. Technically the page is considered loaded when all of its javascript files are loaded and executed in the browser. So when updateState.js file is executed, function getGameField is also executed, and when it searches for the element, it cannot find it since it hasn't been created yet.
How would I fix this problem, without placing getGameField() call inside window.onload?
I would suggest placing getGameField in a callback if window.onload is not acceptable.

You have called the function getGameField() before the drawField() function.
This is happening because the drawField() function is called when the document is completely loaded, where as the getGameField() function is called irrespective of the document status.
To solve this, call getGameField() function only when it is ensured that drawField() function is called before.

Just call the logic method after creating tag:
window.onload = function() {
drawField(10);
getGameField();
}
First, isn't the onload function supposed to be the first thing done once a page is loaded?
Yes, but javascript may be executed before the page is fully loaded.
Second, I have the first and second files imported like this into my page:
Which made me believe that code in the drawField.js would get executed before the code in updateState.js
That is correct, the code in drawField.js executed earlier, then the updateState.js executed. And then happened onload event which fired the method from the first file. So the method from the second file was executed (as you are calling it directly in the file) before the tag was created with onload event.
UPDATE:
You can also include your script files at the end of the body in needed order and immediate execution. Then you won't need an onload handler. This may not work for more difficult situations, though. Therefore, onload approach is preferred.

Design a header script to run after the document is finished loading

I have a javascript function, "loadFramework()" that modifies an HTML document. Specifically, it repeatedly runs the jQuery command $("#element-id").load("document/name.html"), which injects the HTML in document/name.html directly into the element with #element-id.
Originally, I ran loadFramework() in a script in the document's header. However, since then I've realized that the function fails if the page has not loaded yet, since it relies on there being an element with #element-id.
I can't figure out how to get this function to run when it should. A simple solution seemed to be setting it to be the document.onload function:
document.onload = function() {
loadFramework();
}
But in this case it never seems to run at all.
How do I make sure a header function runs only after the document has loaded?

You should use window.onload if you are looking for a vanilla JS option
window.onload = function() {
loadFramework();
}

Jquery load takes additional argument "complete". You can run the javascript there. So the code would be:
$("#element-id").load("document/name.html", function(){
loadFramework();
});
You can also use $(document).ready(function{loadFramework()}) inside the html you are loading.

If you want to execute the loadFramework() method after "document/name.html" is loaded, I would suggest the following code.
$(function() {
$("#element-id").load("document/name.html", function(){
loadFramework();
});
});

jQuery iframe onload

I have an iframe that represents the content of my main page and it loads a different src depending on the menu option chosen. I want to perform a series of actions as soon as the iFrame is loaded but I cant seem to get it to work. The code looks more or less like the following:
$(document).ready(function () {
$('#navigation').load(function () {
alert('frame loaded!')
});
});

.load for event binding was deprecated in jQuery 1.8, use .on("load" instead.

I asume this function is in your iFrame and will be executed after the document loading. If not - ther is some conceptual error. Anyway - the load function in jQuery will try to load a html document or piece of it in the object you specify - http://api.jquery.com/load/

Check if iframe is loaded inside $(document).ready

I want to check if iframe is loaded with the following code:
$(document).ready(function() {
jQuery('#iframeID').ready(somefunction);
}
It seems that 'somefunction' is called before iframe is loaded (the iframe is empty - just empty html-head-body).
Any idea why this happens?
Thank you.

Try this instead.
$('#iframeID').load(function() {
callback(this);
});
While dealing with iFrames, it is good enough to use load() event instead of $(document).ready() event.

This is because you're checking if the iFrame is ready, not the document inside.
$(document.getElementById('myframe').contentWindow.document).ready(someFunction);
should do the trick.

I have tried:
$("#frameName").ready(function() {
// Write you frame on load javascript code here
} );
and it did not work for me.
this did:
$("#frameName").load( function() {
//code goes here
} );
Even though the event does not fire as quickly - it waits until images and css have loaded also.

Reload? Javascript after Jquery .live/.load

I wanted to load some fragments of external content inside a div, through a menu.
Found "load" and "live", found a tutorial used it = success!
Except, like what's explicit in the documentation, it doesn't load JavaScript.
The thing is, the destination page already loads, inside the header, that same JavaScript, 'cause Wordpress loads it in every page. In this particular page, I'm only using the plugin (nextgen gallery) through the jQuery AJAX call.
So, what I believe is my problem is that I somehow need to alert/reload the JavaScript, right?
And how can I do this?
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
// ajax pagination
jQuery('#naveg a').live('click', function(){ // if not using wp-page-numbers, change this to correct ID
var link = jQuery(this).attr('href');
// #main is the ID of the outer div wrapping your posts
jQuery('#fora').html('<div class="loading"><h2>Loading...</h2></div>');
// #entries is the ID of the inner div wrapping your posts
jQuery('#fora').load(link+' #dentro')
return false;
});
}); // end ready function
</script>
PS: I've substituted "live" with "on" but didn't work either.

I'm not sure if I understand... your load() command is puling in some Javascript that you want executed? I'm not sure if you can do that. But if you just need to call some JS upon load() completion, you can pass it a function like so:
jQuery('#fora').load(link+' #dentro', function() {
console.log("load completed");
// JS code to be executed...
});

If you want to execute Javascript code included in the loaded page (the page you retrieve via .load()), than you have to use the url-parameter without the "suffixed selector expression". See jQuery documentation for (.load()):
Note: When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being
removed. This executes the script blocks before they are discarded. If
.load() is however called with a selector expression appended to the
URL, the scripts are stripped out prior to the DOM being updated,
which is why they are never executed. An example of both cases can be
seen below:
Here, any JavaScript loaded into #a as a part of the document will
successfully execute.
$('#a').load('article.html');
However in this case, script blocks in the document being loaded into
#b are stripped out prior to being executed:
$('#b').load('article.html #target');
I think that's your problem (although I have no solution for you, sorry).
Proposal: Maybe you can load the whole page (including the Scripts) and remove (or hide) the parts you don't need?
Cheers.