Soumettre le formulaire dans les rails 3 de manière ajax (avec jQuery)

Je suis débutant en rails et en jQuery. J’ai deux formulaires distincts sur une page et je souhaite les soumettre séparément de manière ajax (avec jQuery). C’est comme ça que je suis. Quelqu’un peut-il append ou corriger ce code pour le faire fonctionner? J’utilise Rails 3.1 et jQuery 1.6. Merci d’avance.

application.js

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

première forme:

  
Basic details "45",:class=>"round",:id=>"school" %>

"savebutton"} %>

deuxième forme:

  
Your current classes "45",:class=>"round" %>

"savebutton"} %>

SchoolController

 class SchoolController  current_user)) if @school.save respond_with @school else respond_with @school.errors, :status => :unprocessable_entity end end end 

CourseController a la même forme que SchoolController

Tu veux:

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

Le code ci-dessous devrait faire cela:

 $('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 }); 

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

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

La manière préférée dans Rails 3 de soumettre des formulaires ajax est d’utiliser Rails-ujs.

En gros, vous autorisez Rails-ujs à faire le réglage ajax pour vous (et vous n’aurez pas besoin d’écrire de code js). Ensuite, vous écrivez simplement le code js pour capturer l’événement de réponse (ou d’autres événements) et faites votre travail.

Voici quelques codes:

D’abord, utilisez l’option remote dans form_for afin que le formulaire soumette via ajax par défaut:

 form_for :users, remote:true do |f| 

Ensuite, lorsque vous souhaitez effectuer une action basée sur le statut de réponse ajax (par exemple, une réponse réussie), écrivez la logique javscript comme suit:

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

Il existe plusieurs événements auxquels vous pouvez accéder.

Pour soumettre un formulaire via AJAX, vous pouvez simplement passer :remote => true à l’assistant form_for . Par défaut, rails 3.0.x utilise le prototype js lib, mais vous pouvez le changer en jquery avec la gem jquery-rails (qui est la valeur par défaut pour les rails 3.1). bundle install it and puis rails g jquery:install pour remplacer les fichiers prototypes par jquery.

Après cela, il vous suffira de gérer le rappel. Jetez un oeil à ce screencast

c’est très important dans votre requête avec ajax arrête le comportement par défaut, envoie à distance: true dans ton form_for

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

dans ton 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 }); 

Rien ici n’a fonctionné pour moi, mon problème était que la bibliothèque modale de jQuery briserait mes formulaires pour qu’ils ne soient pas envoyés via des données distantes si j’ouvrais une fenêtre modale, mais j’ai trouvé un correctif.

Ajoutez d’abord le plug-in de formulaire jQuery à votre répertoire javascript assets: http://malsup.github.io/jquery.form.js

Maintenant, remplacez la méthode de soumission pour votre formulaire. Par exemple, vous pourriez faire quelque chose comme ceci:

 = 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); } }) }) })