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>

/views/coaching_notes/create.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

2017 年 7 月 15 日更新 - 我根据@Cira 的回答修改了几个文件：

/views/coaching_notes/_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 in CoachingNotes#create - undefined method `each' for nil:NilClass' 在coaching_notes/index.html 中突出显示这一行

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

然后我得到“缺少模板 coaching_notes/index”

我觉得我们越来越近了！任何帮助表示赞赏！

Answer 1

我认为您可以做的可能是当用户按下提交按钮时，通过 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 发送回视图，并在 ajax 成功功能下替换教练笔记的原始 div 的 HTML。

干杯！

Answer 2

原来问题是我在 application.js 中遗漏了这行代码：

 //= require jquery_ujs

对于那些不知道的人，ujs 代表“Unobtrusive 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 提交。

希望这对其他人有帮助！我知道我被困了一段时间，这是一个非常容易解决的问题。不要忘记！ 确保你的 APPLICATION.JS 中有这个！

 //= require jquery_ujs

谢谢