개요

다음 항목에 대해 Rails 초보자의 내가 망설이는 부분이 있었기 때문에,
비망록을 겸하고 간단한 코드를 예로 지식을 공유합니다.

Rails5 시스템에서 Ajax를 사용하는 방법

동적으로 생성 된 DOM 요소에 대해 jQuery에서 이벤트 핸들러를 설정하는 방법

목표로 하는 행동

Rails5 시스템에서 Ajax를 사용하는 방법

조금 전의 gif로 말하는 것, 각 뉴스 타이틀 옆에 있는 「나중에 읽는다」버튼을 누른 후,
「나중에 읽는 리스트」에 그 항목을 Ajax로 추가하는 부분에 대해 해설합니다.

보기

여기가 뷰의 소스 코드입니다.
(erb는 Qiita 측의 신택스 하이라이트가 잘 작동하지 않았다 )

home.html.erb

    #読売新聞の記事一覧を表示するテーブル。
　　　　　　　　#@all_newsには最新のニュースに関する全てのレコードが入っている。
　　　　　　　　　<table class="latest_news_table">
      <thead>
        <tr>
          <th>タイトル</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <% @all_news.each do |news| %>
        <tr>
          <td><%= link_to  news.title, news.link %></td>
          #あとで読むボタンには、各ニュースに対応したidが付与されている
          <td><span class="btn btnAtode" id=<%= news.id %>>あとで読む</span></td>
        </tr>
        <% end %>
      </tbody>
    </table>

    #あとで読む記事を表示するテーブル。
    #all_atodesにはあとで読む予定のニュース記事に関する全てのレコードが入っている。
　　　　　　　　<table class="atode_news_table">
      <thead>
        <tr>
          <th>タイトル</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <% @all_atodes.each do |atode| %>
        <tr>
          <td><%= link_to  atode.title, atode.link %></td>
          <td><span class="btn btnDokuryo" id=<%= atode.id %> method: :delete>読了</span></td>
        </tr>
        <% end %>
      </tbody>
    </table>

Ajax 처리를 수행하는 js 파일

app/assets/javascripts 아래에 만들었습니다.

Ajax.js

$(function () {
   //あとで読むボタンに対するイベントハンドラ
   $(".btnAtode").click(function() {
    //ボタンのidを取得し、後述するatodeアクションに渡す。
    return $.ajax({
      url: 'ajax/atode',//routes.rbの記述で、このurlとコントローラーのアクションを対応付ける
      type: 'post',
      data: { set_id: $(this).attr('id') },//アクションに渡したいデータ
      dataType: 'json',
      async: true,
    //コントローラーから無事にjsonが帰ってきた際の動作
    }).done(function(response) {
      //atodeアクション終了後の動作。あとで読むリストに項目を追加
      //response[0]にニュースのタイトル、[1]にurl、[2]にidが格納されている
      $(".atode_news_table").append(
        "<tr><td><a href=" 
　　　　　　　　　　　　　　　　　　　　+ response[1] + ">" + response[0]
          + "</a></td><td><span class='btn btnDokuryo' id="
          + response[2] + " method: :delete>読了</span></td></tr>"
      )
    //コントローラーからjsonが帰ってこなかった時の動作
    }).fail(function() {
　　　　    alert("失敗しました");
    });
  });
 });

컨트롤러

나중에 읽는 버튼의 클릭에 대응한 액션입니다.

home_controller.rb

  def atode
　　　　　　　　#あとで読むボタンが押された場合、ボタンに付与されたidをもとにNewsテーブルからニュースを取得
    @cheked_news = News.find(params[:set_id])
    #取得したニュースと同じ内容をAtodeテーブルに記録
    @atode_news = Atode.create(source: @cheked_news.source, title: @cheked_news.title, 
                                link: @cheked_news.link, checked: true)
    #各値をjsonに格納して、ajax.jsに返却 ajax.jsではresponse[0]〜[2]として扱われる
    render json: [@cheked_news.title, @cheked_news.link, @atode_news.id]
  end

동적으로 생성 된 DOM 요소에 대해 jQuery에서 이벤트 핸들러를 설정하는 방법

방금 전의 gif로 말하는 Ajax에서 '나중에 읽기 목록'에 추가된 항목의 '읽기' 버튼을 누르면
기사가 사라지는 동작에 대해 설명합니다.

방법으로는 ajax.js의 '나중에 읽는 목록'에 각 값을 추가 한 후
이벤트 핸들러를 설정하기만 하면 됩니다.

이하, 이전의 ajas.js에 일부 가필

Ajax.js

//略
}).done(function(response) {
      $("#atode-table").append(
        "<tr>" +
          "<td><a href=" + response[1] + ">" + response[0]
          + "</a></td>"
          + "<td><span class='btn btn-info btn-sm btnDokuryo' id="
          + response[2] + " method: :delete>読了</span></td></tr>"
      )
      //以下加筆箇所
　　　　　　　　　　　　//読了ボタンに対するイベントハンドラ
      $(".btnDokuryo").click(function(){
        let set_id = Number( $(this).attr('id') )
        return $.ajax({
          url: 'ajax/done',
          type: 'delete',
          data: { set_id },
          dataType: 'json',
          async: true,
        //response[0]に削除したい項目のidが格納されている
        }).done(function(response) {
          //あとで読むリストの項目を削除
          var done_article = $("#" + response[0]).closest("tr").remove();
          $(done_article).remove();
        }).fail(function() {
        });
      })
//略

요약

Ajax의 사용법에 대해서는 간단한 코드를 실어 보았습니다.
필요한 부분을 복사하여 사용하십시오.

또, Ajax로 동적으로 생성한 DOM 요소에 대해서는,
그 요소를 추가 후 이벤트 핸들러를 설정하는 것이 포인트입니다.
다른 js 파일을 만들고 그곳에서 이벤트 핸들러를 설정했지만,
Ajax에서 추가한 항목에 대해서는 click 이벤트가 집어들지 않고 고민해 버렸습니다....
비슷한 고민을 안고 있는 분의 도움이 되면 다행입니다.