it-swarm.com.de

Senden Sie ein Formular in Rails 3 ajax (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-Art (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

75
katie

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 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
});
105
Johan

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

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

In Rails 3 ist es die beste Methode, Ajax-Formulare zu übermitteln, indem Sie Rails-ujs verwenden.

Grundsätzlich erlauben Sie Rails-ujs, die Ajax-Übergabe für Sie auszufü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 auszuführen.

Hier sind einige Codes:

Verwenden Sie zuerst die Option remote in form_for, damit das Formular standardmäßig über ajax übermittelt wird:

form_for :users, remote:true do |f|

Wenn Sie dann eine Aktion ausführen möchten, die auf dem Status der Ajax-Antwort basiert (z. B. erfolgreiche Antwort), schreiben Sie die Javscript-Logik folgendermaßen:

$('#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 anschließen können.

33
lulalala

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

Danach müssen Sie nur noch den Rückruf bearbeiten. Werfen Sie einen Blick auf this screencast

13
bassneck

es ist sehr wichtig in Ihrer Anfrage mit ajax die Verhaltensvorgabe zu stoppen, remote: true in Ihrer form_for zu senden 

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

Nichts hier funktionierte für mich, mein Problem war, dass die jQuery-Modalbibliothek meine Formulare nicht mehr über Remote-Daten senden würde, wenn ich ein modales Fenster öffnete, aber ich fand eine Lösung.

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

Jetzt überschreiben Sie die Submit-Methode 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);
        }
      })
    })

  })
0
Mike Bethany