javascript - Ajax Rails 表单提交后在表单下发布额外的 Javascript 代码(\n\n...等)

Question

我按照第 4 节(服务器端问题)在页面上设置 ajax。我已经完全复制了教程文本(用我自己的模型名称替换模型名称)，它创建并保存我的“参与者”记录并刷新部分......但它在刚刚提交的表单下方发布了这个奇怪的代码:

$("
\n\n    Helper:sampleemail@sample.com \n<\/li>\n\n").appendTo("#participants");

这似乎是我的部分信息和 creat.js 的某种奇怪的混搭。这并不是真正的错误...只是额外的代码。

这是我的代码

class ParticipantsController < ApplicationController
def new
  @participant = Participant.new
  @participants = @participants.recently_updated
end

def create
  @participant = Participant.new(participant_params)

  respond_to do |format|
    if @participant.save
      format.html { redirect_to @participant, notice: 'Helper Invited!' }
      format.js   {}
      format.json { render json: @participant, status: :created, location: @participant }
    else
      format.html { render action: "new" }
      format.json { render json: @participant.errors, status: :unprocessable_entity }
    end
  end
end

_form.html.erb

<ul id="participants">
  <%= render @participants %>
 </ul>

<%= form_for(@participant, remote: true) do |f| %>
  <%= f.label :email %><br>
  <%= f.email_field :email %>
<%= f.submit 'SUBMIT' %> 
 <script>
  $(document).ready(function() {
  return $("#new_participant").on("ajax:success", function(e, data, status, xhr) {
    return $("#new_participant").append(xhr.responseText);
  }).on("ajax:error", function(e, xhr, status, error) {
    return $("#new_participant").append("<p>Oops.  Please Try again.</p>");
  });
});
 </script>
 <script>
$(function() {
  return $("a[data-remote]").on("ajax:success", function(e, data, status, xhr) {
    return alert("The helper has been removed and notified.");
  });
});
</script>

_participant.html.erb

<li >
<%= participant.email %> <%= link_to participant, remote: true, method: :delete,  data: { confirm: 'Are you sure?' } do %>REMOVE<% end %>
</li>

创建.js.erb

$("<%= escape_javascript(render @participant) %>").appendTo("#participants");

销毁.js.erb

$('#participants').html("<%= j (render @participants) %>");

Answer 1

看起来您都在响应 js.erb 文件并监听 ajax:success 事件。您应该只需要执行一项操作。现在，ajax:success 监听器正在将响应附加到表单，并且响应是 JavaScript 代码。删除该监听器，您应该会得到所需的结果。