Senden Sie das Formular in Schienen 3 auf Ajax-Weise (mit jQuery).

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

application.js

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

erste Form:

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

zweite Form:

<%=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 hat die gleiche Form wie SchoolController

Du möchtest:

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

Der folgende Code sollte dies 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 :remote => trueauf Ihren Formularen verwenden, können Sie sie mit JavaScript mit senden

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

Die bevorzugte Methode in Rails 3 zum Senden von Ajax-Formularen ist die Verwendung von Rails-UJs.

Grundsätzlich erlauben Sie Rails-ujs, die Ajax-Übermittlung für Sie durchzuführen (und Sie müssen keinen js-Code schreiben). Dann schreiben Sie einfach js Code, um das Antwortereignis (oder andere Ereignisse) zu erfassen und Ihr Ding zu machen.

Hier sind einige Codes:

Verwenden Sie zunächst die Remote- Option in form_for, damit 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 ausführen möchten (z. B. erfolgreiche Antwort), 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 verschiedene Ereignisse, an die Sie sich anschließen können.

Um das Formular über AJAX einzureichen, können Sie es einfach :remote => truean den form_forHelfer weiterleiten. Standardmäßig verwendet Rails 3.0.x den Prototyp js lib. Sie können ihn jedoch mit dem Gem in jquery ändern jquery-rails(dies ist der Standard für Rails 3.1). bundle installes und dannrails g jquery:install die Prototyp-Dateien durch jquery zu ersetzen.

Danach müssen Sie nur noch den Rückruf bearbeiten. Schauen Sie sich diesen Screencast an

Es ist sehr wichtig, dass Sie bei Ihrer Anfrage mit Ajax die Verhaltensvorgabe stoppen. Senden Sie 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
});

Hier funktionierte nichts für mich. Mein Problem war, dass die jQuery-Modalbibliothek meine Formulare nicht über Remote-Daten senden konnte, wenn ich ein Modalfenster aufrief, aber ich fand einen Fix.

Fügen Sie zuerst das jQuery Form Plugin zu Ihrem Assets-Javascript-Verzeichnis hinzu: http://malsup.github.io/jquery.form.js

Überschreiben Sie nun 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);
        }
      })
    })

  })