この記事では、テックアカデミー(Webアプリケーションコース)のメンタリング第11回目の内容について書いています。
内容としては、Ajax 通信や、あいまい検索についてです!
テックアカデミーのメンタリング第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回目を終えて|まとめ
ここまで、テックアカデミー(Webアプリケーションコース)のメンタリング11回目の内容について書いてきました。
今回は、JavaScript を使用したので、理解できない部分も多々あり、メンタリング時間内に全てを聞くとことはできませんでした。

ただ、Ajax 通信というものがどういうものなのか、ある程度理解できたことは大きな収穫です!
次回は、第12回目です!
テックアカデミーのWebアプリケーションコースを終えての記事も書いているので、よかったら見てみてください!

コメント