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

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

ただいまの
回答率

90.35%

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

解決済

回答 1

投稿 編集

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

処理の流れは以下の通りです。
【都道府県のセレクトボックスを選択】
 ↓
【都道府県のセレクトボックスが変更されたら、jsでajaxを開始する】
    // Search page's ajax area.
    $("#都道府県のセレクトボックス").on("change", function() {

        var prefecture_id = $('option:selected').val();

        $.ajax({
            type:'GET',
            url:'/school/school_info/js_select_area/'+prefecture_id,
            dataType:'json'
        });
    });
 ↓
【school_infoコントローラーのjs_select_areaアクションに送信する】
    def js_select_area
        @areas = Area.where(prefecture_id: params[:prefecture_id])
    end
 ↓
【市町村を取得したら、viewを読み込む】
school/school_infos/js_select_area.js.erb
$('#js-select-area').html('<%= escape_javascript(render("school/school_infos/js_select_area", areas: @areas)) %>');
school/school_infos/_js_select_area.html.erb
<label>市町村</label>
<%= collection_select :school_info, :area_id, @areas, :id, :name %>

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

なにかご教授いただけたらありがたいです。
よろしくお願いします。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

htmlのIDと、JQueryのセレクタで指定しているIDが異なっているからでは?
<%= collection_select :school_info, :area_id, @areas, :id, :name %>
これの出力は、こんな風なはず
<select id="school_info_area_id" name="school_info[area_id]"><option value="1">北海道</option>
  <option value="2">青森県</option>
・
・
</select>
なので、JQueryのセレクタは、これのIDに合わせるべき
$("#school_info_area_id").on("change", function() {
  // 後略
非同期系の動作の時は、そもそもコントローラがきちんと呼び出しされているかを初めに確かめ、
コントローラが呼ばれていれば、コントローラメソッドの後処理を見直し、
コントローラが呼ばれていなければ、Javascriptが呼ばれているか確かめ、
Javascriptが呼ばれていれば、Javascriptの処理を見直し、
そもそもJavascriptが呼ばれていなければ、セレクタを見直す、
という風に切り分けるとバグを見つけやすいですよ。

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/12 19:49

    rifuchさん

    回答ありがとうございます!

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

    キャンセル

  • 2015/11/12 20:05

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

    キャンセル

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る