Question

这是我的代码：

<div class="lists">
  <h1>Your Todo Lists</h1>
    <% @lists.each do |list| %>
      <div id="list">
        <%= list.title %>
        <% list.items.each do |item| %>
        <div class="item-list">
          <%= form_for :item, url: item_path(item), method: :post, html: { class: "item-box" } do |f|%>
            <%= f.label item.title %>
            <%= f.check_box item.id %>
          <% end %>
        </div>
        <% end %>
      </div>
    <% end %>
</div>

<script>
  $(document).ready(function() {

    var changeDom = function(itemRow) {
      itemRow.closest(".item-list").remove()

      // $("complete-list").append(this)
    }

    var itemList = $(".item-list")
    itemList.find(":checkbox").on("change", function(box){
      var box = $(this)
      var item_number = parseInt(box[0].name.match(/[^[\]]+(?=])/g)[0])
      $.ajax( { type: "PUT",
          url: "items/" + item_number,
          data: { id: item_number },
          success: function(text) {
            changeDom(box[0].closest(".item-list"))
          }
        });
      })
    })
</script>

当我单击一个复选框时，它会让我保持在页面上，并且我在ajax请求中点击了成功回调。当我尝试另一种方式时：

<h1>Things You Gotta Do</h1>
<% @lists.each do |list| %>
  <div id="list">
    <%= list.title %>
    <% list.items.each do |item| %>
      <%= form_for item do |f| %>
        <%= f.label item.title %>
        <%= f.check_box :status, onchange: '$(this.form).submit();' %>
      <% end %>
    <% end %>
  </div>
<% end %>

这种方式使用rails onchange ，它会尝试重定向到另一个模板（“/ items / 1”），我不知道为什么。我该如何防止这种行为？我想使用 onchange 留在此页面上，因为我想操作该页面上的dom。

Answer 1

我不确定我完全理解你的问题。

但你的ajax例子看起来很奇怪。

如果您使用的是标准Rails控制器，通常会为大多数操作配置两种请求类型。（如果您使用脚手架工具生成控制器）。

这是一个例子

  # PATCH/PUT /driver_procedures/1
  # PATCH/PUT /driver_procedures/1.json
  def update
    @driver_procedure.assign_attributes(driver_procedure_params)

    respond_to do |format|
      if @driver_procedure.save
        format.html { redirect_to @driver_procedure, notice: 'Driver procedure was successfully updated.' }
        format.json { render :show, status: :ok, location: @driver_procedure }
      else
        format.html { render :edit }
        format.json { render json: @driver_procedure.errors, status: :unprocessable_entity }
      end
    end
  end

请注意，有一个HTML响应和一个JSON响应。请注意，HTML版本将在完成后重定向到新页面，但JSON版本不会 - 它只返回模型的JSON版本。

因此，如果你问为什么标准表单会提交重定向到/items/1 - 因为这是Rails控制器在处理表单提交后默认执行的操作。您可以在上面的控制器代码中看到它。

但是如果您通过ajax发布数据，则应确保将其发布到正确的路线。您想通过将.json附加到网址来将其发布到路径的JSON版本。

    $.ajax( { type: "PUT",
      url: "items/" + item_number + '.json',
      data: { id: item_number },
      success: function(text) {

      }
    });

但除此之外，我不确定您为什么要在复选框更改时提交表单。我认为你使用ajax的第一种方法更有意义。

如何使用“onchange：'$（this.form）.submit（）;”来阻止rails形式的onchange重定向

1 个答案: