Question

When I run my page sometimes the getElementById call finds the element and sometimes not. Definitely a timing issue. This only happens in IE9 and not in IE compatbility mode (7 or 8), nor does it happen in any other browsers (Firefox, Opera, Safari, and Chrome). Can’t create a fiddle because when I strip the page down to fit in a fiddle and sandbox it, the problem disappears. My getElementById javascript call is in the head section which, I understand, won’t be able to find the elements at that point unless you wait for them with either DOM readiness or window onload. I tried wrapping my getElementById javascript in jquery’s $(document).ready function, but that didn’t have any effect. I also tried wrapping it in jquery’s $(window).load function which I thought must work, but that had no effect either.

If I try waiting for the element with this window.onload solution (addLoadEvent) ti works and finds it. So why not jquery’s document.ready or window.load APIs?

I did try moving the script down in the page after the html for the tag it references, but that didn’t have any effect as the problem still occurred and it couldn’t find the element. I also moved it to the end, but no effect either. I am confused by this particular result as I thought that moving the javascript to the end would make those elements available (or so I read), but it would appear that is not the case. Anyone know why this is?

I did mention earlier that it’s only happening in IE9. Futhermore, only on the initial page load does the problem typically occur and any page refreshes make the problem go away. Likely due to caching I’m guessing.

I’m using asp.net 4.0, not that it matters (or so I think). The javascript is in the .aspx page above the html section in section and not in an external js file. I did try moving it to an external file just to be thorough, but that didn’t have any effect as expected.

So, in summary,

1. why are the jquery APIs not working? and
2. why didn’t moving the javascript down the page (or to the end) work either?

Snippet of the Javascript inside head:

//        addLoadEvent(setupstuff);

//        function addLoadEvent(func)
//        {
//            var oldonload = window.onload;

//            if (typeof window.onload != 'function')
//            {
//                window.onload = func;
//            }
//            else
//            {
//                window.onload = function ()
//                {
//                    if (oldonload)
//                    {
//                        oldonload();
//                    }
//                    func();
//                };
//            }
//        }

    var txtLocation = '<%=txtLocation.ClientID%>';

    // JQuery plugin - JQueryLive (waits for element)
    $('#' + txtLocation).livequery(function ()
    {
        setupstuff();
    });


    //$(document).ready(function () //didn't work
    //$(window).load(function() //didn't work
    function setupstuff()
    {
        // search text watermark toggling
        var hasWatermark = $('#' + txtLocation).hasClass('txtLocationWatermark');

        var searchText;
        if (document.getElementById(txtLocation))
        {
            searchText = document.getElementById(txtLocation).value;
        }
        else
        {
            alert('Element ' + txtLocation + ' not found in DOM!');
            return;
        }
        //var searchText = $('#' + txtLocation).val(); //doesn't work either

Answer 1

Upgrading to latest version of jQuery fixes this as there was a bug in one of the prior versions (jQuery 1.7.?) with the .ready() function which was documented in the release notes.