jQuery ordinabile non è una funzione

Question

Sto tentando di creare un elenco ordinato di elementi selezionabili e trascinabili con il plug-in Sortable jQuery UI versione 1.8.16. Tuttavia, continuo a ricevere l'errore $("#ol-id ol").sortable is not a function, con "id-id" che è l'id della lista. Il mio codice è il seguente:

//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... 
     } 
    }) 
} 

Stranamente, l'errore si presenta in Firebug come sulla linea con update: function(){.

Ho verificato che questa funzione viene chiamata dopo aver caricato sia la pagina che la libreria dell'interfaccia utente jQuery. Sto includendo jquery-1.6.2.min.js e jquery-ui-1.8.16.custom.min.js nell'intestazione. Inoltre, ho verificato che tutti i nomi ID sono corretti e corrispondono alle loro controparti HTML.

Quindi, se non si tratta di elementi mancanti relativi alle risorse, qual è la causa del problema?

EDIT: ecco la mia intestazione HTML:

<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 e jQuery devono essere caricati in un certo ordine:

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

Assicurarsi siete tra cui jQuery UI dopo jQuery.

Answer 2

Quindi non sono sicuro se questo aiuterà qualcuno, ma mi sono imbattuto in una situazione simile, che sono stato in grado di risolvere. Quindi questo sembra accadere quando

a) l'ordine di caricamento di jQuery-ui e jQuery è errato.

b) jQuery viene incluso più volte o sono incluse versioni diverse.

L'opzione "b" mi è successo perché stavo usando un modello di bootstrap, dove jQuery è incluso nella parte inferiore del documento, che è ovviamente una best practice, mentre il codice che stavo testando ha aggiunto una versione diversa di jQuery in cima alla pagina.

Vedo che il codice su questa domanda sembra che contenga un numero di duplicati, quindi suggerirei di pulirlo all'inizio.

Answer 3

Il mio problema era che stavo usando jQuery (...). Ordinabile() al posto di $ (...). Ordinabile()

Non certo perché ciò che contava, ma cambiando a $ risolto.

Answer 4

Ho avuto lo stesso problema ed era perché un altro file js è stato incluso nella parte inferiore della pagina che aveva alcune funzioni jQuery. Quando ho spostato questo nella parte superiore della pagina, sopra il mio include di jQuery e jQuery-UI tutto funziona alla grande.

Answer 5

ho trovato una nuova soluzione, basta modificare acf.file php al numero di riga 551

vecchia

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

nuovo

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

Ho appena aggiunto jquery-ui-sortable in ordine di spero di aiuto qualcuno grazie.