Rails Form_for多くのオブジェクトのモーダルで

Question

これを行うには、より良い方法がある場合、またはこれを行うより良い方法があれば教えてください。

モーダルを使用してform_forを使用して一部のモデルを更新したいとします。ユーザーはフィールドで「編集」とモーダルポップアップをクリックし、送信またはキャンセルをクリックすることができます。私がそれを行うことができる1つの方法は、すべての単一のモデルのためのモーダルを作成することですが、それは間違っていると本当にhtml.erbファイルを一括しています。

どうすればいいですか？私は何とかリモート機能を使用していると思いますか？

<div class="modal fade" id="edit-modal" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content">    
      <%= simple_form_for(@rate) do |f| %> 
      <%= f.label "Rate/session" %> 

      <%= f.input :rate_dollars, :label => false, collection: 0..100, :selected => @dol_amt, :include_blank => false %> 
      <%= f.input :rate_cents, :label => false, collection: {".00" => 0, ".25" => 0.25, ".50" => 0.50, ".75" => 0.75}, :selected => @cent_amt, :include_blank => false %>   

      <%= f.hidden_field :uid, :value => @user.id %> 
      <%= f.submit "Update", class: "btn btn-primary" %> 
      <% end %>   
     </div> 
    </div> 
</div> 

Answer 1

私はそれはインデックスページでモーダル骨格を設定して達成され、その後、JSのビットは、コントローラのアクションは、部分的にフォームでformat.jsへの対応と、フォームをロードするようになった方法。コントローラで

$('#user-form-edit').on("show.bs.modal", function(e) { 
    $(this).find('.modal-body').load(e.relatedTarget.dataset.url); 
}); 

：

JSファイルで、その後

<div id="user-form-edit" class="modal fade"> 
    <div class="modal-dialog modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h3>Edit User</h3> 
    </div> 
    <div class="modal-body"></div> 
    </div> 
</div> 

def edit 
    @user = User.find(params[:id]) 
    respond_to do |format| 
    format.js { render partial: "form", locals: {user: @user}} 
    end 
end 

この方法では、あなたはすべてのユーザーに対して使用することができ、単一のモーダルを持っています。

- モーダルを開くためにどのようにEDIT ---

<%= link_to "#", class: "btn btn-warning edit", 
    data: { 
     toggle: "modal", 
     url: edit_admin_user_path(user.id), 
     target: "#user-form-edit"} do %> 
    <i class="glyphicon glyphicon-edit glyphicon-white"></i> 
    Edit 
<% end %> 

Answer 2

あなたが達成したいもののために、リモート機能（AJAX）を使用する方法について考えて正しい軌道に乗っています。

まずだけAJAXクエリで最終的に取り込まれます空のdivを作成：真のリンクと関連付けるには、次の

<div id="edit-modal" class="modal fade" role="dialog"></div> 

次は、リモートを追加することによって、AJAXを使用して、コントローラにアクションを打つためにあなたの編集を変更しますデータトグルとデータターゲットを使用してモーダルダイアログを表示します。

<%= link_to edit_modelinstance(@modelinstance), remote: true, 'data-toggle' => 'modal', 'data-target' => '#edit-modal' do %> 

その後、作成された空のdivに追加するモーダルコンテンツが含まれていますその部分を作成し、以前の...例えば、_edit.html.erb

<div class="modal-dialog"> 
     <div class="modal-content"> 

     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 id="myModalLabel">Modal Title</h3> 
     </div> 

     <div class="modal-body"> 
      <%= simple_form_for(@rate) do |f| %> 
      <%= f.label "Rate/session" %> 

      <%= f.input :rate_dollars, :label => false, collection: 0..100, :selected => @dol_amt, :include_blank => false %> 
      <%= f.input :rate_cents, :label => false, collection: {".00" => 0, ".25" => 0.25, ".50" => 0.50, ".75" => 0.75}, :selected => @cent_amt, :include_blank => false %>   

      <%= f.hidden_field :uid, :value => @user.id %> 
      <%= f.submit "Update", class: "btn btn-primary" %> 
      <% end %>   

      <div class="modal-footer"> 
      <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button> 
      <%= f.submit 'Submit', class: 'btn btn-primary' %> 
      </div> 
     </div> 
     </div> 
    </div> 

注DIV構造（特定されたものパーツmodal-xxxxのクラス）は、モーダルが正しく表示されるために重要です。

最後に、divをAJAX呼び出しの応答としてレンダリングして入力するだけで、コントローラのアクション用のjs.erbファイル（例：edit.js.erb）を作成し、それに以下を追加する必要があります。

$("#edit-modal").html("<%= escape_javascript(render partial: 'form') %>"); 

最後に、ちょうどあなたがあなたのコントローラからJSをレンダリングしていることを確認：

format.js