RailsとAjaxでレコードの配列を更新する

Question

複数のアイテムのリストがあるとします。

<ul data-id="2"> 
    <li> 
     <span>Item name</span> 
    </li> 
    <li> 
     <span>Item name</span> 
    </li> 
    <li> 
     <span>Item name</span> 
    </li> 
</ul> 

各項目は、項目が現在所属するリストのIDと、リスト内のアイテムの現在の位置ですorder属性であるlist_id属性を持っています。

特定のイベントが発生した場合、このリスト内の各アイテムを見つけて、list_idとorderのパラメータを更新する必要があります。

は、ここで私はどこでもカードの配列を出力し、これまで

$('li').sortable({ 
    update: function(event, ui) { 
     if (this === ui.item.parent()[0]) { 

      var cards = ui.item.parent('ul li').map(function() { 
       return { 
        list_id: $(this).closest('ul').data('id'), 
        order: $(this).index(), 
       } 
      }).get(); 

      $.ajax({ 
       url: "/cards/", 
       type: "PATCH", 
       dataType: "json", 
       data: { cards: cards }, 
       success: function(resp){ 
        console.log('Yay'); 
       } 
      }); 
     } 
    } 
}); 

私がいる悩みを持っているものです。私がconsole.log(cards);を実行すると、ちょうど私が理解できるデータなしで[]が得られます。私のレールコンソールはparams配列も出力していないようです。

目標は、リスト内のすべてのカードを自分のレールコントローラに送信し、それらをすべて同時に更新することです。

Answer 1

ulタグの代わりにliタグをソート可能に選択する理由は何ですか？

あなたが代わりにliのulタグを選択する必要があり

ソート可能にするためにDOM要素のグループを有効にします。

$('ul').sortable({ 
 
    update: function(event, ui) { 
 
     var list_id = $(this).data('id'); 
 
     var cards = $.map($(this).find('li'), function(el) { 
 
      return { list_id: list_id, 
 
         order: $(el).index() }; 
 
     }); 
 
     $.ajax({ 
 
      url: "/cards/", 
 
      type: "PATCH", 
 
      dataType: "json", 
 
      data: { cards: cards }, 
 
      success: function(resp){ 
 
       console.log('Yay'); 
 
      } 
 
     }); 
 
    } 
 
});

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 60%; 
 
} 
 
li { 
 
    margin: 0 3px 3px 3px; 
 
    padding: 0.4em; 
 
    padding-left: 1.5em; 
 
    font-size: 1.4em; 
 
    height: 18px; 
 
    border: 1px solid #c5c5c5; 
 
    background: #f6f6f6; 
 
    font-weight: normal; 
 
    color: #454545; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<ul data-id="2"> 
 
    <li> 
 
     <span>Item name</span> 
 
    </li> 
 
    <li> 
 
     <span>Item name 2</span> 
 
    </li> 
 
    <li> 
 
     <span>Item name 3</span> 
 
    </li> 
 
</ul>