CODEWITHSUNDEEP
javascriptjquery-uisortingjquery-ui-sortable
CodeRedd
CodeRedd

Reputation: 303

jQuery sortable is not a function

I am trying to make an ordered list of items click-and-draggable with the Sortable jQuery UI plugin version 1.8.16. However, I keep getting the error that $("#ol-id ol").sortable is not a function, with 'ol-id' being the id of the list. 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, the error shows up in Firebug as being on the line with update: function(){.

I have verified that this function is called after both the page is loaded and the jQuery UI library is loaded. I am including both jquery-1.6.2.min.js and jquery-ui-1.8.16.custom.min.js in the header. Moreover, I have verified that all id names are correct and match their HTML counterparts.

So if it's not this missing resource-related stuff, what is causing 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">

Upvotes: 14

Views: 56998

Answers (5)

Suresh Suthar
Suresh Suthar

Reputation: 812

i have found new solution, just edit acf.php file at 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 in array i hope help someone thank you.

Upvotes: -1

Eric Antoine Scuccimarra
Eric Antoine Scuccimarra

Reputation: 395

I had the same issue and it was because another js file was being included at the bottom of the page which had some jQuery functions. When I moved this to the top of the page, above my includes of jQuery and jQuery-UI everything works great.

Upvotes: 6

Brett Pennings
Brett Pennings

Reputation: 1499

My issue was I was using jQuery(...).sortable() instead of $(...).sortable()

Not sure why that mattered, but changing it to $ fixed it.

Upvotes: 0

JackDev
JackDev

Reputation: 5070

So not sure if this will help anyone, but I ran into a similar situation, which I was able to solve. So this seems to happen when either

a) the order of loading jQuery-ui and jQuery is wrong.

b) jQuery is being included more than once, or different versions are being included.

Option "b" happened to me because I was using a bootstrap template, where jQuery is included at the bottom of the document, which is of course a best practice, while the code I was testing added a different version of jQuery at the top of the page.

I see that the code on this question looks like it contains a number of duplicates, so I would suggest cleaning it up as a start.

Upvotes: 12

Blender
Blender

Reputation: 298106

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

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

Make sure you are including jQuery UI after jQuery.

Upvotes: 16

Related Questions