Invia modulo in rails 3 in modo Ajax (con jQuery)

Sono un principiante in rotaie e jQuery. Ho due moduli separati in una pagina e voglio inviarli separatamente in modo unjax (con jQuery). Questo è quanto ho ottenuto. Qualcuno può aggiungere o correggere questo codice per farlo funzionare. Sto usando Rails 3.1 e jQuery 1.6. Grazie in anticipo.

application.js

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

prima forma:

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

"savebutton"} %>

seconda forma:

  
Your current classs "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 ha la stessa forma di SchoolController

Tu vuoi:

  1. Interrompe il normale comportamento di submit.
  2. Mandalo tramite ajax al server.
  3. Ricevi una risposta indietro e cambia le cose di conseguenza.

Il seguente codice dovrebbe farlo:

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

Se si utilizza :remote => true nei propri moduli, è ansible inviarli con JavaScript con

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

Il modo preferito in Rails 3 per inviare una richiesta di form ajax è di utilizzare Rails-ujs.

Fondamentalmente tu permetti a Rails-ujs di fare l’ajax per te (e non avrai bisogno di scrivere alcun codice js). Quindi devi solo scrivere il codice js per catturare l’evento di risposta (o altri eventi) e fare le tue cose.

Ecco alcuni codici:

Per prima cosa, utilizza l’opzione remota in form_for così il modulo verrà inviato tramite ajax per impostazione predefinita:

 form_for :users, remote:true do |f| 

Quindi, quando si desidera eseguire un’azione basata sullo stato di risposta ajax (ad esempio, una risposta corretta), scrivere la logica javscript in questo modo:

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

Ci sono diversi eventi ai quali puoi fare affidamento.

Per inviare il modulo tramite AJAX potresti semplicemente passare :remote => true al form_for helper. Di default rails 3.0.x usa il prototipo js lib, ma puoi cambiarlo in jquery con la gem jquery-rails (che è l’impostazione predefinita per rails 3.1). bundle install e poi rails g jquery:install per sostituire i file prototipo con jquery.

Dopodiché dovrai solo gestire la richiamata. Dai un’occhiata a questo screencast

è molto importante nella tua richiesta con ajax interrompere l’impostazione di default, inviare remote: true nel tuo form_for

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

nella tua 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 }); 

Niente qui ha funzionato per me, il mio problema era che la libreria modale di jQuery avrebbe interrotto i miei moduli dall’essere inviati tramite dati remoti se avessi aperto una finestra modale, ma ho trovato una soluzione.

Innanzitutto aggiungi il plug-in jQuery al tuo asset directory javascript: http://malsup.github.io/jquery.form.js

Adesso sostituisci il metodo di invio per il tuo modulo. Ad esempio potresti fare qualcosa del genere:

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