Reichen Sie das Formular in Rails 3 auf eine Ajax-Weise ein (mit jQuery)

Ich bin ein Anfänger in Rails und jQuery. Ich habe zwei separate Formulare auf einer Seite und möchte sie getrennt in Ajax (mit jQuery) einreichen. So weit bin ich gekommen. Kann jemand diesen Code hinzufügen oder reparieren, damit er funktioniert? Ich verwende Rails 3.1 und jQuery 1.6. Vielen Dank im Voraus.

application.js

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

erste Form:

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

"savebutton"} %>

zweite Form:

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

"savebutton"} %>

Schulcontroller

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

CourseController ist in der gleichen Form wie SchoolController

   

Du möchtest:

  1. Stoppen Sie das normale Verhalten von submit.
  2. Senden Sie es über Ajax an den Server.
  3. Bekommen Sie eine Antwort zurück und ändern Sie die Dinge entsprechend.

Der folgende Code sollte das tun:

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

Wenn Sie in Ihren Formularen :remote => true , können Sie diese mit JavaScript mit abschicken

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

Der bevorzugte Weg in Rails 3, eine Ajax-Form-Submission durchzuführen, ist die Verwendung von Rails-ujs.

Grundsätzlich erlauben Sie Rails-ujs, den Ajax für Sie zu senden (und Sie müssen keinen js-Code schreiben). Dann schreibst du einfach js code, um das Response-Ereignis (oder andere Ereignisse) zu erfassen und dein Ding zu machen.

Hier sind ein paar Code:

Verwenden Sie zunächst die Remote- Option in form_for, so dass das Formular standardmäßig über Ajax gesendet wird:

 form_for :users, remote:true do |f| 

Wenn Sie dann eine Aktion basierend auf dem Ajax-Antwortstatus (z. B. erfolgreiche Antwort) ausführen möchten, schreiben Sie die javscript-Logik wie folgt:

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

Es gibt mehrere Ereignisse, an die Sie sich wenden können.

Um das Formular über AJAX zu senden, können Sie einfach übergeben :remote => true zum form_for Helper. Standardmäßig verwendet rails 3.0.x den Prototyp js lib, aber Sie können ihn in jquery mit dem jquery-rails (das ist der Standard für Rails 3.1) ändern. bundle install es und rails g jquery:install dann rails g jquery:install , um die Prototyp-Dateien durch jquery zu ersetzen.

Danach müssen Sie nur den callback behandeln. Schau dir diesen Screencast an

Es ist sehr wichtig in Ihrer Anfrage mit Ajax stoppen Sie den Standard-Standard, senden remote: True in Ihrem form_for

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

in deinem 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 }); 

Nichts funktionierte für mich, mein Problem war, dass die jQuery-Modal-Bibliothek meine Formulare davon abhalten würde, über Remote-Daten gesendet zu werden, wenn ich ein modales Fenster aufrief, aber ich fand eine Lösung.

Fügen Sie zuerst das jQuery-Formular-Plugin zu Ihrem JavaScript-Verzeichnis “acresents” hinzu: http://malsup.github.io/jquery.form.js

Überschreiben Sie jetzt die Übermittlungsmethode für Ihr Formular. Zum Beispiel könnten Sie so etwas tun:

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