...

View Full Version : jQuery if check for DOM loaded is false, is event delayed or discarded?



mbannonb
01-21-2011, 09:45 PM
I have a drop down selector that dynamically sets the price.

I use jquery .change to listen for the change in the drop down and update a field accordingly. However, sometimes it doesn't trigger, and I think it is because the DOM isn't fully loaded. Whether or not that is the case, I'm not entirely sure, however, my question still remains.

If the user selects the drop down and $(document).ready(function() won't trigger updatePrice() because the DOM is not fully loaded, will updatePrice() get triggered once the DOM is fully loaded or will it just never do it?



$('#id').change(function(){
$(document).ready(function(){
updatePrice("someId","12.50");
});
});

rnd me
01-21-2011, 11:23 PM
$(document).ready(function(){

$('#id').change(function(){
updatePrice("someId","12.50");
});

});

mbannonb
01-22-2011, 02:31 AM
$(document).ready(function(){

$('#id').change(function(){
updatePrice("someId","12.50");
});

});

Thanks for posting, but I'm not sure what difference that would make.

In any case, the question still remains:

If the user selects the drop down and $(document).ready(function() won't trigger updatePrice() because the DOM is not fully loaded, will updatePrice() get triggered once the DOM is fully loaded or will it just never do it?

venegal
01-22-2011, 06:53 AM
The question does not remain in any case. Once you know the difference between your and rnd me's snippet, it's gone.

What yours does:

Look for an element with an id of 'id' and, if found, add change handler.

Problem: If your script is called before the element exists, the change handler will not be assigned, because there's nothing to assign it to. Stuff that you do inside that anonymous function, like waiting for the DOM to be ready, is irrelevant, since it's never going to be executed.

rnd me's, on the other hand, doesn't have that problem, since the element is definitely there when the handler is being assigned.

mbannonb
01-24-2011, 07:22 PM
Clarification:

The drop down is displayed before the listener is executed.

There is no concern about trying to attach the change handler to the drop down.

updatePrice() refers to styles and a javascript include, so if those aren't loaded, it would be nice if jquery waited for them to be loaded.

Are user interactions discarded if $(document).ready(function(){ } is used and the DOM is not loaded?

Thanks for any input.

venegal
01-24-2011, 07:47 PM
Ok, if you swear that the element exists before you try to attach the handler: Sure it will get triggered. That's the whole point of $(document).ready(), to wait until the DOM is ready, and then do whatever it was told before; not to discard stuff if the DOM isn't ready yet that wouldn't make any sense at all.

So, if it doesn't work, it's something else.

I have to ask, though: How do you even get yourself into that situation where you're sure that $('#id') is there, but have no idea whether the DOM is ready? Are you dropping your code straight into the <body>? That would be pretty bad design that's why we have that DOM ready handler, so we don't have to do that.

rnd me
01-25-2011, 01:31 AM
on almost every page i've seen, it's about impossible to change a drop down value before document.ready() fires. Simply put, the page is pretty unresponsive until the </body> tag hits. heck, user interaction is even choppy until window.onload() if you have a lot of images on the page...

if you need to wait on another dependancy script, you can either put it's script tag (without a defer attrib) above jQuery's, or wait on the other script to arrive.

if you were waiting on the file that defines updatePrice(), and for some reason you needed to use it immediately, not as the result of a change(), you can wait for the needed script to arrive by using setTimeout.

i call this pattern "sentinel":




$(document).ready(function _ready(){
if(!window.updatePrice){return setTimeout(_ready, 33); }
$('#id').change(function(){
updatePrice("someId","12.50");
});

});

mbannonb
01-26-2011, 07:56 PM
Thanks for everyone's feedback!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum