Submit form in rails 3 by ajax (with jQuery)

Question

I am new to rails and jQuery. I have two separate forms on one page, and I want to submit them separately by ajax (with jQuery). This is how far I got. Can someone add or fix this code to make it work. I am using Rails 3.1 and jQuery 1.6. Thank you in advance.

application.js

$(".savebutton").click(function() { $('form').submit(function() { $(this).serialize(); }); }); 

first form:

 <%=form_for :users do |f| %> <fieldset> <legend>Basic details</legend> <%= f.label :school %> <%= f.text_field :school,:size=>"45",:class=>"round",:id=>"school" %><br/> </fieldset> <p><%= button_to "save and continue",{:class=>"savebutton"} %></p> <%end%> 

second form:

 <%=form_for :courses do |c| %> <fieldset> <legend>Your current classes</legend> <label>class:</label><%= c.text_field :subject,:size=>"45",:class=>"round" %><br/> </fieldset> <p><%= button_to "save and continue",{:class=>"savebutton"} %></p> <%end%> 

Schoolcontroller

 class SchoolController < ApplicationController respond_to :json def create @school = current_user.posts.build(params[:school].merge(:user => current_user)) if @school.save respond_with @school else respond_with @school.errors, :status => :unprocessable_entity end end end 

CourseController in the same form as SchoolController

Answer 1

Do you want to:

• Stop normal submit behavior.
• Send it via ajax to the server.
• Get an answer and modify it accordingly.

The code below should do this:

 $('form').submit(function() { var valuesToSubmit = $(this).serialize(); $.ajax({ type: "POST", url: $(this).attr('action'), //sumbits it to the given url of the form data: valuesToSubmit, dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard }).success(function(json){ console.log("success", json); }); return false; // prevents normal behaviour }); 

Answer 2

If you use :remote => true in your forms, you can submit them using JavaScript using

 $('form#myForm').trigger('submit.rails'); 

Answer 3

The preferred way in Rails 3 to submit an ajax form is to use Rails-ujs.

Basically you allow Rails-ujs to do ajax submit for you (and you won’t have to write js code). Then you just write js code to capture the response event (or other events) and do your job.

Here is the code:

First, use the remote form_for option, so the form will submit via ajax by default:

 form_for :users, remote:true do |f| 

Then, when you want to perform some action based on the state of the ajax response (e.g. a successful response), write the javscript logic as follows:

 $('#your_form').on('ajax:success', function(event, data, status, xhr) { // Do your thing, data will be the response }); 

There are several events that you can connect to.

Answer 4

To submit a form via AJAX, you can simply pass :remote => true to the form_for . By default, rails 3.0.x uses the js lib prototype, but you can change it to jquery using the jquery-rails gem (which is the default value for rails 3.1). bundle install and then rails g jquery:install replace the prototype files with jquery.

After that, you just need to handle the callback. Take a look at this screencast

Answer 5

This is very important in your request, when ajax stops beahavior by default, send remote: true to form_for

 <%= form_for :session, url: sessions_path, remote: true, html: { class: "form-signin" } do |f| %> <% end %> 

in your ajax

 $(".form-signin").on("submit", function(e) { $.ajax({ url: $(this).attr('action'), data: $(this).serialize(), type: "POST", dataType: "json", success: function(response) { console.log(response) }, error: function(xhr, textStatus, errorThrown) {} }); e.preventDefault(); //THIS IS VERY IMPORTANT }); 

Answer 6

Nothing worked for me here, my problem was that the jQuery modal library would violate my forms from sending through deleted data if I lifted the modal window but found a fix.

First add the jQuery form plugin to your javascript directory: http://malsup.imtqy.com/jquery.form.js

Now override the submit method for your form. For example, you can do something like this:

 = form_for @object, html: {class: "ajax_form_submit"}, authorization_token: true do |f| = f.text_input javascript: $(document).on('ready page:load', function() { $(".ajax_form_submit").submit(function () { var form = $(this) form.ajaxSubmit({ success: function (responseText, statusText, xhr) { console.log('success: ajax_form_submit') }, error: function (jqXHR, statusText, errorThrown) { console.log('error: ajax_form_submit'); console.log(jqXHR, statusText, errorThrown); } }) }) })