Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts

    if check for DOM loaded is false, is event delayed or discarded?

    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?

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

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,333
    Thanks
    11
    Thanked 587 Times in 568 Posts
    Code:
     $(document).ready(function(){
    
      $('#id').change(function(){
          updatePrice("someId","12.50");
      });
    
    });
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    Code:
     $(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?

  • #4
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • #5
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,333
    Thanks
    11
    Thanked 587 Times in 568 Posts
    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":

    Code:
     $(document).ready(function _ready(){
      if(!window.updatePrice){return setTimeout(_ready, 33); }
      $('#id').change(function(){
          updatePrice("someId","12.50");
      });
    
    });
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #8
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for everyone's feedback!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •