CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-sortable
Dónal
Dónal

Reputation: 187499

sorting list items with JQuery

I'm trying to use the JQuery UI Sortable plugin to allow a user to change the order or list items by dragging them with the mouse. The page in question is available here.

The relevant JQuery code is in webapp.js

$("#preferences_list").sortable({
            placeholder: "placeholder",
            forcePlaceholderSize: true,
            update: function(event, ui) {
                var order = $(this).sortable("serialize", {key:'list'});
                $.post("/mypreferences/reorder/", order);
            }
        });
$("#preferences_list").disableSelection();

This should enable the user to re-order the categories by using the arrow image to drag them up or down (and when a category is dropped in a new position an AJAX request is fired).

The code above looks the same as that shown on the sortable plugin's demo page, but for some reason it's not working at all

Upvotes: 2

Views: 2777

Answers (3)

gakhov
gakhov

Reputation: 1971

Look with Firebug on the page you created: there are 4 errors. For example:

jquery-ui-sortable-1.js:17 - Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'widget'

Are you sure you have jquery.ui.widget.js?

Upvotes: 0

grammar31
grammar31

Reputation: 2060

There may be other issues, but first change:

<script type="text/javascript" src="myPreferences_files/jquery-ui-sortable-1.js"></script> 
<script type="text/javascript" src="myPreferences_files/jquery-ui-widget-1.js"></script>

to:

<script type="text/javascript" src="myPreferences_files/jquery-ui-widget-1.js"></script> 
<script type="text/javascript" src="myPreferences_files/jquery-ui-sortable-1.js"></script>

Upvotes: 4

gilly3
gilly3

Reputation: 91467

You've got sortable.js loading before widget.js. Sortable depends on widget, so widget.js must be included first. Just reorder your script tags.

Upvotes: 4

Related Questions