Javascript AJAX on a dynamicly loaded div?

Question

How to add onload event to a div element?

I've read this, despite this I have a problem.. I know there's no onLoad for divs, but I should be able to execute a snippet like so:

...
<div id="content">
    <div class="text">
    </div>
</div>
<script type="text/javascript">
    navigate('main.php', 'content');
</script>
....

This doesn't work, if I start a new browser session and navigate to index.php, it shows me a login window. After logging in it redirects me to index.php but with some session variables and cookies set. Now index.php contains the code above, prior to this content didn't exist.

Now to my issue: it appears as if most browsers refuses to accept that content exists, in the navigate function I've got:

function navigate(str, what) {
    if(what == null) {
        what = document.documentElement;
    } else {
        what = document.getElementById(what);
    }

what will become null because it's a not a valid Element at the moment of execution.

I've tried:

window.onLoad = naviate('main.php', 'content');

Which does nothing, same issue there.. Also tried putting the <script> block at the end without luck.

I can't use jQuery or anything so please keep it to standard Javascript, HTML and CSS. Browsers in use: IE8, Chrome, FireFox.

---

1. Load index.php
2. Login to loginwindow
3. Load index.php
4. Upon completed load of index.php, read all elements including content
5. Update content with some AJAX data.

It works if

I login, load the page once with unsuccessful result and then refresh the page again.

And here's the reason why:

I use AJAX on the login window as well, it uses navigate() just as all my buttons and what not does. So the issue is that index.php gets loaded, with a login window, that login window updates the entire page with AJAX (javascript) which in turn, tries to call navigate() again from within the return data from the AJAX call... The "inline" navigate() gets called!!!, it's just that it doesn't know all the elements because it's load via AJAX.

Answer 1

Try this :

window.onload = function(){
    navigate('main.php', 'content');
}

Answer 2

According to my tests you can get div element by .getElementById even before the page is loaded.
Do not forget that the navigate function must be defined before it is called. So if you have your scripts at the end of document (which is correct), you must call the function after execution of theese scripts.

But anyway, you've assigned the .onload function wrongly. Do it like this:

window.onload = function(event) {
                /*any script here*/
}

Or like this:

function load(event) {
                /*any script here*/
}
window.onload =load;