複数Webサイトに対する検索サイトを作り始めて２週間ちょい、だいぶ出来上がってきました。 練習のつもりで作ってたものですが、Webサービスとしてリリースしてみたい・・・頑張ろう
今日のまとめ
- 検索ボタンを押してから結果が表示されるまでの間、Loading中にくるくる回るやつを表示できた
- CSSでborder-radiusを指定することで、擬似的にボタンの形をしたリンクを作成できた
Ajax実行時にcoffeescriptを実行する
今回書いたコードは以下の通りです。
----- application.html.erb
<body>
<%= yield %>
<div class="js-loading"><%= image_tag "loading.gif", class: "loading_icon" %></div>
</body>
で、↓でAjax通信時の制御をします
----- pages.coffee
$loading = $('.js-loading')
$search_btn = $('.search_btn')
$search_btn.on 'click', ->
$loading.show()
$('#request_ajax_update')
.on 'ajax:complete' ->
response = event.detail[0].response
$('#updated_by_ajax').html(response)
$loading.fadeOut 300
検索ボタン（search_btn)をクリックした場合、cssでdisplay = noneで非表示にしていた.js-loadingを表示させます。 検索処理が終わったら、Controllerのrenderでレスポンスを呼び出し、htmlを更新するとともにfadeOutでくるくるのgif画像を非表示にします。 下記のサイトを参考にしました。gif画像も下記サイトのリンクから。
Ajaxが発生したら、ローディング画像(gifアニ)をオーバーレイで表示[For Rails]
CSSの方は、下記みたいにリンクで挟んで、その中のClass（下記ならproduct_item_target）のborder-radiusをいじってbackground-colorを調整すればいけますよって話です。
----- _ajax_partial.html.erb
<%= link_to result["link"], target: "_blank" do %>
<div class="product_item_target"><span class="product_item_target_text"><%= result["target"] %></span></div>
<% end %>割と自分にしかわからない書き方になってしまった気がする・・・難しい・・・ 明日はスマホで表示した時にいい感じになるよう調整するぞ