[初学者向け]Ajax 対応のハイパーリンク を 生成

環境

• ruby 2.3.1
• rails 5.0.6

手順リスト(jQueryを使用した方法)

1. turbolinksを外す
2. formまたはlink_toにremote属性をセット（remote: true）
3. 対応するアクションにjsファイルに飛ぶよう設定
4. 対応するJSファイルを作成

[図解]Ajax通信の流れ

①非同期通信の発生

• 上記の場合linkにAjaxを導入したときは、ボタンを押した時に「 非同期通信を行いなさい 」という指令がControllerに飛びます。

②JSの応答

• 非同期通信を行うよう指令を受けたControllerは指定のアクションを実行し、その後テンプレートファイルを読み込みにかかります。
• 通常ここではフォーマットを指定しない限りHTMLファイルが読み込まれますが、「非同期通信を行いなさい」と指定されたControllerはHTMLファイルを読み込まず アクション名と対応したJSファイル を読み込みにかかります。
• edit アクションを実行したのであれば対応するJSファイルは edit.js.erb です。

③スクリプトの実行

• JSファイルが読み込まれると中に記述してあるスクリプトを実行し、一連の処理を終了します。
• このスクリプトに「 ビューの中のこの部分をこのように変更しなさい 」という指示を織り込むことで、ページリロードせずともページ内の一部表示が再描画されるのです。

1. turbolinksを外す

なぜ、turbolinksを外すかと言うとJavaScriptとの共存に関する問題でうまくAjax通信が行われないから
詳しい知りたい方は以下のリンクを見てください

Turbolinksさんと上手く付き合う10の方法
Turbolinksをオフしないためにやった事
Rails4でturbolinksを謳歌するためのまとめ
Turbolinks

app/views/layouts/application.html.erb

# 修正前
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

# 修正後'data-turbolinks-track': 'reload'を削除
<%= stylesheet_link_tag    'application', media: 'all' %>
<%= javascript_include_tag 'application' %>

app/assets/javascripts/application.js

//= require turbolinks
# 削除

Gemfile

gem 'turbolinks', '5.0.1'
# 削除かコメントアウトして bundle install

2. link_toにremote属性をセット（remote: true）

app/views/shared/_comment_area.html.erb

〜〜〜
　　　　　　<div id="user_comment_<%= comment.id %>">
　　　　　　　　<%= comment.content %>
　　　　　　</div>
　　　　</div>
　　</td>
<% if current_user.my_comment?(comment) %>
<!-- コメント編集ボタン -->
<li class="list-inline-item edit_comment_btn<%= comment.id %>">
  <%= link_to content_tag(:i, "", class: "fa fa-clipboard"),
              edit_board_comment_path(board, comment),
              class: "edit",
           →  remote: true  %>
</li>
〜〜〜

3. 対応するアクションにjsファイルに飛ぶよう設定

app/controllers/comments_controller.rb

〜〜〜
  def edit
    respond_to do |format|
      format.js
    end
  end
〜〜〜

4. 対応するJSファイルを作成

app/views/comments/edit.js.erb

〜〜〜
<!-- コメント編集ボタン -->
$("#user_comment_<%= @comment.id %>").replaceWith(
  "<%= j(render 'shared/comment_form', { comment: @comment, board: @board } ) %>");
$('#comment<%= @comment.id %>_submit').remove();
$(".edit_comment_btn<%= @comment.id %>").click(function() {
  $("#edit_comment_<%= @comment.id %>").submit()
});

〜〜〜

参考URL