Rails的遠程鏈接模式的創建和編輯記錄

我試圖完成，是讓用戶從索引頁編輯記錄，採用模態。

在我index.haml鑑於我有這樣的：

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

#bar-modal.modal.fade

在_edit.haml：

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

在edit.js.erb

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

在_form.haml

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

我的控制器是標準軌道生成的CRUD控制器。

由於某種原因，如果點擊鏈接，則不會顯示模式。我以不同的方式開展工作，但之後它開闢了一個「創造」形式，而不是編輯形式。

我正在使用bootstrap和haml。我已經確定在螢火蟲中沒有錯誤。

我錯過了什麼？

來源

2016-08-16 Herm

你可以發佈你的'index.html.haml'嗎？ –

@ArunKumar問題中的第一個代碼段目前是我的完整索引文件。我刪除了所有其他設備，試圖讓它工作 – Herm

添加了一個解決方案。讓我知道它是否解決了您的問題。 –

您是否修改了控制器來呈現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的別名。（少擊鍵）

請確保您的div的編號爲modal-container在index.html.haml。而你的模式（在_edit.html.haml）應該有一個ID爲bar-modal。

而且在_form.html.haml你應該模式看起來是這樣的：

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

請注意，我們有ID bar-modal一個模式，這將被渲染到佔位符DIV #modal-container這應該是在index.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代碼中的頂級位置在文檔中避免影響模態的外觀和/或功能的其它組件。

希望這會有所幫助！

來源

2016-08-16 22:01:14

它看起來像現在正在發生的事情。點擊鏈接時，我發現Firebug中有500個錯誤。所以試圖弄清楚爲什麼...我會讓你知道一旦解決。謝謝您的幫助！！！ – Herm

我擺脫了500錯誤。但該模式仍未顯示。我可以在我的日誌中看到它正在渲染我期望的視圖文件，但模式不會顯示在瀏覽器中。 – Herm

@Herm在網絡選項卡中，您是否在響應正文中看到'modal html'？你在github上有這個項目嗎？如果是，發佈網址。我會看看 –

Rails的遠程鏈接模式的創建和編輯記錄

回答

相關問題