RailsとjQueryで連動プルダウンを作成しましたが、プルダウンの内容が変わりません。原因が分からないのでご教示頂きたいです。

Question

発生している問題

地方プルダウンの結果によって、都道府県プルダウンの内容を変える機能を作っています
地方の結果をAjaxで送り、該当の都道府県を取得して、.js.erbにrenderするところまでは出来たと思うのですが表示が変わりません

結果もcompleted 200で成功してるように見え
原因が分からないのでご教示いただけますと幸いです...

※参考にしたサイト
http://itmemojp.blogspot.com/2012/10/rails.html

Started GET "/new_posts/search?area_id=4" for ::1 at 2019-09-16 11:35:44 +0900
Processing by NewPostsController#search as JSON
  Parameters: {"area_id"=>"4"}
通過：new_posts/search
  Rendering new_posts/search.js.erb
  Prefecture Load (0.4ms)  SELECT `prefectures`.* FROM `prefectures` WHERE `prefectures`.`area_id` = 4
  ↳ app/views/new_posts/search.js.erb:1
  Rendered new_posts/search.js.erb (3.0ms)
Completed 200 OK in 379ms (Views: 377.8ms | ActiveRecord: 0.4ms)

routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html

  root 'all_posts#all_post'
  get 'post_detail', to: 'post_details#post_detail'
  resources :new_posts do
    collection do
      get 'search'
    end
  end 
end

new.html.erb

<div class="form_body">
<%= form_for(@posts, url: new_posts_path) do |f| %>


<div class ="pulldown">場所：
<%= f.collection_select(:id, Area.all, :id, :area) %>
<%= render 'new_posts/search', {:f => f} %>
</div>
<br>

下記省略

_search.html.erb

<%= f.select(:prefecture_id, @prefectures, :id, :prefecture) %>

new_post.js

'use strict'


$(document).ready(function() {
    $("p").text("jQuery稼働てすと（稼働中）");


    $('#post_id').on('change', function() {
        var area_id = $('option:selected').val();
        console.log(area_id);

        $.ajax({
            type:'GET',
            url:'/new_posts/search', 
            data: {area_id: area_id},
            dataType:'json'
        });
        console.log('Ajax完了');
    });
});

new_posts_controller.rb

class NewPostsController < ApplicationController
    require 'pry'
    def new

        @posts = Post.new
        @prefectures = Prefecture.where(area_id: '1')

        respond_to do |format|
            format.html # new.html.erb
            format.json { render json: @posts }
          end
    end


    def create

        @Post = Post.new(post_params)

        @Post.save!

        redirect_to root_path
    end

    def search
        @prefectures = Prefecture.where(area_id: params[:area_id])
        area_id = params[:area_id]
        puts '通過：new_posts/search'

        render
    end

search.js.erb

$("#post_prefecture_id").html("<%= escape_javascript(options_for_select(@prefectures.map{ |prefecture| [prefecture.id, prefecture.prefecture] })) %>");

Comments

[m.ts10806]

初心者アイコンがありますのでタイトルにわざわざ入れる必要はありませんよ（タイトルに入れたところで要件ではないのでむしろ邪魔です）

[退会済みユーザー]

上のコメントはみられましたか？

[Biginner_A]

ご指摘ありがとうございます。
修正しました

[m.ts10806]

tonkoさん
催促不要です（煽ってるように受け取られます）

Biginner_Aさん
もう少し具体的に指示として書けばよかったですが「初心者アイコン」をつけてください。

[退会済みユーザー]

そうでしたね。すみませんでした。

Answer 1

最近ajax触ってないので自信はないのですが、思いつく限りの対応を挙げてみました。

error原因特定のために

ブラウザでF12キーを押すと開ける開発者ツールは利用されていますか？

search.js.erb 内で console.log(変数) を呼び出して、必要な変数が search.js.erb で利用できる状態になっているかどうか確かめてみてはいかがでしょう？

rubyの変数であれば

　console.log("<%= 変数名 %>");

で表示出来たような気がします。

どこでエラーが発生しているか特定できていないと、対策を取るのは難しいと思います。
※rails 側のエラーはない、という前提で話しています。

気になるところ（特に確信はないです）

また、$ajax 付近で設定している dataType ですが、 json にする必要はなかったような気がします。
そこにscriptと指定されている方もいるようなので、試してみる価値はあるかもしれません（ないかもしれません。。。）

あくまでももしかしたらなのですが、処理結果がerbではなくnew_post.js側に帰ってしまっていて、そのために処理が進んでいないかもしれないなと思いました。

Comments

[Biginner_A]

助言いただいた部分を確認してみようと思います...!