web-dev-qa-db-fra.com

Soumettez le formulaire dans Rails 3 de manière ajax (avec jQuery)

Je suis un débutant dans Rails et jQuery. J'ai deux formulaires séparés sur une page et je veux les soumettre séparément de manière ajax (avec jQuery). C'est à quelle distance je suis. Quelqu'un peut-il ajouter 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:

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

jqueryajaxruby-on-rails-3
75
katie

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){
        console.log("success", json);
    });
    return false; // prevents normal behaviour
});
105
Johan

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

$('form#myForm').trigger('submit.Rails');
57
Mild Fuzz

Dans Rails 3, le moyen préféré pour soumettre un formulaire ajax est d'utiliser Rails-ujs.

En gros, vous autorisez Rails-ujs à effectuer la soumission ajax pour vous (sans avoir à écrire de code js). Ensuite, il vous suffit d'écrire du code js pour capturer l'événement de réponse (ou d'autres événements) et faire votre travail.

Voici du code:

D'abord, utilisez l'option remote dans form_for pour que le formulaire soit soumis via ajax par défaut:

form_for :users, remote:true do |f|

Ensuite, lorsque vous souhaitez effectuer certaines actions en fonction du statut de la réponse ajax (par exemple, réponse réussie), écrivez la logique jscript comme suit:

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

Il y a plusieurs événements auxquels vous pouvez raccrocher.

33
lulalala

Pour soumettre le 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 gemme jquery-Rails (valeur par défaut de Rails 3.1). bundle install it puis Rails g jquery:install pour remplacer les fichiers de prototype par jquery.

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

13
bassneck

il est très important dans votre demande avec ajax d'arrêter le comportement par défaut, envoyez remote: true dans votre formulaire 

<%= 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
});
2
Ezequiel García

Rien ici ne fonctionnait pour moi, mon problème était que la bibliothèque modale de jQuery empêcherait mes formulaires d'être soumis via des données distantes si je créais une fenêtre modale, mais je trouvais un correctif.

Commencez par ajouter le plug-in jQuery Form à votre répertoire javascript actifs: http://malsup.github.io/jquery.form.js

Maintenant, remplacez la méthode d'envoi pour votre formulaire. Par exemple, vous pouvez 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);
        }
      })
    })

  })
0
Mike Bethany