单击 form_for 中的 HTML 按钮时防止自动刷新

Posted 2023-05-09

【中文标题】单击 form_for 中的 HTML 按钮时防止自动刷新

【英文标题】：Prevent automatic refresh when clicking HTML button in form_for

【发布时间】：2014-12-28 21:56:53

【问题描述】：

我正在将 rails form_for 助手与数据表混合使用，该数据表使用它自己的 html 编码按钮（在 form_for 之外）来选择和取消选择记录。但是，如果我单击数据表顶部的“全选”按钮，页面会自动刷新，并且表中的任何选择都将丢失：

    <%= f.label :call_order %>
    <%= f.check_box :call_order %>

    **Datatables implementation**
    <button id="selectAllRestaurantsForCampaign">Select All</button>
    <button id="deSelectAllRestaurantsForCampaign">Deselect All</button>
    <table id="restaurantsForCampaign" class="display" cellspacing="0" >
         <... Table Code ...>
    </table> 

    <hr>
    <strong>Campaign Active</strong>

    **Final attribute in form_for**
    <%= f.check_box :is_active %>
    <br>

    <%= f.submit "Save changes", class: "btn btn-large btn-primary" %>

我想阻止页面刷新，直到用户单击页面底部的 form_for 提交按钮：

<%= f.submit "Save changes", class: "btn btn-large btn-primary" %>

目前用于 DeSelect 和 Select All 按钮的 CoffeeScript 是：

 # Conditional 'Select All' (works)
  $("#selectAllRestaurantsForCampaign").click ->
    table.$('tr', "filter":"applied").addClass "selected"

  # Deselecting all (works)
   $("#deSelectAllRestaurantsForCampaign").click ->
    table.$("tr").removeClass "selected"

如何防止页面在点击提交之前刷新？

【参考方案1】：

如果我只有标签<button></button>，那么它实际上充当了提交，从而刷新了页面。

我应该做的是将它设置为<button type="button"></button>，这样页面就不会刷新，但仍然允许功能和动态内容与按钮提交一起使用

【参考方案2】：

在按钮上分配一个 onclick() 操作，并在 application.js 中使用 preventdefault 创建函数，这将停止提交，

当你要提交时，只需触发 submit() 方法

【讨论】：

你能举个例子吗？

你能举个例子吗？

【参考方案3】：

这将阻止“全选”提交表单：

$('#selectAllRestaurantsForCampaign').click(function(e)
     e.preventDefault(); 
    ... your code to select all
);

【讨论】：

你可以为coffeescript写这个吗？

这不起作用，它所做的只是阻止按钮执行任何操作，但它仍然刷新了页面。