【Rails】remote: true 로 한 폼을 jQuery 로 제출해도 js 형식 요청이 되지 않는다

소개

Rails 초학자가 아웃풋으로 배운 것을 게시합니다.

환경

아래 버전에서 확인하고 있습니다.

Ruby 2.5.6

Rails 5.2.3

하고 싶은 일과 문제점

체크리스트를 선택하면 Ajax에서 동적으로 콘텐츠가 전환되는 구현을하고 싶었습니다.
이를 위해 js 형식으로 요청을 제출하는 양식 ( remote: ture 설정)을 작성하고 양식의 확인란을 변경하기 시작하여 jQuery에서 양식을 제출하려고했습니다.

index.html.slim

= form_with url: ajax_path, method: :get do |f|
    = f.check_box :check_box
    = f.label :check_box

실제로 생성된 HTML은 다음과 같습니다.

HTML

<form action="/ajax" accept-charset="UTF-8" data-remote="true" method="get">
  <input name="utf8" type="hidden" value="✓">
  <input name="check_box" type="hidden" value="0">
  <input type="checkbox" value="1" name="check_box" id="check_box">
  <label for="check_box">Check box</label>
</form>

form_with 는 기본적으로 remote: true 로 설정되어 있습니다. 실제로 생성된 form 태그에도 data-remote="true" 가 되어 있어 반영되고 있습니다.

확인란을 선택했을 때 양식을 제출하도록 jQuery를 작성했습니다.

check_box.js

jQuery(document).ready(function() {
  // name="check_box" の input タグの変更を起点に発火
  $('input[name="check_box"]').change(function() {
    // チェックボックスの親要素 = フォームを送信
    $('#check_box').parent().submit();
  });
});

이제 확인란을 선택하면 양식이 제출됩니다.
그러나 실제로는 제출된 요청은 js 형식이 아니며 html 형식이었습니다.

원인

Rails 5.1부터 도입된 rails-ujs라는 라이브러리가 관련되어 있는 것 같습니다. Rails 5.0까지 사용되었던 jquery-ujs가 jQuery 의존성에서 벗어나기 위해 rails-ujs로 전환되었습니다.
그 영향으로 지금까지 문제없이 js 요청을 보낼 수 있었던 submit();가 html 요청을 보내게 된 것 같습니다.

해결책

rails-ujs 로부터 제공되고 있는 Rails.fire 메소드로 대응할 수 있습니다.

check_box.js

jQuery(document).ready(function() {
  // name="check_box" の input タグの変更を起点に発火
  $('input[name="check_box"]').change(function() {
    // ここを変更
    Rails.fire($('#check_box').parent()[0], 'submit');
  });
});

실제로 체크 박스에 체크를 해 보면,

js 형식 요청으로 보냈습니다. 해결!
대응하는 컨트롤러#액션과 ajax.js.slim 와 같은 파일을 준비해 주면 Ajax 로 표시를 변경할 수 있다고 생각합니다.
Ajax에 의한 표시 변경의 구현은 여기 의 기사를 알기 쉽습니다.

끝에

이번에는 대응할 수 있었습니다만, rails-ujs 에 대해서는 솔직히 모르는 부분이 많기 때문에, 공부가 필요하네요.
덧붙여서, ajax:success 라고 하는 이벤트 핸들러도 jquery-ujs 로부터 변경되고 있는 것 같으므로, 주의해 주세요.

참고

Rails 가이드

rails-ujs 및 form_with 사용법

Rails5 공부회를 한 이야기와 rails-ujs로 remote: true인 폼을 JS로부터 제출시키려고 하면 잘 안 된 이야기

form_with에서 양식을 제출하기 전에 처리하는 방법