469,964 Members | 1,684 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,964 developers. It's quick & easy.

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

Frinavale
9,735 Expert Mod 8TB
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:
Expand|Select|Wrap|Line Numbers
  1.  
  2.                     if(window.attachEvent)
  3.                     {
  4.                       window.attachEvent("onload" ,"InitializeTabControl");
  5.                     }
  6.                    else{
  7.                         window.addEventListener("load","InitializeTabControl", false);
  8.                     }
  9.  
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:
Expand|Select|Wrap|Line Numbers
  1.  
  2.                     if(document.attachEvent)
  3.                     {
  4.                       document.attachEvent("onload" ,"InitializeTabControl");
  5.                     }
  6.                    else{
  7.                         document.addEventListener("load","InitializeTabControl", false);
  8.                     }
  9.  
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
Oct 17 '07 #1
5 8663
pronerd
392 Expert 256MB
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:
Expand|Select|Wrap|Line Numbers
  1.  
  2.                     if(document.attachEvent)
  3.                     {
  4.                       document.attachEvent("onload" ,"InitializeTabControl");
  5.                     }
  6.                    else{
  7.                         document.addEventListener("load","InitializeTabControl", false);
  8.                     }
  9.  
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.
Oct 17 '07 #2
Frinavale
9,735 Expert Mod 8TB
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)
Oct 18 '07 #3
acoder
16,027 Expert Mod 8TB
Why not use CSS to set the default visibility status?
Oct 18 '07 #4
Frinavale
9,735 Expert Mod 8TB
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.
Oct 18 '07 #5
acoder
16,027 Expert Mod 8TB
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.
Oct 18 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by amit | last post: by
5 posts views Thread by =?Utf-8?B?TWF0Y29u?= | last post: by
1 post views Thread by rainxy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.