5

現在、Cocoon を使用して生成された入力フォームがあり、それによって作成された入力フィールドをソート可能にしたいと考えています (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>

<div>既存の要素を a 内に配置し、 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>

しかし、これを行うと、Cocoon の機能link_to_add_associationとlink_to_remove_association. <ul>withを使用すると<li>、同じ Cocoon の誤動作が発生します。各入力フォームをソート可能な div の内外に移動する JavaScript をハックしようと探し回っています (これを行うと、リンクが再び機能するように見えます) が、明らかにこれは洗練されていません。誰か提案があれば、本当に感謝します!

4

2 に答える 2

2

<li>タグを削除すると、うまくソートされます。私のプロジェクトで試してみましたが、li部分的なラッパーを除いて同じマークアップがあり、動作します。

于 2012-09-28T15:24:19.487 に答える
1

パーシャル内にタグがある場合でも<li>、リスト項目を新しい位置にドラッグすると、リスト項目の<li>タグ内にあるものだけが移動します。残念ながら、アイテムをドラッグしてもアイテムの非表示の親<input>タグは移動しません。これは、cocoon がネストされたフィールドの外側 (つまり、 の外側<li>) に配置するためです。したがって、ブラウザではリストがソートされて表示されますが、コントローラ メソッドが受け取るパラメータには変更が反映されません。

これに対する解決策を見つけた場合は、投稿してください。

ありがとう

于 2014-01-31T18:10:24.147 に答える