Prevent automatic refresh when clicking HTML button in form_for

Question

I am mixing a rails form_for helper with datatables that uses it's own HTML coded button, outside of form_for, to select and deselect records. However, if I click 'Select All' button atop the datatable, the page is automatically refreshed and any selection in the table will be lost:

    <%= 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" %>

I want to prevent the page from refreshing until the person clicks the form_for submit button at the bottom of the page:

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

The present CoffeeScript for the DeSelect and Select All buttons is:

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

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

How can I prevent the page from refreshing until submit is clicked?

Sauron · Accepted Answer · 2014-11-04 02:19:45Z

4

If I just have the tag <button></button> then it actually acts as a submit thus refreshing the page.

What I should have done is set it to <button type="button"></button> so that the page won't refresh but still allow for functions and dynamic content to work with the button submission

answered Nov 4, 2014 at 2:19

Sauron

6,68716 gold badges77 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iosMessenger · Accepted Answer · 2014-11-01 22:57:14Z

0

assign an onclick() action on the button and in the application.js create the function with preventdefault which will stop the submit,

When you want to submit just trigger the submit() method

answered Nov 1, 2014 at 22:57

iosMessenger

739 bronze badges

2 Comments

Sauron Over a year ago

Can you provide an example?

Sauron Over a year ago

Can you please provide an example?

markpsmith · Accepted Answer · 2014-11-03 16:47:14Z

-1

This will prevent the 'SelectAll' from submitting the form:

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

answered Nov 3, 2014 at 16:47

markpsmith

4,9182 gold badges38 silver badges65 bronze badges

2 Comments

Sauron Over a year ago

can you write this for coffeescript?

Sauron Over a year ago

This did not work, all it did was prevent the buttons from performing any action at all, yet it still refreshed the page.

Collectives™ on Stack Overflow

Prevent automatic refresh when clicking HTML button in form_for

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related