没有重新加载Rails Ajax提交将无法正常工作

Question

我有一个通过ajax呈现并通过ajax提交的表单。我面临的问题是ajax提交在第一次提交时不起作用，但是当重新加载页面并且第二次提交该表单时，提交将起作用。

表格

   <%= form_for(@address,:remote=>true) do |f| %>
     <%= f.label :name %>
     <%= f.text_field :name %>
     <%= f.label :full_address %>
     <%= f.text_area :full_address %>
     <%= f.submit %>
<% end %>

处理保存的控制器方法是

def create
    @address = Address.new(address_params)
    @address.user_id=current_user.id
    respond_to do |format|
      if @address.save
        format.html { redirect_to @address, notice: 'Address was successfully created.' }
        format.json { render :show, status: :created, location: @address }
        format.js 
      else
        format.html { render :new }
        format.json { render json: @address.errors, status: :unprocessable_entity }
        format.js 
      end
    end
  end

在第一个XHR请求上进行编辑 ，我将得到此表单

<input name="utf8" value="✓" type="hidden">

  <div class="field">
    <label for="address_name">Name</label><br>
    <input name="address[name]" id="address_name" type="text">
  </div>
  <div class="field">
    <label for="address_full_address">Full address</label><br>
    <textarea name="address[full_address]" id="address_full_address"></textarea>
  </div>
  <div class="actions">
    <button type="submit">Submit</button>
  </div>

但是在第二个请求中我得到了这个

<form class="new_address" id="new_address" action="/addresses" accept-charset="UTF-8" data-remote="true" method="post">
<input name="utf8" value="✓" type="hidden">

  <div class="field">
    <label for="address_name">Name</label><br>
    <input name="address[nEditame]" id="address_name" type="text">
  </div>
  <div class="field">
    <label for="address_full_address">Full address</label><br>
    <textarea name="address[full_address]" id="address_full_address"></textarea>
  </div>
  <div class="actions">
    <button type="submit">Submit</button>
  </div>
</form>

Answer 1

在你的观点有问题的控制器addresses_controller ，创建一个名为新文件create.js.erb 。 这是响应将定向到的地方。 在此文件中，编写您的jquery代码

$('html_tag').html('<%=j render @address%>')

您要替换的view元素应具有一个class，id或您可以使用标记选择它（

// ...）。

如果您不熟悉jquery，请尝试此站点。

http://try.jquery.com/

Answer 2

您的问题听起来像是JQuery委托问题。

---

大多数人直接将JQuery绑定到元素。 此绑定仅在DOM加载时发生，这意味着任何新元素都没有附加功能：

#app/assets/javascripts/application.js
$("element").on("click"....

仅当在DOM加载时定义了“元素”，并且在$(document).ready块中调用此函数时，以上内容才有效。

-

如果在 DOM加载后加载了元素，则需要确保JQuery可以绑定到它们。 以前使用.live处理，但现在使用.on完成：

#app/assets/javascripts/application.js
$(document).on("click", ".element"...

上面的代码用于将事件绑定到DOM之后加载的元素。 它从document对象委托 ，这使您的JQuery可以绑定到所需的任何元素。

简而言之，如果您正在使用ajax加载的元素，则应始终绑定到document ，并委托给dynamic元素。

---

远程：真

由于您使用的是remote: true ，因此我们必须查看Rails如何处理JS委托。

从rails.js github页面可以看到，看来Rails通过document绑定了其事件处理程序：

$document.delegate(rails.buttonClickSelector, 'click.rails', function(e) {

虽然这看起来还可以，但我认为有些东西阻止它绑定到动态加载的表单。

---

固定

我会尝试这样的：

<%= form_for @address, id: "address" do |f| %>

#app/assets/javascripts/application.js
$(document).on("submit", "form#address", function(e){
   $.post($(this).attr("action"), $(this).serialize());
});

目的是删除remote: true引用，将我们自己的JS绑定到文档并委托给您动态加载的表单。

它仍然会发送XHR请求，从而维持您的应用程序流。