Aktualisieren Sie ein Array von Datensätzen mit Rails und Ajax

Question

Sagen wir, wir haben mehrere Listen von Elementen.

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

Jedes Element hat ein list_id Attribut, das die ID der Liste ist derzeit der Artikel gehört und ein order Attribut, das der aktuelle Position in der Liste des Artikels ist. Wenn ein bestimmtes Ereignis auftritt, möchten wir jedes Element in dieser Liste finden und seine list_id und order Parameter aktualisieren.

Hier ist, was ich bisher

$('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'); 
       } 
      }); 
     } 
    } 
}); 

Ich habe Probleme, die Karten-Array ausgibt überall. Wenn ich rufe console.log(cards); Ich bekomme nur [] ohne Daten, die ich verstehen kann. Meine Rails-Konsole scheint auch keine Parameter-Arrays auszugeben.

Das Ziel ist es, alle Karten in der Liste zu meinem Schienen-Controller zu senden und sie alle gleichzeitig zu aktualisieren.

Answer 1

Die erste Frage, warum Sie wählen li Tag für sortierbar anstelle von ul Tag?

eine Gruppe von DOM-Elementen aktivieren

sortierbar sind Sie ul-Tag statt li wählen sollen.

$('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>