2011-10-31 23 views
6

Estoy tratando de hacer una lista ordenada de elementos haciendo clic y arrastrándolos con el plugin JQuery UI ordenable versión 1.8.16. Sin embargo, sigo recibiendo el error que $("#ol-id ol").sortable is not a function, con 'ol-id' es el id de la lista. Mi código es el siguiente:jQuery ordenable no es una función

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

Curiosamente, el error aparece en Firebug como en la línea con update: function(){.

He verificado que se llama a esta función después de que se carga la página y se carga la biblioteca jQuery UI. Estoy incluyendo ambos jquery-1.6.2.min.js y jquery-ui-1.8.16.custom.min.js en el encabezado. Además, he verificado que todos los nombres de identificación son correctos y coinciden con sus equivalentes HTML.

Entonces, si no es este material faltante relacionado con los recursos, ¿qué está causando el problema?

EDIT: aquí está mi cabecera 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"> 
+2

¿Ha incluido jQuery UI después de jQuery? –

+0

Pruebe '$ (this) .sortable ({disabled: true});' dentro de 'update', solo para verificar. – yoda

+0

He verificado que jQuery UI se carga después de jQuery y el problema todavía está aquí. Además, el uso de 'this' en lugar de los id adecuados no elimina el error. ¡Gracias por las sugerencias! – CodeRedd

Respuesta

12

jQuery UI y jQuery deben ser cargados en un orden determinado:

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

Asegúrese de que está incluyendo jQuery UI después de jQuery.

+0

He verificado que la interfaz de usuario de JQuery está cargada después de JQuery. Desafortunadamente, el problema aún está presente. – CodeRedd

+0

¿Puedes publicar tu HTML ''? – Blender

+0

gracias por esto! ¡funciona! – CaffeineShots

2

Así que no estoy seguro si esto ayudará a alguien, pero me encontré con una situación similar, que pude resolver. Así que esto parece suceder cuando

a) el orden de carga de jQuery-ui y jQuery es incorrecto.

b) jQuery se incluye más de una vez, o se están incluyendo versiones diferentes.

Me pasó la opción "b" porque estaba usando una plantilla de bootstrap, donde jQuery está incluido en la parte inferior del documento, lo cual es una buena práctica, mientras que el código que estaba probando agregó una versión diferente de jQuery en la parte superior de la página.

Veo que el código de esta pregunta parece contener varios duplicados, por lo que le sugiero que lo limpie como inicio.

0

Mi problema era que estaba usando jQuery (...). Ordenable() en lugar de $ (...). Ordenable()

No sé por qué lo que importaba, pero cambiando a $ lo arregló.

3

Tuve el mismo problema y fue porque se estaba incluyendo otro archivo js en la parte inferior de la página que tenía algunas funciones jQuery. Cuando moví esto a la parte superior de la página, arriba de mi incluye de jQuery y jQuery-UI todo funciona bien.

0

he encontrado la nueva solución, acaba de editar acf.archivo PHP en la línea número 551

edad

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

nueva

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

Acabo de añadir jquery-ui-sortable en orden espero ayudar a alguien gracias.