rails 3でajaxでフォームを送信する(jQuery使用)
2023-09-08 10:33:16
質問
私はrailsとjQueryの初心者です。私は1つのページに2つの別々のフォームを持っていて、私はそれらをajax方法で別々に送信したいと思っています(jQueryで)。これは私が得た方法です。誰かがそれを動作させるためにこのコードを追加または修正することができます。私はRails 3.1とjQuery 1.6を使用しています。事前にありがとうございます。
アプリケーション.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%>
第二形態
<%=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と同じ形で
どのように解決するのか?
あなたはしたい。
- submitの通常の動作を停止します。
- サーバーにajaxで送信する。
- 返信をもらい、それに応じて変更する。
下のコードがそうしてくれるはずです。
$('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
});
関連
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] jQueryで現在のURLを取得する?
-
[解決済み] jQueryを使ったAjaxリクエストの中断
-
[解決済み] jQueryでフォームデータをJavaScriptオブジェクトに変換する
-
[解決済み] jQuery Ajax呼び出し後のリダイレクトリクエストを管理する方法
-
[解決済み] jQuery AJAX送信フォーム
-
[解決済み] セレクトした要素の外側のHTMLを取得する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jQueryで複数のクラスを持つ要素を選択するにはどうすればよいですか?
-
[解決済み] GoogleのホストされたjQueryを使用する最良の方法、しかしGoogleの私のホストされたライブラリにフォールバックすることは失敗します。
-
[解決済み] jQuery に何かを実行する前にすべての画像の読み込みを待つように指示する公式な方法
-
[解決済み] JQueryでラジオボタンがチェックされているかどうかを調べる?
-
[解決済み] jQueryを使って「Please Wait, Loading...」というアニメーションを作成するにはどうすればよいですか?
-
[解決済み] jQueryは要素のレンダリングされた高さを取得しますか?
-
[解決済み] jQueryでフォームフィールドをクリアする
-
[解決済み] jQuery セレクタ。Id Ends With?
-
[解決済み] jQuery removeClass ワイルドカード
-
[解決済み] jQueryでval()がchange()をトリガーしない