Railsのフォームでajaxでメソッドを叩いて値を更新する
なんて書けば良いのかわかんないけど、
Railsでつくったフォームの入力値をとってきて、
（フォームは送信せず）
なんかメソッドたたいて、返って来た値をつかって
フォームを更新する、みたいなことがやりたかった。
すごい簡単にいうと、インターネット上で住所入力するとき、
郵便番号いれて、住所がぱぱっと入力されるみたいなやつが
やりたかった。
メソッドも自分でつくります。
フォームの値をとってくる
これはJSでできる！
Railsは適当にJS読み込んでくれるので、
そこに書く。
ここを参考にした。
<%= f.text_field :url%>
というフォームがもともとあって、
<%= f.text_field :url , :id => 'url' %>
こんな感じで書くとよい。
idを指定するだけではうまくいかなかったので、
getElementByIdをつかった。
alertまたはconsole.logで確認しておく。
メソッドの準備
メソッドのルーティングをしておく。
getメソッドにする。
クエリで受け取るので、その変数をurlとすると、
params[:url]でメソッド側から受け取れる。
処理を書いて、最終的にテキストで今回は出すので、
render text:"テキスト"
と書いておく。
メソッドがちゃんと動作するか、
直接叩いて確認しておく。
~/メソッドのroute?url=hogehoge
のようにブラウザに入れて、"テキスト"がページに出ればOKです。
このときparams[:url]はhogehogeになります。
【参考にしたページ】
Railsでレスポンスを返すメソッドについての簡単勉強メモ - light log
実はここが一番つまったところ。
Ajax処理を書く
フォームはそのまま送信せず残しているので、
Ajaxでメソッドを叩きます。上でかいているJSの続きに書けばOKです。
$.ajax({
type: "GET",
data: 'url=' + url_string,
success: function(data) {
成功したときの処理
},
error: function() {
失敗したときの処理
}
という感じにかきます。これは上のメソッドで受け取る形にあわせているので、
dataのところは自分の好きなようにしてください。
url_stringは最初のJSで取得したデータを入れている変数です。
ajaxでtypeをGETにすると、クエリでうまく渡せるようです。
上でrenderにしたテキストをsuccessのdataで受け取れます。
【参考にしたページ】
ダメ男のブログ: Ruby on Rails3でlink_toでAjax処理
最後にJSで値を入れる
successのdataにメソッドからrenderで指定した値がはいっているので、
最後にまたgetElementByIdで値をいれます。
ちょっと時間がかかるので、ぐるぐるなんかだせるといいですねー
