Utilizzo di Cocoon (Nested Forms) e jQuery ordinabili insieme

Question

Attualmente ho un modulo di input generato utilizzando Cocoon e vorrei rendere i campi di input creati da esso ordinabili (utilizzando ordinabile da jQuery-ui).

Il codice per la forma annidata è:

<%= f.simple_fields_for :checkout_procedures do |procedure| %> 
    <li><%= render 'checkout_procedure_fields', :f => procedure %></li> 
<% end %> 
<div class="links"> 
    <%= link_to_add_association 'add step', f, :checkout_procedures %> 
</div> 

Le parziali che viene reso (_checkout_procedure_fields) è:

<div class="checkout_procedure nested-fields"> 
    <table> 
    <tr> 
     <td><%= f.input :step %></td> 
     <td><%= link_to_remove_association "remove step", f %></td> 
    </tr> 
    </table> 
</div> 

sono in grado di ottenere gli elementi esistenti ordinabili mettendoli dentro un <div> e impostandola ordinabile utilizzando jQuery:

<div class="sortThese"> 
    <%= f.simple_fields_for :checkout_procedures do |procedure| %> 
    <li><%= render 'checkout_procedure_fields', :f => procedure %></li> 
    <% end %> 
</div> 
<div class="links"> 
    <%= link_to_add_association 'add step', f, :checkout_procedures %> 
</div> 

<script> 
$(document).ready(function() { 
    $(".sortThese").sortable(); 
     }); 
</script> 

Tuttavia, ciò interrompe la funzionalità di Cocoon's link_to_add_association e link_to_remove_association. L'utilizzo di <ul> con <li> determina inoltre lo stesso malfunzionamento di Cocoon. Mi sono guardato attorno per hackerare un javascript che spostava ogni form di input dentro e fuori il sortable div (facendo questo sembra che i collegamenti funzionino di nuovo), ma ovviamente questo è inelegante. Se qualcuno ha qualche suggerimento, li apprezzerei davvero!

Answer 1

Si ordina bene, se si rimuove il tag <li>. Provato nel mio progetto, dove ho lo stesso markup, tranne li wrapper di partial, e funziona.

Answer 2

Anche con il tag <li> all'interno del parziale, il trascinamento di una voce di elenco in una nuova posizione sposta solo ciò che si trova all'interno del tag <li> della voce di elenco. Purtroppo, il trascinamento dell'oggetto non sposta il tag genitore nascosto dell'articolo <input> dal momento che bozzolo lo colloca all'esterno del campo nidificato (ad esempio all'esterno dello <li>). Pertanto, anche se l'elenco apparirà ordinato nel browser, le modifiche non si rifletteranno nei parametri ricevuti dal metodo del controller.

Se hai trovato una soluzione per questo, per favore pubblicala.

Grazie