Question

我有一些javascript，当您单击编辑图标时会显示一个表单。表单有一个工作按钮，进入控制器的更新功能。

表格中还有一个取消按钮，进入更新功能。但是，我不想从更新功能重定向或重新呈现。重新渲染会丢失可能显示的其他形式。

有没有办法让按钮只能调用javascript？ javascript被调用，但随后它进入控制器。

当然，在form_for之外移动取消按钮有效，但两个按钮不再相邻。

  <%= form_for(@guide) do |f| %>
    <%= render 'form_part', test: 'name', field: field, f: f %>
    <%= render 'form_part', test: 'city', field: field, f: f %>
    <%= render 'form_part', test: 'province', field: field, f: f %>
    <%= render 'form_part', test: 'country', field: field, f: f %>
    <%= render 'textarea', test: 'description', field: field, f: f %>
    <p>
      <%= f.submit "Save", class: "btn btn-primary edit-guide-btn" %>
      <%= button_tag "Cancel", class: "btn btn-default edit-guide-btn", 
          onclick: "toggle('#{field}','cancel')" %>
    </p>
  <% end %>

现在我意识到提交时会遇到同样的问题。控制器必须重新渲染编辑页面，并且将再次隐藏显示的表单。

如何显示一堆表单，每个表单都有自己的提交按钮。单击提交按钮时，它只会提交到该表单，而只保留其他表单而不重新呈现页面？

Answer 1

如果您通过type: 'button'拨打button_tag，则应使用取消按钮修复您的问题。

button_tag "Cancel", type: 'button', class: "btn btn-default edit-guide-btn", onclick: "toggle('#{field}','cancel')"

关于提交的部分，如果您想在不重新加载页面的情况下提交表单，则可能需要执行以下操作之一：

使用ajax提交表单
- 这可能是最多的工作，但为您提供更大的灵活性，实现了不重新呈现页面的目标
使用target="_blank"属性提交表单
- 这将打开一个新窗口，其中包含表单提交的结果。根据您的问题的措辞，听起来您不希望将此方法用于您的用例
向带有ID的页面添加隐藏的iframe，并将表单的target属性设置为iframe的id
- 如果您不需要对响应做任何事情，这个选项是一个很好的中间立场，但它确实有一些副作用，例如在某些浏览器中添加用户的历史记录，这些副作用可能会让他们感到困惑点击后退按钮，它没有做任何事情。

取消按钮只调用javascript并且不调用控制器更新函数

1 个答案: