0

I'm using JQuery to setup some comboboxes and I've wrapped the .combobox calls in the .ready function to make sure my controls are available, but on every 10th or so time loading the page, the elements used for the comboboxes are not in the DOM. What is going on and how is this possible?

My external javascript

$(document).ready(function()
{
    if (document.getElementById('selMinPrice'))
    {
        console.log('selMinPrice exists in the DOM.');
        console.log('selMinPrice value=' + document.getElementById('selMinPrice').value);
    }
    else
    {
        console.log('selMinPrice DOES NOT EXIST in the DOM!!!!!!!!!!!!!!!!!!!!!!!!!!');
    }
    // setup min & max price comboboxes
    $(".selMinPrice").combobox();
    $(".selMaxPrice").combobox();
    $("#toggle").click(function ()
    {
        $(".selMinPrice").toggle();
        $(".selMaxPrice").toggle();
    });
});

I've only noticed the problem in IE for some reason, but that's not to say it doesn't exist in the other browsers.

Thoughts?

johntrepreneur
  • 4,514
  • 6
  • 39
  • 52
  • 1
    Possibly related: http://stackoverflow.com/questions/1561606/document-ready-doesnt-work-in-ie – rlemon Sep 17 '12 at 16:34
  • i had the same issue, so what i did is i used `load` instead of `ready` and it solved my problems – Linas Sep 17 '12 at 16:35
  • 3
    is `selMinPrice` a class or an id? You're using both conventions. Also, why are you using getElementById when you're using jQuery? – Shmiddty Sep 17 '12 at 16:35
  • 1
    Comment out or remove the console.log statements. IE chokes on them. – j08691 Sep 17 '12 at 16:37
  • @Shmiddty - selMinPrice is both: – johntrepreneur Sep 17 '12 at 16:39
  • 1
    @j08691 - IE only chokes if console is not showing, so I attached it to the IE window upon startup so it's fine then. Log statements are only for debug and problem still occurs without them. – johntrepreneur Sep 17 '12 at 16:41
  • Do you get the same result when you move your – It's actually me Sep 17 '12 at 16:45
  • @Kosalanuwan - hard to say since it's intermittent, but no I didn't get it and tried it 20 times or so. While that *may* be a workaround, it's not optimal and I still want to know why JQuery isn't working as expected. Thanks though :-) – johntrepreneur Sep 17 '12 at 17:01
  • When you move the javascript to bottom of the you don't have to check document.ready, consequently, you don't have a problem as such anymore :-) – It's actually me Sep 17 '12 at 17:11
  • 1
    What version of jQuery are you using? There was a bug related to .ready() firing too early in IE, it was fixed in 1.8.1 – Kevin B Sep 17 '12 at 17:12
  • @Kevin B - '/1.8.0/jquery.min.js' and '/jquery-ui-1.8.23.custom.min.js'. – johntrepreneur Sep 17 '12 at 17:16
  • 1
    upgrade to jQuery 1.8.1 and see if the problem is still there. http://blog.jquery.com/2012/08/30/jquery-1-8-1-released/ – Kevin B Sep 17 '12 at 17:18

1 Answers1

1

This is a bug that was introduced in jQuery 1.8.0, and fixed in 1.8.1

Ticket: http://bugs.jquery.com/ticket/12282

It was mentioned in the release notes for jQuery 1.8.1 at http://blog.jquery.com/2012/08/30/jquery-1-8-1-released/

Upgrading from 1.8.0 to 1.8.1 should ensure that .ready isn't being called too early in IE.

Kevin B
  • 94,570
  • 16
  • 163
  • 180