Gửi biểu mẫu trong rails 3 theo cách ajax (với jQuery)

Tôi là người mới bắt đầu về rails và jQuery. Tôi có hai biểu mẫu riêng biệt trong một trang và tôi muốn gửi chúng riêng biệt theo cách ajax (với jQuery). Đây là cách tôi đã đi xa. Ai có thể thêm hoặc sửa mã này để làm cho nó hoạt động. Tôi đang sử dụng Rails 3.1 và jQuery 1.6. Cảm ơn bạn trước.

application.js

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

hình thức đầu tiên:

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

Dạng thứ hai:

<%=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 có cùng hình dạng với SchoolController

Bạn muốn:

1. Ngừng hành vi thông thường của gửi.
2. Gửi nó thông qua ajax đến máy chủ.
3. Nhận trả lời lại và thay đổi mọi thứ cho phù hợp.

Đoạn mã dưới đây sẽ làm điều đó:

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

Nếu bạn sử dụng :remote => truetrên các biểu mẫu của mình, bạn có thể gửi chúng bằng JavaScript với

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

Cách ưa thích trong Rails 3 để gửi biểu mẫu ajax là sử dụng Rails-ujs.

Về cơ bản, bạn cho phép Rails-ujs thực hiện gửi ajax cho bạn (và bạn sẽ không cần viết bất kỳ mã js nào). Sau đó, bạn chỉ cần viết mã js để nắm bắt sự kiện phản hồi (hoặc các sự kiện khác) và thực hiện công việc của bạn.

Đây là một số mã:

Đầu tiên, sử dụng tùy chọn từ xa trong form_for để biểu mẫu sẽ gửi qua ajax theo mặc định:

form_for :users, remote:true do |f|

Sau đó, khi bạn muốn thực hiện một số hành động dựa trên trạng thái phản hồi ajax (ví dụ: phản hồi thành công), hãy viết logic javscript như sau:

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

Có một số sự kiện mà bạn có thể tham gia.

Để gửi biểu mẫu qua AJAX, bạn chỉ cần chuyển :remote => truecho người form_fortrợ giúp. Theo mặc định, rails 3.0.x sử dụng js lib nguyên mẫu, nhưng bạn có thể thay đổi nó thành jquery với jquery-railsgem (là mặc định cho rails 3.1). bundle installnó và sau đó rails g jquery:installđể thay thế các tệp nguyên mẫu bằng jquery.

Sau đó, bạn sẽ chỉ cần xử lý lệnh gọi lại. Hãy xem video màn hình này

điều này rất quan trọng trong yêu cầu của bạn với ajax, hãy dừng mặc định beahavior, gửi điều khiển từ xa: true trong form_for của bạn

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

<% end %>

trong ajax của bạn

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

Không có gì ở đây hiệu quả với tôi, vấn đề của tôi là thư viện phương thức jQuery sẽ ngăn các biểu mẫu của tôi được gửi qua dữ liệu từ xa nếu tôi đưa ra một cửa sổ phương thức, nhưng tôi đã tìm thấy cách khắc phục.

Đầu tiên, hãy thêm Trình cắm biểu mẫu jQuery vào thư mục javascript nội dung của bạn: http://malsup.github.io/jquery.form.js

Bây giờ ghi đè phương thức gửi cho biểu mẫu của bạn. Ví dụ, bạn có thể làm điều gì đó như sau:

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

  })