2011-10-31 11 views
6

Próbuję utworzyć uporządkowaną listę elementów, które można przeciągać i klikać za pomocą j ± do sortownego dodatku jQuery UI 1.8.16. Jednak ciągle pojawia się błąd o numerze $("#ol-id ol").sortable is not a function, z "ol-id" będącym identyfikatorem listy. Mój kod wygląda następująco:jQuery sortable nie jest funkcją

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

dziwne, błąd pojawia się w Firebug jako na linii z update: function(){.

Po sprawdzeniu, że ta funkcja jest wywoływana po załadowaniu strony i załadowaniu biblioteki jQuery. Załączam zarówno jquery-1.6.2.min.js i jquery-ui-1.8.16.custom.min.js w nagłówku. Ponadto zweryfikowałem, że wszystkie nazwy id są poprawne i odpowiadają ich odpowiednikom HTML.

Więc jeśli nie jest to brakujące rzeczy związane z zasobami, co jest przyczyną problemu?

EDIT: tu jest mój nagłówek 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

Czy dodałeś jQuery UI po jQuery? –

+0

Wypróbuj '$ (this) .size ({disabled: true});' wewnątrz 'update', tylko by sprawdzić. – yoda

+0

Po sprawdzeniu, że jQuery UI jest ładowany po jQuery, problem nadal występuje. Ponadto użycie "this" zamiast właściwego id nie usuwa błędu. Dzięki za sugestie! – CodeRedd

Odpowiedz

12

jQuery UI jQuery i muszą być ładowane w określonej kolejności:

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

Upewnij się, że w tym jQuery UI po jQuery.

+0

Po sprawdzeniu, że JQuery UI jest ładowany po JQuery. Niestety, problem nadal występuje. – CodeRedd

+0

Czy możesz opublikować swój kod HTML ''? – Blender

+0

dzięki za to! to działa! – CaffeineShots

2

Nie jestem pewien, czy to pomoże nikomu, ale wpadłem w podobną sytuację, którą udało mi się rozwiązać. Wydaje się, że dzieje się tak, gdy zarówno kolejność ładowania jQuery-ui, jak i jQuery jest błędna.

b) jQuery jest dołączany więcej niż jeden raz lub dołączane są różne wersje.

Opcja "b" przydarzyła mi się, ponieważ korzystałem z szablonu ładowania początkowego, w którym jQuery znajduje się u dołu dokumentu, co jest oczywiście najlepszą praktyką, podczas gdy kod, który testowałem, dodał inną wersję jQuery na górze strony.

Widzę, że kod na to pytanie wygląda tak, jakby zawierał pewną liczbę duplikatów, więc sugerowałbym oczyszczenie go jako początku.

0

Mój problem został używałem jQuery (...). Sortable() zamiast $ (...). Sortable()

nie wiem, dlaczego się liczyło, ale zmieniając go do Naprawiono to: $.

3

Miałem ten sam problem i to dlatego, że na dole strony znajdował się inny plik js, który miał pewne funkcje jQuery. Kiedy przeniosłem to na górę strony, powyżej moich obejmuje jQuery i jQuery-UI wszystko działa świetnie.

0

znalazłem nowe rozwiązanie, wystarczy edytować acf.plik php na linii numer 551

starego

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

nowy

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

Właśnie dodałem jquery-ui-sortable w tablicy Mam nadzieję, że komuś pomóc dziękuję.