$ (window) .load (handler) will not fire

Question

I worked with an Asp.NET web application using jQuery to create a nice, flexible, and fast user interface. I created a skeleton

<div id='title'> &nbsp;&nbsp; <h3 class='color-black h3'> Choose the career</h3> <p> &nbsp;</p> <p> &nbsp;</p> <p> &nbsp;</p> </div> <div id='tabbedContent' class='tabbed_content'> <div id='tabs' class='tabs'> <div class='moving_bg'> &nbsp; </div> </div> <div id='contentID' class='slide_content'> <div id='tabsliderID' class='tabslider'> </div> </div> </div> 

Now onStart I will add some dynamically created DOM elements using jQuery. I do this by calling two js functions from the Page_Load (ASP) method, which will do all the magic. Then I will need to run some scripts (tabbedContent and iNettuts). The fact is that these scripts should only be initialized after creating the entire page, including dynamically generated content, so I CANT use $ (document) .ready, and when I use $ (window) .load, sometimes it works, and sometimes doesn't work "t.

I have been looking for it for at least two weeks and still nothing. What should I do? Shouldn't jQuery cope with these issues? and if not .. is there any workaround?

ps. Try it to work in IE7-8, Chrome 10 and FF 6

By the way, as soon as I have achieved this, I will need to make several calls to web services to get data from db. Will it affect behavior? Should I expect more headaches?

Answer 1

After a little research of your suggestions and a very long nightly implementation of Radus, which can be interpreted as flags for each element to be loaded, I began to ask myself: what if ready () has a flag? in this case, I should not worry about the timing of initialization. Well, it turns out that this flag does exist, and it is called holdReady (). Basically, this prevents ready () from being run until the flag is set to false.

"The $ .holdReady () method allows the caller to delay the jQuery event. This advanced function is typically used by dynamic script loaders that want to load additional JavaScript, such as jQuery plugins, before resolving the ready event, even if the DOM can be ready. This method should be called at the beginning of the document, for example, immediately after the jQuery script tag. Calling this method after the finished event is already fired will have no effect. " [1 ]

So I did:

 $.holdReady(true); //using ASPs page_load so it will be triggered everytime //a postback happens -gonna need it for the AJAX requests i'm planning to do. //Then I create the dynamic content $.holdReady(false); //then I let the event fire $(document).ready(function(){ //append the dynamic content iNettuts.init(); tabbedContent.init(); }); 

And what is it, the problem is solved. Hope this helps someone else and thanks to everyone.

[1] http://api.jquery.com/jQuery.holdReady/

Answer 2

Page_Load will work Page_Load fine for your .ready handler. If you need real dynamic DOM events, you should use .live() to bind the event.

 protected void Page_Load(object sender, EventArgs e) { // Define the name and type of the client scripts on the page. String csname1 = "PageStartUpScript"; Type cstype = this.GetType(); // Get a ClientScriptManager reference from the Page class. ClientScriptManager cs = Page.ClientScript; // Check to see if the startup script is already registered. if (!cs.IsStartupScriptRegistered(cstype, csname1)) { StringBuilder cstext1 = new StringBuilder(); cstext1.Append(@"$(document).ready(function() { // add your startup.init functions here });"); cs.RegisterStartupScript(cstype, csname1, cstext1.ToString(), true); } } 

Answer 3

$(document).ready(handler) is the correct form. You can also just do $(handler)

The .load method .load performed on elements and is actually used to load an HTML response from an XHR call into an element.

Answer 4

You really shouldn't call javascript functions from .Net in the Page_Load handler (although, of course, this is possible).

Instead, put all your jQuery functions inside $(document).ready() . It will then be executed after the page loads and is ready to accept dynamic manipulations using JavaScript. This is especially important for compatibility with IE6, as it will suffocate if you try to change the DOM before the page finishes loading.

So, in your case, your jQuery javascript code might look like this:

 $(document).ready(function() { // create your dynamic content here tabbedContent(); iNettuts(); }); 

Answer 5

Try $(document).load .

Answer 6

OR try $(document).ready() instead

Answer 7

Inside your $(document).ready() function, you can create a hash with dynamic objects that should be loaded as keys and their ready states as values. As soon as each dynamic object finishes loading, you set its value to true. You can then interrogate to see when all the values ​​are correct, and execute the code you need when that happens.

$(window).load() sometimes works, and sometimes not, because sometimes it happens that all the elements load fast enough to be ready when your code works.