JQuery sortable is not a function

Question

I am trying to create an ordered list of items that can be clicked and dragged using the Sortable jQuery UI plugin version 1.8.16 parameter. However, I keep getting an error that is $("#ol-id ol").sortable is not a function , with 'ol-id' being the list identifier. My code is as follows:

 //Sorting stuff if($("#li-id li").size()>1) { $("#ol-id ol").sortable({ revert: true, axis: 'y', containment: 'parent', cursor: 'move', handle: 'div.link_div', smooth: false, opacity: 0.7, tolerance: 'pointer', start: function(){ $("#ol-id").removeClass("bottom_dragged"); }, update: function(){ $("#ol-id ol").sortable({disabled : true}); $("#saving_indicator").html("saving...") $("#saving_indicator").show(); //do other stuff... } }) } 

Oddly enough, the error appears in Firebug as being on the line with update: function(){ .

I checked that this function is called after loading the page and loading the jQuery UI library. I include jquery-1.6.2.min.js and jquery-ui-1.8.16.custom.min.js in the header. Moreover, I have confirmed that all identifier names are correct and correspond to their HTML copies.

So, if this is not a missing resource-related substance, what causes the problem?

EDIT: here is my HTML header:

 <link href="/_css/styles.css?mod=1317745564" type="text/css" rel="stylesheet"> <link href="/_javascript/qtip/jquery.qtip.min.css?mod=1315947301" type="text/css" rel="stylesheet"> <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"> <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/le-frog/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" type="text/javascript"> <script src="/_javascript/sets.js?mod=1320080042" type="text/javascript"> //Sorting stuff code is here <script type="text/javascript" src="http://dev.selfcheck.vudat.msu.edu/_javascript/jquery.jsonp.js"> <script type="text/javascript" src="http://dev.selfcheck.vudat.msu.edu/_javascript/jquery.form.js"> <script type="text/javascript" src="http://dev.selfcheck.vudat.msu.edu/_javascript/qtip/jquery.qtip.min.js"> <link href="/_css/ui/ui.core.css?mod=1315947279" type="text/css" rel="stylesheet"> <link href="/_css/ui/ui.theme.css?mod=1315947280" type="text/css" rel="stylesheet"> 

Answer 1

jQuery UI and jQuery must be loaded in a specific order:

 <script src="jquery.js">... <script src="jquery-ui.js">... 

Make sure you include jQuery UI after jQuery.

Answer 2

I had the same problem, and this is due to the fact that at the bottom of the page another js file was included, which had some jQuery functions. When I moved this to the top of the page, everything worked fine on my inclusion of jQuery and jQuery-UI.

Answer 3

So I'm not sure that this will help anyone, but I ran into a similar situation that I could solve. So what happens when ever

a) jQuery-ui and jQuery loading order is incorrect.

b) jQuery is turned on more than once or different versions are turned on.

Option “b” happened to me because I used a bootstrap template where jQuery is included at the bottom of the document, which of course is best practice, and the code I tested added a different version of jQuery at the top of the page.

I see that the code on this subject looks as if it contains several duplicates, so I would suggest clearing it as a start.

Answer 4

My problem was using jQuery (...). sortable () instead of $ (...). sortable ()

Not sure what that meant, but changing it to $ .

Answer 5

I found a new solution, just edit the acf.php file by line number 551

old

  'deps' => array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker', 'underscore', 'select2'), 

new

  'deps' => array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker', 'jquery-ui-sortable', 'underscore', 'select2'), 

i just added jquery-ui-sortable to the array i hope to help someone thanks.