Ajax和Rails 4：創建實例變量並更新視圖而不刷新

Question

我有一個部分的coaching_notes索引和一個用於創建備註的表單。我想創建一個教練筆記，並進行部分更新而不刷新頁面。我收到一個未知動作錯誤：CoachingNotesController無法找到'show'動作。如果我添加顯示操作，我會收到缺少的模板錯誤。當我嘗試從控制器中刪除format.html部分時，我也遇到了未知格式錯誤。

我在Rails文檔之後模擬了我的代碼，並回顧了一堆類似的情況，但無法使其工作。

任何幫助非常感謝！

/views/coaching_notes/_index.html.erb

<div id="coaching_notes"> 
    <% @coaching_notes.each do |note| %> 
    <li> <%= note.content %> </li> 
    <% end %> 
</div> 
<br> 
<% @coaching_note = CoachingNote.new(user_id: current_user.id, meeting_id: session[:current_meeting_id]) %> 
<%= form_for(@coaching_note, remote: true) do |f| %> 

    <%= f.hidden_field :user_id %> 
    <%= f.hidden_field :meeting_id %> 
    <%= f.hidden_field :archive %> 
    <%= f.text_field :content %> 

    <%= f.submit %> 
<% end %> 

/views/coaching_notes/_coaching_note.html.erb

<li><%= note.content %></li> 

/視圖/ coaching_notes /創建。 js.erb

$("<%= escape_javascript(render coaching_note) %>").appendTo("#coaching_notes"); 

/controllers/coaching_notes_controller.rb

def create 
@coaching_note = CoachingNote.new(coaching_note_params) 

respond_to do |format| 
    if @coaching_note.save 
    format.html { redirect_to @coaching_note, notice: 'note was successfully created.' } 
    format.js {} 
    format.json { render json: @coaching_note, status: :created, location: @coaching_note } 
    else 
    format.html { render action: "new" } 
    format.json { render json: @coaching_note.errors, status: :unprocessable_entity } 
    end 
end 

的routes.rb

resources :coaching_notes 

UPDATE 17年7月15日 - 我已經根據修改的情侶檔@ Cira的回答：

/views/coaching_no TES/_index.html.erb

<div id="coaching_notes"> 
    <% @coaching_notes.each do |note| %> 
    <li> <%= note.content %> </li> 
    <%= link_to "delete", note, :remote => true, :method => :delete, :data => {:confirm => "Are you sure?"} %> 
    <% end %> 
</div> 
<br> 
<% @coaching_note = CoachingNote.new(user_id: current_user.id, meeting_id: session[:current_meeting_id]) %> 
<%= form_for(@coaching_note, remote: true) do |f| %> 

    <%= f.hidden_field :user_id, id: 'user' %> 
    <%= f.hidden_field :meeting_id, id: 'meet' %> 
    <%= f.hidden_field :archive, id: 'arch' %> 
    <%= f.text_field :content, id: 'content' %> 

    <%= f.submit 'Add note', id: 'submit_note' %> 
<% end %> 

// newly added 
<script> 
$('#submit_note').on("click", function() { 
    var u = $('#user').val() 
    var m = $('#meet').val() 
    var a = $('#arch').val() 
    var c = $('#content').val() 

    $.ajax({ 
    url: "/coaching_notes/create", 
    type: "POST", 
    data: { 
     user_id: u, 
     meeting_id: m, 
     archive: a, 
     content: c 
    }, 
    dataType: "json", 
    success: function(info) { 
     $('#coaching_notes').data("html", info) 
    } 
    }); 
}) 
</script> 

（，我不知道的主要部分是成功的功能與數據屬性）

/controllers/coaching_notes_controller.rb

def create 
    @coaching_note = CoachingNote.new(coaching_note_params) 

    @html = render_to_string :partial => "coaching_notes/index" 
    respond_to do |format| 
     if @coaching_note.save 
     format.html 
     format.json { render json: {"html" => @html} } 
     else 
     format.html { render action: "new" } 
     format.json { render json: @coaching_note.errors, status: :unprocessable_entity } 
     end 
    end 

兩件事： 1.我的成功功能在ajax中看起來是否正確？ 2.我需要將if @coaching_note.save放在控制器中嗎？

的錯誤，現在我得到的是「NoMethodError在CoachingNotes＃創建 - 未定義的方法`每次」的零：NilClass'強調此行/ index.html中

<% @coaching_notes.each do |note| %> 

然後我得到coaching_notes「失蹤模板指導/索引'

我覺得我們正在接近！任何幫助表示讚賞！

Answer 1

原來的問題是，我失蹤了這一行我的application.js：

//= require jquery_ujs 

對於那些不知道是誰，UJS表示「非侵入式JavaScript」。不需要這個，remote: true不會有太大的幫助。

之前搞清楚了這一點，我也只使用JavaScript和Ajax找到一個解決方案，下面是刪除註釋腳本：

$("input[value='Del']").click(function(event){ 
    event.preventDefault(); 
    var num = this.id 
    $.ajax({ 
     type: "DELETE", 
     url: "/coaching_notes/" + this.id, 
     dataType: "json", 
     success: function(data){ 
      // remove the div containing the note 
     } 
    }); 
}); 

請注意，您需要使用preventDefault()防止從形式提交。

而對於絕對添加備註時可重構以上，但腳本仍然工作：

$(document.body).delegate('input:text', 'keypress', function(e) { 
    // if user hits enter key 
    if (e.which === 13) { 
     e.preventDefault(); 
     createNote() 
    } 
}) 

$("#submit_note").click(function(e) { 
    e.preventDefault() 
    createNote() 
}) 

function createNote() { 
    var u = $('#user').val() 
    var m = $('#meet').val() 
    var a = $('#arch').val() 
    var c = $('#content').val() 

    if (c != "") { 
    $.ajax({ 
     url: "/coaching_notes", 
     type: "POST", 
     data: { 
     "coaching_note": { 
      "user_id": u, 
      "meeting_id": m, 
      "archive": a, 
      "content": c 
     } 
     }, 
     dataType: "json", 
     success: function(note) { 
     $("#content").val('') // clears the input box 
     // add the new note here 
     } 
    }); 
    } 
} 

的部分有關委派按鍵是如此，當用戶點擊「確定」鍵的筆記被髮送。再次，e.preventDefault()阻止通過Rails提交表單。

希望這可以幫助別人！我知道我被卡住了一段時間，這是一個超級簡單的修復。別忘了！ 請確保您在您的應用程序中有這個.JS！

//= require jquery_ujs 

感謝

Answer 2

嗯，我覺得你可以做什麼可能是表單的數據傳遞到通過AJAX的控制器操作（創建），當用戶按下創建後再次提交按鈕

$.ajax({ 
        url: "/coaching_notes/create", 
        type: "POST", 
        data: {a hash of the data retrieved from the inputs}, 
        dataType: "json", 
        success: function(data) { 
         //replace data of div you want here using String(data["html"], html being the attribute passed back via json from the controller. 
        } 
       }); 

，並在控制器渲染的部分你的教練的注意事項如下：

@html = render_to_string :partial => "coaching_notes/index" 
     respond_to do |format| 
     format.html 
     format.json {render json: {"html" => @html}} 
     end 

，並使用AJAX發送HTML回到視圖和阿賈克斯成功作用下更換的執教筆記原div的HTML。

乾杯！