Jquery Ajax和Rails 4：创建实例变量并更新视图而不刷新

我有一部分的教练笔记索引和一个创建笔记的表格。我想创建一个指导说明，并在不刷新页面的情况下进行部分更新。我收到一个未知操作错误：找不到CoachingNotesController的操作“show”。如果添加show操作，则会出现缺少模板错误。当我尝试从控制器中删除format.html部分时，我还遇到未知的格式错误

我根据Rails文档对代码进行了建模，也查看了一系列类似的情况，但无法使其正常工作

非常感谢您的帮助

/views/coaching\u notes/\u 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 %>

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

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

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

resources :coaching_notes

<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>

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

routes.rb

<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 %>

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

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

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

resources :coaching_notes

<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>

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

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

/views/coaching\u notes/\u 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 %>

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

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

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

resources :coaching_notes

<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>

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\u note.save

我现在遇到的错误是“CoachingNotes中的NoMethodError”#create-未定义的方法“each”for nil:NilClass”，在coaching_notes/index.html中突出显示这一行

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

然后我得到“缺少模板注释/索引”

---

我觉得我们越来越近了！感谢您的帮助

我认为，当用户按下submit按钮时，您可以通过AJAX将表单的数据传递到控制器操作（create）中

$.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 success函数下教练笔记原始div的HTML

---

干杯

问题是我的应用程序中缺少这一行。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提交

希望这能帮助别人！我知道我被困在上面有一段时间了，这是一个非常简单的修复。别忘了确保你的APPLICATION.JS中有这个

 //= require jquery_ujs

---

谢谢

谢谢@Cira，我仍然没有让它工作，但我更新了我的更改供您查看。我非常感谢你的帮助！AJAX中的success属性意味着只有当AJAX调用成功时，它才会执行success函数，我认为数据是必须输入的参数，而不是信息。同样对于你的辅导笔记，我认为应该没有s，因为你的变量名是辅导笔记。我也不太清楚为什么你的索引是部分的，也许可以创建另一个文件作为部分，使索引不是部分的？