
シンタロー
テックアカデミーWebアプリケーションコース11回目となるメンタリング。今回はajax通信・あいまい検索についての内容です!
前回までのメンタリング
【第11回目】テックアカデミーメンタリング内容
第11回目となるメンタリングの内容は…
- ajax通信
- あいまい検索
上記のような感じで学部を選択すると、それに対応する学科が選択できるというもの。例えば、経済学部を選択すると、自動的に経済学科のみが選択肢に出てくるということです。
順を追って説明していきます。
department_idカラムを追加
学部(department)と学科(subject)を紐付けるために、department_idを持たせます。
$ rails c
を起動して、学部と学科を紐付けていきます。
s = Subject.first s.department_id = 1 s.save
こんな感じで紐付けを行っていけばOKです!
routeの設定
次にルートを設定します。
resources :users, only: [:index, :show, :new, :destroy, :create] do resources :messages, only: [:index, :create, :destroy] collection do get :subject_select end member do get :followings get :followers get :favorites end end
ここでは、
collection do get :subject_select end
を追加しました。
新規ファイルの作成
subject_select.js.erbファイルを作り、以下のようなコードを記述します。
$("#subject_result").html('<%=j collection_select :user, :subject_id, @subjects, :id, :name, :prompt => "選択してください", class: 'form-control' %>');q
ajax通信を実装
ajax通信:サーバー間で非同期通信を行えるもの。
非同期通信と言っても難しいですよね。

シンタロー
簡単にいうと、クリックしても画面が白くならずに画面遷移がない通信のことです
ajax通信を行うため、学部学科を選択できるページがある下に、
<script> $('#user_department_id').change(function() { console.log("hello"); $.ajax({ url: '<%= subject_select_users_path %>', type: 'get', data:{ user_department_id: $('#user_department_id').val() } }) }); </script>
を追加します。
これで学部学科を紐付けて、ajax通信を行えるようになりました。
テックアカデミーメンタリング11回目【まとめ】
今回はJavaScriptを使用したので理解できない部分も多々あり、メンタリング時間内に全てを聞くということはできませんでした。
しかし、ajax通信というものがどういうものなのかということがある程度理解できたことは大きな収穫です。
分からなかったコードは自分でググりながら理解しようと思います。

シンタロー
オリジナルサービスもほぼ完成したので、次回からのメンタリングまでに何か質問できることを考えておきたいところ

【体験談】テックアカデミーメンタリング12回目:ViewでのデバッグとUserの編集ページ
テックアカデミーWebアプリケーションコース8週間プラン第12回目となるメンタリング内容について書いています。具体的には、Viewでのデバッグ方法やユーザーの編集ページでの値の渡し方などについてです。
コメント