2016-02-01 22 views
7

ColdFusionコンポーネントからajax経由でアクセスしているデータがあります。私はソート可能なjQuery UI形式でデータを表示しようとしていますが、ソート可能な機能は動作していません。ここで私が使用しようとしているコードです。jQueryとAjaxでソート可能

$(document).ready(function() { 
    // get assets to display 
    var showid = <cfoutput>'#SESSION.Show#'</cfoutput>; 
    var html = ""; 

    function assetsPost() { 
     $.ajax({ 
      cache: false, 
      type:'POST', 
      url:'cfc/cfc_COLF.cfc?method=qCOLF&returnformat=json', 
      dataType: "json", 
      data: { 
       show_id: showid 
      }, 
      success:function(data) { 
       if(data && data.length) { // DO SOMETHING 

         html += "<ul id='sortable'>"; 

       jQuery.each(data, function(i, val) {  
        var linkID   = data[i].linkID; 
        var description = data[i].description; 
        var discussion  = data[i].discussion; 
        var linkurl  = data[i].linkurl; 
        var index   = i; 
         html += "<li id=' " + index + " ' class='ui-state-default'>";     
         html += "<h5 style='color:#000; text-align:left;'>"; 
         html += "<a class='process-asset' id=' " + linkID + " ' name='done'><img src='images/icon_done.png'></a>"; 
         html += "<a href='" + linkurl + "' target='_blank'> " + description + "</a>"; 
         html += "<a class='process-asset' id=' " + linkID + " ' name='remove' style='color:#000; float:right;'><img src='images/icon_remove.png'></a>"; 
         html += "</h5>"; 
         html += "<p style='color:#000; margin:5px 15px 5px 15px; text-align:left;'> " + discussion + "</p>"; 
         html += "</li>"; 
       }); 
         html += "</ul>"; 

       $('#linkoutput').html(html); 
       //alert(html); 
       } else { // DO SOMETHING 
       } 
      } 
     }); 
    } 
    assetsPost(); 
}); 

$(document).ready(function() { 
     //sort order 
     $(function() { 
     $("#sortable").sortable({ 
      opacity: 0.6, 
      update: function(event, ui) { 
      var Order = $("#sortable").sortable('toArray').toString(); 
      $('#order').val(Order); 
      //alert(Order); 
      } 
     }); 
      $("#sortable").disableSelection(); 
    }); 
    // set up sort order for form submission 
    $("#mForm").submit(function() { 
     $("#order").val($("#sortable").sortable('toArray')) 
    }); 
}); 

すべてのデータとjQueryはうまく読み込んでいます。実際には、次のコードを追加してこのリストを整理するとうまくいきます。ここで

を更新し

<ul id="sortable"> 
    <li id="1" class="ui-state-default "> 
     <h5>1</h5> 
    </li> 
    <li id="2" class="ui-state-default "> 
     <h5>2</h5> 
    </li> 
    <li id="3" class="ui-state-default "> 
     <h5>3</h5> 
    </li> 
</ul> 

HTMLは、私はそれが

<form enctype="multipart/form-data" 
    ACTION="page.cfm?#cgi.QUERY_STRING#" 
    id="mForm" 
    method="post"> 
    <fieldset> 
    <div id="linkoutput"></div> 

    <label>Order:</label> <input type="text" id="order" /> 
    <div class="mfInfo"></div> 
    </div> 

    </fieldset> 
</form> 

が動作していない使用していますHTMLだから、コードのAjaxのセクションでの紛争のいくつかの並べ替えが存在しなければなりませんさ。アドバイスをいただければ幸いです。

+0

あなたは質問をしています。 *あなたのために働いていないものは何ですか?エラーメッセージが表示されますか? –

+0

申し訳ありませんが、私は非常に明確ではありませんでした。ソート可能な機能が動作していません。私は元の投稿を編集しました。 –

+0

ソリューションのテストを行うための応答データのサンプルが必要です。 – Twisty

答えて

2

サンプルコードの一部が欠落しているか間違っているようです。これは、作業コードを表示するためにAJAXを模倣するjsfiddleメソッドを使用している

$(document).ready(function() { 
    // get assets to display 
    //var showid = <cfoutput> '#SESSION.Show#' < /cfoutput>; 
    var showid = 10000000001; 
    var html = ""; 

    function assetsPost() { 
    $.ajax({ 
     cache: false, 
     type: 'POST', 
     url: '/echo/json/', 
     dataType: "json", 
     data: { 
     show_id: showid, 
     json: JSON.stringify([{ 
      'linkID': 4, 
      'description': "stuff", 
      'discussion': "thread", 
      'linkurl': "http://www.example.com/" 
     }]) 
     }, 
     success: function(data) { 
     console.log(data); 
     if (data && data.length) { // DO SOMETHING 

      //html += "<ul id='sortable'>"; 
      var html = ""; 

      jQuery.each(data, function(i, val) { 
      var linkID = data[i].linkID; 
      var description = data[i].description; 
      var discussion = data[i].discussion; 
      var linkurl = data[i].linkurl; 
      var index = $("#sortable li").length + 1; 
      html += "<li id='" + index + "' class='ui-state-default'>"; 
      html += "<h5 style='color:#000; text-align:left;'>"; 
      html += "<a class='process-asset' id=' " + linkID + " ' name='done'><img src='images/icon_done.png'></a>"; 
      html += "<a href='" + linkurl + "' target='_blank'> " + description + "</a>"; 
      html += "<a class='process-asset' id=' " + linkID + " ' name='remove' style='color:#000; float:right;'><img src='images/icon_remove.png'></a>"; 
      html += "</h5>"; 
      html += "<p style='color:#000; margin:5px 15px 5px 15px; text-align:left;'> " + discussion + "</p>"; 
      html += "</li>"; 
      }); 
      //html += "</ul>"; 
      console.log(html); 

      $('#sortable').append(html); 
      $("#order").val($("#sortable").sortable('toArray')); 
      //alert(html); 
     } else { // DO SOMETHING 
     } 
     } 
    }); 
    } 
    assetsPost(); 

    $("#sortable").sortable({ 
    opacity: 0.6, 
    update: function(event, ui) { 
     var Order = $("#sortable").sortable('toArray').toString(); 
     $('#order').val(Order); 
     //alert(Order); 
    } 
    }); 
    $("#sortable").disableSelection(); 
    // set up sort order for form submission 
    $("#mForm").submit(function() { 
    $("#order").val($("#sortable").sortable('toArray')); 
    }); 
}); 

jQueryのをhttps://jsfiddle.net/Twisty/hfdg5y20/

HTML

<div class='sort-wrap'> 
    <ul id="sortable"> 
    <li id="1" class="ui-state-default "> 
     <h5>1</h5> 
    </li> 
    <li id="2" class="ui-state-default "> 
     <h5>2</h5> 
    </li> 
    <li id="3" class="ui-state-default "> 
     <h5>3</h5> 
    </li> 
    </ul> 
</div> 
<label>Order:</label> <input type="text" id="order" /> 

:私はそれを検討し、次の例を作成しました。あなたのものは少し異なり、返されるデータによって異なる結果になることがあります。

新しい項目がリストの末尾に追加されます。あなたのHTMLには$('#linkoutput')が見つかりませんでしたので、$('#sortable')に追加しました。他のアイテムと同様に、リスト内の新しいアイテムを取得して並べ替えることができます。ソート可能なアイテムがあなたのためにアレンジするのではなく、ユーザーが自由に並べ替えることができることを理解してください。もっと見る:https://jqueryui.com/sortable/

+0

一意ではない複数の 'id'属性を避けることもできます。あなたがそれらを試して気にする場合、いくつかの他のアップデートがあります:https://jsfiddle.net/Twisty/hfdg5y20/9/ – Twisty

+0

これは本当に良いものTwistyです。私はあなたの変更を実装しており、ソート可能な関数は今動作します!もう1つの問題と私たちは行くべきである。フォームフィールド内の順序はすべて1です。言い換えれば、私の注文はこの "1,1,1,1,1"のように見えます。私は初めから追加して以来、htmlで投稿を更新します。あなたの考えをここにしたいですか? –

+0

注:後で見るときに他の訪問者が混乱しないように、HTMLにlinkoutput idを残しました。私のために働いたのは、 "linkoutput" idを "sortable" –

2

リストをソート可能にすると、リストとその要素が変更され、後でコールバックが返された後にリストが置き換えられます。新しいリストを挿入したの後に$("#sortable").sortable({ ...コードを成功のコールバックに移動する必要があります。

+0

$( "#sortable")を置くことをお勧めしますか?sortable({... $( '#linkoutput')の後} html(html);?私はこれを試してもまだ動作しません。 –

+0

あなたの最新のコードで更新してください。 "sortable" idを持つ項目がないことを確認してください。 –

+0

私はまだこれをキャッチしていません。 –

関連する問題