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


Ich bin ein Anfänger in Schienen 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:

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

Schulcontroller

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 ist in der gleichen Form wie SchoolController


75
2017-07-17 10:45


Ursprung


Antworten:


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

105
2017-07-17 11:22



Wenn du benutzt :remote => true Auf Ihren Formularen können Sie diese mit JavaScript mit einreichen

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

57
2018-04-15 14:56



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:

Benutze zuerst die Fernbedienung Option in form_for Das Formular wird standardmäßig per Ajax gesendet:

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 dem Sie hängen können.


33
2018-05-09 10:40



Um Formulare über AJAX einzureichen, könntest du einfach bestehen :remote => true zum form_for Helfer. Standardmäßig verwendet rails 3.0.x den Prototyp js lib, aber Sie können ihn mit dem Befehl jquery in jquery ändern jquery-rails Gem (das ist der Standard für Schienen 3.1). bundle install es und dann rails g jquery:install um die Prototypdateien durch jquery zu ersetzen.

Danach müssen Sie nur den Rückruf behandeln. Sieh dir das an Dies Screencast


13
2017-07-17 12:42



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

2
2018-03-29 15:52



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

  })

0
2018-01-31 22:13