12

I have a jQuery UI Sortable list element that is populated dynamically from an Ajax request.

Currently, the workflow goes

  1. User clicks button, list is populated and sorted by specified settings.
  2. User clicks another button,
    1. Existing list <li> elements are erased by jQuery.empty() call
    2. New data values are inserted into new <li> list elements and appended to <ul> list
    3. Sortable list is refreshed via $("#sortable").sortable("refresh");

Given a Sortable list object $("#avail_list").sortable( ... );, I want to have specific list elements' draggable property disabled and opacity set to 0.5 based on existing values in other elements.

To do this, I have the following function:

var disabled = [];
var appendString = ""
if (avail.length > 0) {
  for (var i = 0; i < avail.length; i++) {

    //check if current list element exists in existing value list. True results
    //in grayed out and non-draggable element
    compareMatch = checkMatch(avail[i], compare);

    if (compareMatch)
      disabled.push(list + "open_" + avail[i].id);


    appendString += "<li id = "+ list + "open_" + avail[i].id + 
      " class = 'avail_list_element'><img class = 'logo' src = /static/images/vendor_logo/" + avail[i].icon + " /></li>"
  }

  $("#avail_list").append(appendString);

} 

$("#avail_list").sortable("refresh");   

if (disabled.length > 0)
    disableDraggable(disabled);

function disableDraggable(elements){
  for (var i = 0; i < elements.length; i++) {
    console.log(elements[i])
    $("#" + elements[i]).sortable("disable");
    $("#" + elements[i]).fadeTo("fast", 0.5);
  }
}

However, this results in an error

Error: cannot call methods on sortable prior to initialization; 
attempted to call method 'disable'

Since I called refresh on the sortable list prior to disabling the elements, how can the sortable object not be initialized?

1
  • You call sortable on $("#avail_list") , but your elements array will contain something like $("#listopen_1") although I'm not sure exactly because I don't know what the list variable is set as. Maybe try adding $("#" + elements[i]).sortable("refresh"); before you try to disable?
    – jlewkovich
    Aug 19, 2013 at 2:52

1 Answer 1

11

Calling a .sortable() on any element makes the children of that elements sortable. That does not mean that the children are also initialized with the .sortable(). They are just a part of a sortable container which can be dragged around.

And since you are calling .sortable('disable') on the child elements, it will give an error since the .sortable() was called on the parent and not the children. And the way you are disabling is also incorrect.

Make use of the cancel property to exclude those elements from being sorted. Add this option wherever you are initializing your sortable.

$("#avail_list").sortable({ 
    cancel: ".disable-sort" 
});

And add that class to those elements that you want to disable.

function disableDraggable(elements){
  for (var i = 0; i < elements.length; i++) {
    $("#" + elements[i]).addClass("disable-sort");
    $("#" + elements[i]).fadeTo("fast", 0.5);
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.