Question

I have a perfectly working web page with using jQuery UI tabs on almost all browsers – it is not working on IE7.

All my code is rendered by asp file – data is included, JavaScript and CSS are included, and there is the code that is creating the tabs too.

My first problem was, that in IE7 I got the following message in alert box:

Internet Explorer cannot open the Internet site.

After several hours I have found a way to fix this using defer Attribute of the script tag.

Now, I get the following error:

Object doesn’t support property or method ‘tabs’

and when I check for jQuery and jQuery UI versions (to see if they are loded) I get result only for jQuery.

I suppose, that jQuery UI is not loaded or the script that create the tabs is executed before the library is loaded although it should be executed on document ready.

Has anyone face the same problem?

Answer 1

The script tag loading jQuery UI relies on the JavaScript in the script tag for jQuery having been run before the jQuery UI script is loaded. If you use the defer attribute on your jQuery script tag, you introduce a race condition and could end up with jQuery UI loading first and failing (not adding tabs to jQuery.fn). So it doesn’t matter that your code using the tabs function is in a ready callback.

You shouldn’t need to use defer at all, so instead of trying to fix this, I’d recommend not using defer and posting a question about your original problem, as adding defer should not be the solution to it.

If you want to keep using defer, though, remove your jQuery UI script tag and instead put this at the bottom of your page, just before the closing </body> tag:

<script>
(function() {
    var waitingForUI = false;

    loadScripts();

    function loadScripts() {
        if (window.jQuery && window.jQuery.fn.tabs) {
            // Both jQuery and jQuery UI are loaded.
            // ==> your code using `tabs` here <==
        }
        else {
            if (window.jQuery) {
                // jQuery is loaded but not jQuery UI, go get it
                // unless we've already started loading it
                if (!waitingForUI) {
                    waitingForUI = true;
                    jQuery.getScript("/your/path/to/jquery/ui");
                }
            }
            setTimeout(loadScripts, 10);
        }
    }
})();
</script>
</body>

That will wait for jQuery to be loaded, and then load the jQuery UI script, then trigger your code.

Alternately, of course, just create your own script file containing both jQuery and jQuery UI followed by your code using tabs, and load that one file.