Question

我正在将一个rails form_for帮助器与数据表混合使用，这些数据表使用它自己的HTML编码按钮，在form_for之外，用于选择和取消选择记录。但是，如果我点击“选择全部”＆＃39;在数据表顶部的按钮，页面将自动刷新，表中的任何选择都将丢失：

    <%= 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" width="100%">
         <... 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"

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

Answer 1

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

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

Answer 2

在按钮上分配onclick（）动作，在application.js中创建带有preventdefault的函数，该函数将停止提交，

当你想提交时，只需触发submit（）方法

Answer 3

这会阻止＆＃39; SelectAll＆＃39;提交表格：

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

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

3 个答案: