作ったもの、プログラミングで共有できそうなこと、IT関連でやってみたことなど、なんでも書いていきます。ヤドン可愛い

複数Webサイトに対する検索サイトを作り始めて2週間ちょい、だいぶ出来上がってきました。 練習のつもりで作ってたものですが、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 %>

割と自分にしかわからない書き方になってしまった気がする・・・難しい・・・ 明日はスマホで表示した時にいい感じになるよう調整するぞ

この記事へのコメント

まだコメントはありません