Pertanyaan Kirim formulir di rel 3 dengan cara ajax (dengan jQuery)


Saya seorang pemula di rel dan jQuery. Saya memiliki dua bentuk terpisah dalam satu halaman dan saya ingin mengirimkannya secara terpisah dengan cara ajax (dengan jQuery). Sejauh ini saya dapat. Adakah yang bisa menambahkan atau memperbaiki kode ini untuk membuatnya bekerja. Saya menggunakan Rails 3.1 dan jQuery 1.6. Terima kasih sebelumnya.

application.js

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

bentuk pertama:

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

bentuk kedua:

<%=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 dalam bentuk yang sama dengan SchoolController


75
2017-07-17 10:45


asal


Jawaban:


Yang kamu ingin:

  1. Hentikan perilaku pengiriman normal.
  2. Kirim melalui ajax ke server.
  3. Dapatkan balasan dan ubah hal-hal yang sesuai.

Kode di bawah ini harus melakukan itu:

$('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



Jika Anda menggunakan :remote => true pada formulir Anda, Anda bisa mengirimkannya dengan JavaScript

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

57
2018-04-15 14:56



Cara yang lebih disukai di Rails 3 untuk melakukan pengiriman formulir ajax adalah dengan menggunakan Rails-ujs.

Pada dasarnya Anda mengizinkan Rails-ujs untuk melakukan ajax submit untuk Anda (dan Anda tidak perlu menulis kode js apa pun). Kemudian Anda hanya menulis kode js untuk menangkap acara respons (atau acara lainnya) dan melakukan hal Anda.

Berikut beberapa kode:

Pertama, gunakan terpencil opsi dalam form_for jadi formulir akan dikirimkan melalui ajax secara default:

form_for :users, remote:true do |f|

Kemudian ketika Anda ingin melakukan beberapa tindakan berdasarkan status tanggapan ajax (mis. Respons yang berhasil), tulis logika javscript seperti ini:

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

Ada beberapa acara yang dapat Anda kaitkan.


33
2018-05-09 10:40



Untuk mengirimkan formulir melalui AJAX Anda hanya bisa lulus :remote => true ke form_for pembantu. Secara default rel 3.0.x menggunakan prototipe js lib, tetapi Anda dapat mengubahnya ke jquery dengan jquery-rails permata (yang merupakan standar untuk rel 3.1). bundle install dan kemudian rails g jquery:install untuk mengganti file prototipe dengan jquery.

Setelah itu Anda hanya perlu menangani callback. Melihat ini screencast


13
2017-07-17 12:42



ini sangat penting dalam permintaan Anda dengan ajax menghentikan default beahavior, mengirim remote: true di form_for Anda

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

<% end %>

di ajax Anda

$(".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



Tidak ada di sini yang bekerja untuk saya, masalah saya adalah perpustakaan modal jQuery akan memecah formulir saya agar tidak dikirimkan melalui data jarak jauh jika saya membuka jendela modal, tetapi saya menemukan perbaikan.

Pertama, tambahkan Plugin Formulir jQuery ke direktori javascript aset Anda: http://malsup.github.io/jquery.form.js

Sekarang ganti metode pengiriman untuk formulir Anda. Misalnya Anda dapat melakukan sesuatu seperti ini:

= 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