Railsのリモート作成するためのリンクモーダルおよび編集レコード

Question

は私が達成しようとしている何here

を見つけ、ユーザーがモーダルを使用して、インデックスページからレコードを編集できるようにすることです。私index.hamlビューで

私はこれを持っている：

_edit.hamlで

- @bars.each do |bar| 
    = link_to "Edit", edit_bar_path(bar), remote: true, class: "btn btn-default" 

#bar-modal.modal.fade 

：

edit.js.erb _form.hamlで

$("#bar-modal").html("<%= escape_javascript(render 'edit') %>") 
$("#bar-modal").modal("show") 

で

.modal-header 
    %h3= "Editing #{@bar.foo}" 
= render "form" 

= bootstrap_form_for @bar, remote: true do |f| 
    = f.text_field :foo 
    = f.button "Save" 

私のコントローラは標準のレール生成CRUDコントローラです。

何らかの理由で、リンクをクリックしてもモーダルが表示されません。私はそれを別のやり方で動かすことにしましたが、編集したものよりもむしろ「作成する」フォームを開いたのです。

私はブートストラップとハムルを使用しています。私は火かき棒に誤りがないことを確認しました。

私には何が欠けていますか？

Answer 1

jsに応答するコントローラを変更しましたか？お使いのコントローラのアクションeditで

、

def edit 
    #find the record 
    respond_to |format| 
    format.js # this will render edit.js.haml 
    # other formats 
    end 
end 

を追加し、あなたのedit.js.hamlにhamlとerbを混合しています。コードの最初の行が実行され

$('#modal-container').html('#{ j(render 'edit') }'); 
$('#bar-modal').modal("show"); 

で、#bar-modalは私たちのドキュメントに存在することを交換してください。そして、modalメソッドを呼び出してモーダルを表示することができます。

jは、escape_javascriptの別名です。 （キーストロークが少ない）

にmodal-containerのIDを持つdivがあることを確認してください。あなたのモーダル（_edit.html.haml）のIDはbar-modalである必要があります。私たちは、ID bar-modalとモーダルを持っており、これはindex.html.hamlにする必要がありますプレースホルダのdiv #modal-containerにレンダリングされます

.modal.fade.in#bar-modal 
    .modal-dialog 
    .modal-content 
     .modal-header 
     %h3= "Editing #{@bar.foo}" 
     .modal-body 
     = render "form" 

注：

そして_form.html.hamlであなたのモーダルは、次のようになります。それはこのようなものでなければなりません。

%div{id: "modal-container"} 
    <!-- this is where the modal will go in --> 

- @bars.each do |bar| 
    = link_to "Edit", edit_bar_path(bar), remote: true, class: "btn btn-default" 

modal-containerをドキュメントの先頭に追加します。ブートストラップのドキュメントから、

モーダルマークアップの配置

常にモーダルの外観および/または機能に影響を与える他のコンポーネントを避けるために、あなたのドキュメントの最上位位置にモーダルのHTMLコードを配置してみてください。