कोकून (नेस्टेड फॉर्म) और jQuery सॉर्ट करने योग्य का उपयोग

Question

मेरे पास वर्तमान में कोकून का उपयोग करके उत्पन्न एक इनपुट फ़ॉर्म है और इसे क्रमबद्ध इनपुट फ़ील्ड बनाना चाहते हैं (jQuery-UI से क्रमबद्ध करने के द्वारा)।

नेस्ट फार्म के लिए कोड है:

<%= 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> 

आंशिक कि प्रदान की गई है (_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> 

मैं उनमें से अंदर डाल कर sortable मौजूदा तत्वों प्राप्त करने में सक्षम हूँ एक <div> और इसे 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> 

लेकिन यह करने से कोकून के link_to_add_association और link_to_remove_association की कार्यक्षमता टूट जाती है। <ul> का उपयोग <li> के साथ ही एक ही कोकून खराब होने के परिणामस्वरूप होता है। मैं कुछ जावास्क्रिप्ट को हैक करने के लिए चारों ओर देख रहा हूं जो प्रत्येक इनपुट फॉर्म को क्रमबद्ध div में और बाहर ले जाता है (ऐसा करने से लिंक फिर से काम करने लगते हैं), लेकिन जाहिर है यह यह सुरुचिपूर्ण है। अगर किसी के पास कोई सुझाव है, तो मैं वास्तव में उनकी सराहना करता हूं!

Answer 1

यदि आप <li> टैग हटाते हैं तो यह अच्छी तरह से दिखता है। मेरी परियोजना में कोशिश की, जहां मेरे पास एक ही मार्कअप है, li आंशिक के आवरण को छोड़कर, और यह काम करता है।

Answer 2

अपने आंशिक अंदर <li> टैग के साथ भी, एक सूची आइटम को एक नई स्थिति में खींचकर केवल सूची आइटम के <li> टैग के अंदर क्या होता है। दुर्भाग्यवश, आइटम खींचने से आइटम के छिपे हुए माता-पिता <input> टैग को स्थानांतरित नहीं किया जाएगा क्योंकि कोकून इसे आपके नेस्टेड-फ़ील्ड के बाहर रखता है (यानी आपके <li> के बाहर)। इसलिए, हालांकि आपकी सूची ब्राउज़र में क्रमबद्ध दिखाई देगी, लेकिन परिवर्तन आपके नियंत्रक विधि द्वारा प्राप्त पैराम्स में दिखाई नहीं देंगे।

यदि आपको इसके लिए कोई समाधान मिला है, तो कृपया इसे पोस्ट करें।

धन्यवाद