Javascript function should be running on every page load

Question

I am looking at an asp.net 2 web application that I am maintaining (but did not write).

Some things that should happen on the page loading do not, but only sometimes, and it seems to be if you are using Firefox 3 inside a VM. JQuery and asp.net Ajax are used.

The important function that should run every time (but does not) is attached by the following Javascript:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){ Sys.Application.add_load(ImportantFunction); });   
$(document).ready(function(){ Otherstuff(); });
$(document).ready(function(){ MoreStuff(); });
//]]>
</script>

But if I use firebug to set a breakpoint inside ImportantFunction(), it is not hit on page load in firefox 3, but it is hit on an ajax update.

In the page there are multiple calls to $(document).ready since they come from different parts of the asp.net code behind it. Yes, they do all execute.

Answer 1

According to this recent blog posting, this is a bug (or at least a misfeature) in FireFox 3. He suggests naming your important function PageLoad to get it to work cross-browser, though I'm not sure if that will work or not.

Answer 2

You're using jQuery to attach a "load" method which then in-turn attaches a load event and I think this is where your problem is.

$(document).ready and Sys.Application.add_load are pretty much the same, or so my understanding goes. I'm not really sure in which order the browser will execute them though.

I'd suggest removing the Sys.Application.add_load wrapper call on ImportantFunction so you're not trying to attach to an event stack that has already fired.

Answer 3

Try this:

<script type="text/javascript">
//<![CDATA[
$(document).ready(ImportantFunction);   
$(document).ready(Otherstuff);
$(document).ready(MoreStuff);
//]]>
</script>

Put the call to Sys.Application.add_load in the body of ImportantFunction, i.e in your .js file:

function importantFunction()
{
   Sys.Application.add_load(ImportantFunction);
}

Edit: I'm not sure if its possible to add multiple functions to be run on $(document).ready event. It might help if you did this instead:

<script type="text/javascript">
    //<![CDATA[
    $(document).ready(init);   
    //]]>
    </script>

And in init you can include calls to all the other functions, i.e:

function init()
{
   importantFunction();
   otherStuff();
   moreStuff();
   //Any other functions to be called upon page load go here
}

It will also make the code easier to read :)

Answer 4

Is there any reason why you can't use the ASP.NET AJAX pageLoad function instead of $(document).ready()?

function pageLoad(sender, args)
{
     ImportantFunction();
     OtherStuff();
     MoreStuff();
}

This is part of the ASP.NET AJAX client page lifecycle and all JavaScript code inside will be executed on every page load, including asynchronous postbacks.