jQuery UI - Sortable isn't firing?

Question

I'm trying to get the jQuery UI sortable plugin to work and I've created a list that looks like this:

<ul id="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

And I've included the plugin script files:

$(function() {
    $("#sortable").sortable();
    alert('test');
    $("#sortable").disableSelection();
});

So I just tried putting the alert box before .sortable is run and the alertbox is showing. But putting it after .sortable isn't working. Which means that .sortable is failing right?

I've included the scripts and put them in the head of the html document.

<script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.sortable.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.min.js"></script>

Which is correct right? And the function that actually runs .sortable is in a merged js file along with all other js snippets and plugins.

Any reason for including all plugins/dependencies individually? :) — Nick Craver, May 17 '10 at 14:36
Are you using any debugging tool like Firebug or the Chrome developer tools? They should show you what the JS error is. — Bradley Mountford, May 17 '10 at 14:38
Including all plugins/dependencies individually? Not sure what you mean actually.. I do have FireBug installed but I haven't used it for debugging scripts before. I should look into it :) — Kenny Bones, May 17 '10 at 14:39
@Kenny - When you download jquery UI, you get one minified `.js` including the scripts you need, cached by the client once, usually a much easier and faster approach overall: http://jqueryui.com/download — Nick Craver, May 17 '10 at 14:41
Huh, looks like it's failing on the source file (jquery.ui.mouse.min.js) on line 17: "return this.mouseDelayMet" Isn't that strange? Edit: @ Nick, I did download that package and chose sortable only and the same scripts are working for the demo pages included with the zip. Edit2: Aha! Now I dowloaded the full package and looks like I do get a combined version as well :) I'll try this. — Kenny Bones, May 17 '10 at 14:49
@Kenny - Turned that into an answer for future googlers, please accept if that resolved everything, if not comment further! — Nick Craver, May 17 '10 at 15:18

Bradley Mountford · Answer 1 · 2010-05-17T14:49:38.743

1

EDIT: Just checked your dependencies and the internal JQuery UI dependencies are fine but I do not see a reference to JQuery itself...do you have this in your master page or something?

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>

I don't see a problem with the code you gave but your references to the scripts are referencing a subfolder of the folder that your page is on...which is fine if your structure is like that.

Assuming that the js folder is off the root, try referencing relative to the root folder like this:

<script type="text/javascript" src="/js/jquery.ui.widget.min.js"></script>

edited May 17 '10 at 14:49

answered May 17 '10 at 14:42

Bradley Mountford

8,195
4
41
41

I've been trying to say that for the past 10 minutes. (http://meta.stackexchange.com/questions/50187/when-attemting-to-post-answer-i-get-error-101) Hacks! ;) – Lance May 17 '10 at 15:09

score 1 · Accepted Answer · edited May 23 '17 at 12:30

Make sure you're including the correct files in the correct order, a much easier approach would be to download the complete or partial, whatever you need, package from jQuery UI directly here: http://jqueryui.com/download

When you download you get a single minified js file (jquery-ui-1.8.1.custom.min with the current version) instead of individual scripts. If you have the cache headers set correctly, the client caches this once.

Alternatively, include the scripts directly from a CDN, for example here's google's copy:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

Doing this should save you a lot of dependency headaches with the various widgets. Also note that Google hosts the themes as well if you're using a default one, see this question for a list, update the links from 1.7.2 to your version, e.g. 1.8.1 at the time of ths answer.

Thank you again Nick :) I'll put this as the final answer :) — Kenny Bones, May 17 '10 at 18:10

jQuery UI - Sortable isn't firing?

2 Answers2