web-dev-qa-db-ja.com

Rails 3でajaxの方法でフォームを送信する（jQueryを使用）

私はRailsとjQueryの初心者です。1ページに2つの個別のフォームがあり、jQueryを使用してajaxの方法で別々に送信します。このコードを追加または修正して、機能するようにしています。Rails 3.1およびjQuery 1.6を使用しています。よろしくお願いします。

application.js

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

最初の形式：

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

2番目の形式：

<%=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はSchoolControllerと同じ形状です

jqueryajaxruby-on-rails-3
76
katie

あなたはしたい：

  1. 送信の通常の動作を停止します。
  2. Ajaxを介してサーバーに送信します。
  3. 返信を受け取り、状況に応じて変更してください。

以下のコードでそれを行う必要があります。

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

フォームで:remote => trueを使用する場合は、JavaScriptを使用してフォームを送信できます

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

Rails 3でajaxフォームを送信するための好ましい方法は、Rails-ujsを利用することです。

基本的に、Rails-ujsにajaxの送信を許可します（jsコードを記述する必要はありません）。次に、jsコードを記述して、応答イベント（または他のイベント）をキャプチャし、自分のことを行います。

以下にコードを示します。

まず、remoteオプションでform_forを使用して、フォームがajax経由で送信されるようにしますデフォルトでは：

form_for :users, remote:true do |f|

次に、ajaxの応答ステータス（成功した応答など）に基づいて何らかのアクションを実行する場合、次のようなjavscriptロジックを記述します。

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

いくつかのイベント があり、フックすることができます。

33
lulalala

AJAX経由でフォームを送信するには、:remote => trueをform_forヘルパーに渡すだけです。デフォルトではRails 3.0.xはプロトタイプjsを使用しますlib。ただし、jquery-Rails gem（Rails 3.1）のデフォルトです）を使用してjqueryに変更できます。bundle install it、次にRails g jquery:install toプロトタイプファイルをjqueryに置き換えます。

その後、コールバックを処理する必要があります。 this screencastをご覧ください

13
bassneck

ajaxを使用したリクエストでは、動作のデフォルトを停止し、form_forでremote：trueを送信することが非常に重要です

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

<% end %>

あなたの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
Ezequiel García

ここでは何もうまくいきませんでした。私の問題は、jQueryモーダルライブラリがモーダルウィンドウを表示すると、フォームがリモートデータ経由で送信されなくなることでしたが、修正が見つかりました。

最初にjQueryフォームプラグインをアセットのjavascriptディレクトリに追加します。 http://malsup.github.io/jquery.form.js

次に、フォームの送信メソッドをオーバーライドします。たとえば、次のようなことができます。

= 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