How to load run JavaScript onload function after an Ajax onload function

[Frinavale]

I have a slight problem with a Tab Control that I've developed for an application. Once sent to the browser it runs via JavaScript. The JavaScript is dynamically generated by my .NET code. Everything works fine.

I've recently been adding "animations" to my web application using Ajax.
The animation "Fades" the page in once it is finished loading (without this fading effect the page load is very choppy).

My Tab Control requires some "initializing" when the page is loaded (sets some <div>'s invisible so to show only the one selected). Without this "initializing" all of the <div>'s are displayed.

I've been using the following JavaScript to initialize my Tab Control:

 
                    if(window.attachEvent)
                    {
                      window.attachEvent("onload" ,"InitializeTabControl");
                    }
                   else{
                        window.addEventListener("load","InitializeTabControl", false);
                    }
 

The problem with this is that the JavaScript call too fast...the tab that should be set to Visible is set before the Ajax animation that fades the page into view happens.

I've attempted to modify the JavaScript responsible for initializing my Tab Control to be:

 
                    if(document.attachEvent)
                    {
                      document.attachEvent("onload" ,"InitializeTabControl");
                    }
                   else{
                        document.addEventListener("load","InitializeTabControl", false);
                    }
 

However, this does not appear to do anything.

Does anyone know how to set the JavaScript for the Tab Control to happen about the same time as the animation?

Is the document.addEventListen supposed to work the way I'm trying to use it?
(I'm probably not using it right...)

Thanks a lot for your help!
-Frinny

[pronerd]

The problem with this is that the JavaScript call too fast...the tab that should be set to Visible is set before the Ajax animation that fades the page into view happens.

I've attempted to modify the JavaScript responsible for initializing my Tab Control to be:

 
                    if(document.attachEvent)
                    {
                      document.attachEvent("onload" ,"InitializeTabControl");
                    }
                   else{
                        document.addEventListener("load","InitializeTabControl", false);
                    }
 

It sounds like it is working exactly as it should assuming the there is a supported onload or load event for the window element in the browser you are using. My understanding was the the onload events where only supported for the body and frame elements in most browsers.

Anyway it sounds like it is working as it should. The onload event is triggering as soon as the page downloads the code. That executes the logic making the tab visible. While that is going on the AJAX logic fades the page in.

The best option to get the entire page to fade in at the same time in sync might be to have the server side logic set the tab visibility, so that every thing on the page is then faded in together.

Another option would be to add a call in the fade in logic to call tab init functions so the tab is made visible as soon as the page finishes fading in.

[Frinavale]

Thanks for your prompt advice Pronerd!

It sounds like it is working exactly as it should assuming the there is a supported onload or load event for the window element in the browser you are using. My understanding was the the onload events where only supported for the body and frame elements in most browsers.

It isn't working as it should becuase there is a split second where the JavaScript makes my Tab visible when nothing else is being shown.

Then the Ajax animation runs, which sets everything back to invisible and then fades it in.......

It's really not nice at all. I need to find a way to figure out how to get the JavaScript to load either at the same time as the Ajax, or after.

Anyway it sounds like it is working as it should. The onload event is triggering as soon as the page downloads the code. That executes the logic making the tab visible. While that is going on the AJAX logic fades the page in.

The best option to get the entire page to fade in at the same time in sync might be to have the server side logic set the tab visibility, so that every thing on the page is then faded in together.

This can't be done Server Side...after Sever Side code is executed, the output is sent to the browser into the web page....that's when the JavaScript and Ajax take over. The Server Side code has nothing to do with the web page until a postback occurs.....

Another option would be to add a call in the fade in logic to call tab init functions so the tab is made visible as soon as the page finishes fading in.

I'm not sure how to do this since the Ajax animation is generated for me by the Ajax.NET tool kit and is not written into the browser (it's stored in some resource somewhere on the server...like an external JS file)

[acoder]

Why not use CSS to set the default visibility status?

[Frinavale]

Why not use CSS to set the default visibility status?

That's what I do.
Originally every thing's set to visible="hidden".
Then the JavaScript runs and makes the "selected tab" visible="visible" and then the animation runs...which sets the whole page (contents) to visible="hidden" and then fades it in to visible="visible".

The problem is that the JavaScript is executed before the Ajax.
I need it to execute after or during the Ajax.

[acoder]

If you have no control over the Ajax code, how about you check a certain element's or elements' visibility every second or less using setInterval? Once that element is visible, that means its now ok to display the div.