Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery UI Sortable - Error: cannot call methods on sortable prior to initialization; attempted to call method 'disable'

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?

like image 533
Jason Avatar asked Aug 19 '13 01:08

Jason


1 Answers

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);
  }
}
like image 153
Mandeep Jain Avatar answered Sep 23 '22 18:09

Mandeep Jain