JQuery UI - Not loading first

Question

I have the following script (paraphrased but in the same order):

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#surveyModule .numberScale .number").draggable({
        helper: 'clone',
        revert: 'invalid',
        start: function(e, ui) {
            $(ui.helper).css({'background-position': '0px -28px'});
        }
    });
});
</script>

It is throwing an object reference exception calling the .draggable on the jQuery selector.

Anyone have any ideas?

Further Details: This is in a SharePoint webpage form. I have not had problems using JQuery-UI within SharePoint before.

Are you sure one of your JS files are not renamed? or that the document can locate those JS files based on its source path? (i.e. this doesn't require "/js/...js" instead of just "...js" as a path, correct?) — Brad Christie, Feb 19 '11 at 18:16
Correct, I've verified that the JS files are correctly named and located in the right place. — Matt Shaver, Feb 19 '11 at 18:18
I'll update my answer accordingly, but can you load it up in FireFox with Firebug or Chrome with the inspector and confirm the javascript is being populated in to the document? — Brad Christie, Feb 19 '11 at 18:22
@jrichardlai, no this isn't all the JS but the other JS isn't having an error. Do you believe the amount of JS in the document.ready could impact this? — Matt Shaver, Feb 19 '11 at 18:28

score 0 · Answer 1 · answered Feb 19 '11 at 20:28

0

I see that you are using a custom build of jQuery UI. Are you sure you included the draggable component in the build? To make sure, download a new copy of jQuery UI with all components and see if it throws the same exception.

answered Feb 19 '11 at 20:28

Eli

17,397
4
36
49

I implemented the full jQuery UI and received the same error. The last thing I tried was dynamically loading the JavaScript to put the – Matt Shaver Feb 19 '11 at 21:06

score 0 · Answer 2 · edited May 23 '17 at 10:33

I believe the problem is discussed here:

JavaScript's document.write Inline Script Execution Order

Internet Explorer will also execute them in the order they finish downloading

Ideally, you need to define the jquery and jquery.ui references in the <head> so they are no longer treated as inline scripts are, but sometimes that is not possible.

I built a library for javascript components, activated by scriptlink/scriptblock and features that seems to work well in my scenerios, here is how i load jquery.ui

http://spc3.codeplex.com/SourceControl/changeset/view/57957#1000845

ScriptLink/ScriptBlock seems to put the script loads high enough in the page load order so i dont have problems

JQuery UI - Not loading first

2 Answers2