submit form in Rails without page reload

Question

I have a problem with preventing a pagereload on submitting a form.

My HTML:

<%= form_for @foo, html: {multipart: true}, remote: true do |f| %>
   <%= f.check_box :bar, :id => "bar_id", :onchange => "submit_function(this.form)" %>
<% end %>

My Javascript:

function submit_function(form){
    form.submit(function (ev) {
        ev.preventDefault();
    });
}

My Controller:

def update

   // awesome things for update

   respond_to do |format|
     format.html { redirect_to request.referrer }
     format.js {}
   end
end

When clicking the checkbox , the JavaScript is triggered . The " form.submit " sends the form to the controller , but in this case the entire page is reloaded . I would like to prevent this reload.

I've also tried this, however, the page is also reloaded.

function submit_function(form){
  form.submit(function () {
    $.ajax({
        type: this.method,
        url: this.action,
        data: $(this).serialize()
    });
    return false;
  });
}

Is it necessary the " submit - function" to change before or is it them by pressing the checkbox to change ?

I have now tried something. Invites now the page no longer new, but the model is updated.

function submit_function(form) {

  $.ajax({
    type: form.method,
    url: form.action,
    data: $(form).serialize()
  });

  return false;
}

Now i have the problem with updating the partial which is changed. How can I do this with js?

OK, I get it. The request will be sent in js and no longer triggers the page reload. Using javascript I have edited the checkbox.

Answer 1

Seems to be very similar to this situation: AJAX rails check box using javascript .submit()

What they do there is redefining the form submission, changing the behavior.

And as a basic recommendation: use rather unobtrusive JS instead of inlined onchange events