jQuery UI not initializing

Question

I am using the jQuery UI components but having some problems. If I try and do something simple like $("#mydiv").draggable() I get an error message "Microsoft JScript runtime error: Object doesn't support this property or method".

The jQuery UI seems to be loaded because I put a alert() in the js file it contains (see code) and the alert is displayed. I am really stuck on this.

;jQuery.ui || (function($) {

    var _remove = $.fn.remove,
    isFF2 = $.browser.mozilla && (parseFloat($.browser.version) < 1.9);

    alert("jquery.ui.loading"); // 

    //Helper functions and ui object
    $.ui = {
        version: "1.7.2",

Answer 1

Where is your code located relative to the jQuery UI load? Both jQuery and jQuery UI need to be loaded (in that order) before you attempt to use them.

<script type="text/javascript" src=".../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src=".../jquery-ui-1.7.2.min.js"></script>
<script type="text/javascript">
    ... your code goes here
</script>

You need to be especially careful if you embed javascript in user controls or server side includes. If you load your javascript at the end of the page and have controls or includes that are referenced above, you're liable to get javascript errors because even though the file is included, it hasn't been parsed before you may have referenced the functions in the included files.

Answer 2

Are you using some other javascript libraries at the same time? It might be other libraries also using the $ shortcut and it gets your $ not referencing jquery anymore.

Answer 3

Do you have Draggable baked into your custom jquery-ui.js file?