Rails + jQuery 이벤트 발화로 부분 템플릿을 업데이트하는 방법

소개

증분 검색에 대해 쓴 기사 에서는 ajax와 json의 조합을 사용해 뷰를 변화시키고 있었습니다만, 이번은 json을 사용하지 않고 Rails의 부분 템플릿을 갱신시키는 방법으로 뷰를 변경하는 방법에 대해 나름대로 정리해 갑니다.

환경

Ruby 2.5.1
Rails 6.0.2
haml, jQuery를 사용합니다.

하고 싶은 일

form_with의 submit을 사용하지 않고, js의 이벤트 발화(click이나 change등)에 의해 비동기 통신으로 부분 템플릿을 갱신시키고 싶습니다.
json을 활용하여 업데이트하는 방법도 있지만, 여기에서는 부분 템플릿을 활용하여 js 내의 설명을 간략화시켜 나갑니다.

우선 submit을 사용했을 때의 갱신

post_controller.rb

class PostController < ApplicationController
  def index
    @posts = Post.all
  end

  def create
    @post = Post.create(message: params[:message])
    @posts = Post.all
    render partial: "post", collection: @posts
  end
end

index.html.haml

%h2
  Posts

= form_with model: @post do |f|
  = f.text_field :message
  = f.submit "Post", id: :submit

.posts
  = render partial: "post", collection: @posts

_post.html.haml

= post.message

우선 비교로서 js를 사용하지 않고 갱신해 보겠습니다.

결과

부분 템플릿 만 업데이트하는 대신 전체 페이지를 부분 템플릿으로 변경했습니다.

부분 템플릿만 업데이트

post_controller_rb

class PostController < ApplicationController
  def index
    @posts = Post.all
  end

  def create
    @post = Post.create(message: params[:message])
    @posts = Post.all
    #  partial: "post", collection: @posts  <- 削除
  end
end

create.js.haml(신규 작성)

$('.posts').html("#{j(render partial: "post", collection: @posts)}");

결과

부분 템플릿만 업데이트할 수 있었습니다.

주제 submit에서 전송하는 대신 js 이벤트에서 부분 템플릿을 업데이트합니다.

post.js

$(function() {
  $('#submit').on('click', function(event) {
    event.preventDefault();
    var input = $('#message').val();
    console.log(input)
    $.ajax({
      type: "POST",
      url: "/post",
      data: {message: input}
    })
    .done(function(response) {
      $('.posts').html(response);
    })
  })
})

post_controller.rb

class PostController < ApplicationController
  def index
    @posts = Post.all
  end

  def create
    @post = Post.create(message: params[:message])
    @posts = Post.all
    render partial: "post", collection: @posts  <- 復元
  end
end

서버가 반환하는 데이터 형식을 지정하지 않으면 표준 HTML로 작성된 부분 템플릿 정보가 반환되는 것 같습니다.

결과

js로 갱신시키는 부분에 ajax 통신으로 돌려주어진 데이터를 치환시키는 것으로 부분 템플릿의 갱신을 실현할 수 있었습니다.

활용할 수 있을 것 같은 장면

마우스 오버와 조합해 마우스의 위치에 의해 뷰를 갱신시키거나, 일시적으로 처리를 정지시키거나 하는 js와의 조합으로 활용할 수 있을 것 같습니다.