Help us understand the problem. What is going on with this article?

jQuery内からRailsのActionを叩く

More than 5 years have passed since last update.

JQueryとの連携方法でいつもとまどう点をまとめとこう。というよりも、jQueryからRailsのアクションを呼ぶ方法。初心者にはなかなか流れが掴みにくいです。
用途は限定されるかもしれないですが、たとえばselectの変更をjQueryで検知したときに、RailsでActionを叩いてsessionの値を書き換えるときなどは次のようにする。

まず、流れ。
1)jQueryでselectの変更を検知する
2)jQuery内からURLを指定してAjax通信する
3)2)のURLがActionを叩くようにルーティングを設定する
4)2)のURLに従って、html.erbファイルを設置する
5)後は好きなようにAction内で処理をする

sample.html.erb
<select id="year_select" name="y" style="width:100px;">
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013" selected="selected">2013</option>
    <option value="2014">2014</option>
</select>

例えば上のようなviewがあったとします。
#year_selectの変更を検知するjQueryが下記。

sample.js
$("select#year_select").change(function(){
        $.ajax({
            url: "projects/change_session_year",
            type: "GET",
            data: {year : $(":selected").attr("value"),
                    id: 1,
                    mode: 'hoge',
                    type: 'entry'
                    },
            dataType: "html",
            success: function(data) {
                alert("success");
            },
            error: function(data) {
                alert("errror");
            }
        });
    });

$.ajax はAjax通信するための構文。
url: 通信先のURLを指定。ルートからの指定でいいはず
data: 通信先に渡すパラメータ。Actionからはもちろんparams[]で取得できる
success,error 通信成功、失敗時の処理

慣れないとわかりにくいけど、通信後、戻り値がfunction(data)として渡されます。このdataをいじくってテンプレートを書き換えるというのが王道の使い方だと思いますが、ここではテンプレートはいじりません。

で、projects/change_session_year というURLでルーティングを設定します。

routes.rb
    get "projects/change_session_year"

次、要注意です。これを忘れたがために嵌って時間ロスるすことがよくあります。
ルーティングに対応するテンプレートファイルを設置する!この例であれば、

projects/change_session_year.html.erb を忘れずに設置してください!中身は空でいいと思います。

$.ajaxで通信した際、このテンプレートが無いとエラーが返ってしまいます。普通のRailsの処理であれば、恐らく、missing_tamplateエラーが出るのですぐにわかるんだけど、Ajaxの場合は何も言わず失敗するので、気づくのに時間がかかるんです。

後は、projectsコントローラーにchange_session_yearアクションメソッドを用意して、好きなように処理を入れればOKです。

projects_controller.rb
    def change_session_year
        session[:year] = 2013
    end

肝は4)のテンプレートを忘れないかどうか、じゃないでしょうか。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away