質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

3882閲覧

railsのフォームのセレクトボックスをajax処理できない

tamura_taiyou

総合スコア7

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2015/11/11 04:41

編集2015/11/11 04:43

初めて質問させていただきます。
今回開発しているサービスでフォーム(form_for)内の都道府県(セレクトボックス)を選択したら、それに関連する市町村を表示する処理を書いたのですが、うまく処理できません。

処理の流れは以下の通りです。
【都道府県のセレクトボックスを選択】

【都道府県のセレクトボックスが変更されたら、jsでajaxを開始する】

jquery

1 // Search page's ajax area. 2 $("#都道府県のセレクトボックス").on("change", function() { 3 4 var prefecture_id = $('option:selected').val(); 5 6 $.ajax({ 7 type:'GET', 8 url:'/school/school_info/js_select_area/'+prefecture_id, 9 dataType:'json' 10 }); 11 });


【school_infoコントローラーのjs_select_areaアクションに送信する】

rails

1 def js_select_area 2 @areas = Area.where(prefecture_id: params[:prefecture_id]) 3 end


【市町村を取得したら、viewを読み込む】
school/school_infos/js_select_area.js.erb

rails

1$('#js-select-area').html('<%= escape_javascript(render("school/school_infos/js_select_area", areas: @areas)) %>');

school/school_infos/_js_select_area.html.erb

rails

1<label>市町村</label> 2<%= collection_select :school_info, :area_id, @areas, :id, :name %>

このように処理を書いているのですが、反映されません。

なにかご教授いただけたらありがたいです。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

htmlのIDと、JQueryのセレクタで指定しているIDが異なっているからでは?

html

1<%= collection_select :school_info, :area_id, @areas, :id, :name %> 2これの出力は、こんな風なはず 3<select id="school_info_area_id" name="school_info[area_id]"><option value="1">北海道</option> 4 <option value="2">青森県</option> 567</select>

なので、JQueryのセレクタは、これのIDに合わせるべき

JQuery

1$("#school_info_area_id").on("change", function() { 2 // 後略

非同期系の動作の時は、そもそもコントローラがきちんと呼び出しされているかを初めに確かめ、
コントローラが呼ばれていれば、コントローラメソッドの後処理を見直し、
コントローラが呼ばれていなければ、Javascriptが呼ばれているか確かめ、
Javascriptが呼ばれていれば、Javascriptの処理を見直し、
そもそもJavascriptが呼ばれていなければ、セレクタを見直す、
という風に切り分けるとバグを見つけやすいですよ。

あと、自動生成されるIDなんかは、最終的にはレンダリング結果のソースを見て確認すると間違いないです。

あ、それから、js_select_areaメソッドのレンダラでHTMLを差し込む対象となっている#js-select-areaが指定されている要素は元のHTMLに入ってますよね?
これがないと後処理のHTML追記が動きません。
(ソースが省略されていると思うので、蛇足かもしれませんが)

投稿2015/11/12 00:21

編集2015/11/12 00:26
rifuch

総合スコア1901

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tamura_taiyou

2015/11/12 10:49

rifuchさん 回答ありがとうございます! idのほうは、あっています。 そして、今さっきjsのajax送信の処理の dataType:'json' を削除した所動作しました!!!
rifuch

2015/11/12 11:05

あ、結構外してましたね。dataType:'json'にすると、パラメータをJSON形式で渡してしまうので、コントローラ側でパラメータを処理できないので、そこで止まっていたんですね。 抜けてました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問