🖇️

link_toメソッドにajaxリクエストを指定する (EOTD No.14)

2020/12/30に公開

JavaScript

こちらAmetaです！今年最後のError Of The Dayです。

本日のエラー

シチュエーション

昨日の記事の実装を実際に試して見た時に発生したエラーです。

以下の部分テンプレートをjavascript形式のリクエストで呼び出すようにするように実装しました。

#app/views/dishes/_like.html.erb

<% if current_user.liked_by?(dish.id) %>
    <div class="heart-icon-align">
      <%= link_to image_tag("heart_filled.png", size: '20x20'), destroy_like_path(dish), method: :DELETE %>
      <span class='heart-count-dishes'><%= dish.likes.count %></span>
    </div>
  <% else %>
    <div class="heart-icon-align">
      <%= link_to image_tag("heart.png", size: '20x20'), create_like_path(dish), method: :POST %>
      <span class='heart-count-dishes'><%= dish.likes.count %></span>
    </div>
  <% end %>

likes_controllerのcreateアクションを実行した時に、今回のエラー画面が。

<%= link_to image_tag("heart.png", size: '20x20'), create_like_path(dish), method: :POST %>

以上のリンクをクリックした時にエラーが発生しました。

解決

remoteオプションERBタグ内の最後に追記したところ正常に作動しました。

<%= link_to image_tag("heart.png", size: '20x20'), create_like_path(dish), method: :POST, remoete: true %>

こちらのRailsガイドによると

<%= link_to "an article", @article, remote: true %>

はhtmlにおける

<a href="/articles/1" data-remote="true">an article</a>

と同じ扱いになるということです。

data-remoteについても調べて見ました。

data-remote = "true" is used by the Ruby On Rails framework to submit the form/link/button as an ajax request.

ajaxリクエストを送る事ができるRuby On Railsのフレイムワーク。
linkの他にもformやbuttonにも使用する事ができるみたいです。

SOTD(Summary Of The Day)

今日までドキュメントにjavascriptを書いて実装をしてきましたが、それではできることに限界があることに気がついてきました。

来年は実装の幅を広げるためにも,jqueryなどのフレームワークに挑戦していきたいです。

それでは皆さん良いお年を。。

本日のエラー

シチュエーション

解決

SOTD(Summary Of The Day)

Discussion