2011-10-31 9 views
6

Sortable jQuery UIプラグインバージョン1.8.16を使用して、アイテムの順序付きリストをクリックアンドドラッグ可能にしようとしています。しかし、私は$("#ol-id ol").sortable is not a functionというエラーを受け取り、 'ol-id'はリストのIDです。次のように私のコードは次のとおりです。jQuery sortableが関数ではありません

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

奇妙なことに、エラーがupdate: function(){とのライン上にあるものとしてFirebugのに表示されます。

この関数は、ページがロードされ、jQuery UIライブラリがロードされた後に呼び出されることを確認しました。私はヘッダにjquery-1.6.2.min.jsとjquery-ui-1.8.16.custom.min.jsの両方を含めています。さらに、私はすべてのidの名前が正しいことを確認し、HTMLの対応するものと一致します。

このようなリソース関連の情報が欠けていない場合は、何が問題の原因ですか?

編集:ここでは私の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

jQueryの後にjQuery UIが含まれていますか? –

+0

'$(this).sortable({disabled:true});'試しに 'update'の中で試してください。 – yoda

+0

jQueryの後にjQuery UIが読み込まれていることを確認しましたが、問題はまだ残ります。また、適切なIDの代わりに 'this'を使用しても、エラーは削除されません。しかし、提案をありがとう! – CodeRedd

答えて

12

のjQuery UIとjQueryは、特定の順序でロードする必要があります。

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

あなたはjQueryの後にjQueryのUIを含めていることを確認します。

+0

私はJQueryのUIがJQueryの後に読み込まれることを確認しました。残念ながら問題はまだ残っています。 – CodeRedd

+0

あなたのHTML「」を投稿できますか? – Blender

+0

これはありがとう!できます! – CaffeineShots

2

これが誰にも役立つかどうかはわかりませんが、同様の状況に遭遇しましたが、解決できました。だから、どちらかの場合に発生するように思われる

a)jQuery-uiとjQueryをロードする順序が間違っています。

b)jQueryが複数回含まれているか、異なるバージョンが含まれています。

オプション「b」は私がブートストラップテンプレートを使用していたために起きました。ここでjQueryがドキュメントの最下部に含まれていますが、テストしていたコードでは別のバージョンのjQueryページの上部に表示されます。

私は、この質問のコードに重複が含まれているように見えるので、最初にそれを掃除することをお勧めします。

0

私の問題私は、なぜその重要だっ

わからないソート可能ソート可能なjQueryの(...)。()の代わりに、$(...を)。()を使用して、それだけにはそれを変更しました$を修正しました。

3

私は同じ問題を抱えていました。これは、別のjsファイルがいくつかのjQuery関数を持つページの最後に含まれていたためです。これをページの先頭に移動したとき、jQueryとjQuery-UIのインクルードの上にあるすべてがうまくいきます。

0

私は新しい解決策を見つけました。 ただacfを編集してください。行番号にPHPファイル551

古い

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

新しい

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

私はちょうど私が誰か ありがとう助けを願っ配列 でjquery-ui-sortableを追加しました。

関連する問題