テックアカデミーメンタリング11回目:ajax通信やあいまい検索のようなもの

テックアカデミー第11回目メンタリング~ajax通信、あいまい検索のようなもの~テックアカデミー

TechAcademy [テックアカデミー]Webアプリケーションコース(8週間プラン)11回目となるメンタリング。ajax通信・あいまい検索についての内容です。

 

前回までのメンタリング

 

【第11回目】メンタリング内容

第11回目となるメンタリングの内容は、

学部・学科選択

 

このような感じで学部を選択すると、それに対応する学科が選択できるというもの。例えば、経済学部を選択すると、自動的に経済学科のみが選択肢に出てくるということです。

 

順を追って説明していきます。

 

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でのデバッグ方法やユーザーの編集ページでの値の渡し方などについてです。

コメント