Soumettez le formulaire en rails 3 de manière ajax (avec jQuery)

Question

Je suis un débutant dans les rails et jQuery. J'ai deux formulaires distincts en une page et je veux les présenter séparément dans ajax façon (avec jQuery). C'est dans quelle mesure j'ai eu. Quelqu'un peut-il ajouter ou corriger ce code pour le faire fonctionner. Je suis à l'aide de Rails 3.1 et jQuery 1.6. Je vous remercie à l'avance.

application.js

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

première forme:

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

deuxième forme:

<%=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 est dans la même forme que SchoolController

Answer 1

Tu veux:

1. Arrêtez le comportement normal de submit.
2. Envoyez-le via ajax au serveur.
3. Obtenez une réponse et changez les choses en conséquence.

Le code ci-dessous devrait le faire:

 $('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){
        //act on result.
    });
    return false; // prevents normal behaviour
});
 

Answer 2

Si vous utilisez :remote => true sur vos formulaires, vous pouvez les soumettre avec JavaScript avec

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

Answer 3

La méthode privilégiée dans Rails 3, pour faire de l'ajax formulaire de soumission est d'utiliser des Rails-ujs.

Fondamentalement, vous permettent de Rails-ujs pour faire de l'ajax soumettre pour vous (et vous n'aurez pas besoin d'écrire de code js). Ensuite, il vous suffit d'écrire du code js pour capturer la réponse de l'événement (ou d'autres événements) et faire ton truc.

Voici un peu de code:

Tout d'abord, utilisez la télécommande option dans form_for forment ainsi va la soumettre via ajax par défaut:

form_for :users, remote:true do |f|

Ensuite, lorsque vous voulez faire une action basée sur ajax statut de la réponse (par exemple, réponse en cas de succès), écrire le javascript logique comme ceci:

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

Il y a plusieurs événements qui vous pouvez crochet.

Answer 4

Pour soumettre le formulaire via AJAX vous pouviez juste passer :remote => true de la form_for helper. Par défaut rails 3.0.x utilise prototype js lib, mais vous pouvez la changer en jquery avec l' jquery-rails gem (qui est la valeur par défaut pour les rails 3.1). bundle install , et puis de rails g jquery:install pour remplacer le prototype de fichiers avec jquery.

Après que vous aurez juste besoin de gérer le rappel. Jetez un oeil à cette vidéo