Why Rails 5.2 'remote:true' doesn't work in link_to helpers but works in button_to?

Question

In my Rails 5.2 app I have the following link_to helper:

      <%= link_to game_stickers_path(game_id: game.id, sticker_id: sticker.id, placement_side: "right"), method: :post, remote: true do %>
        <span class='sticker-imagery'>
          <%= image_tag(sticker.image_path, class: 'sticker') %>
          <i class="fal <%= sticker.fa_class %> sticker-passive"></i>
        </span>
      <% end %>

When clicking the link Rails sends and HTML GET request instead of the stated JS POST request. If I keep exactly the same code but change the link_to to a button_to helper, as bellow:

      <%= button_to game_stickers_path(game_id: game.id, sticker_id: sticker.id, placement_side: "right"), method: :post, remote: true do %>
        <span class='sticker-imagery'>
          <%= image_tag(sticker.image_path, class: 'sticker') %>
          <i class="fal <%= sticker.fa_class %> sticker-passive"></i>
        </span>
      <% end %>

When clicking the link Rails sends the expected JS POST request to the controller.

This seems to be happening not only in this particular link but in all link_to helpers in my app.

I've read a potential solution which involves including jquery-ujs in the assets pipeline, as Rails 5.2 works without jQuery. I do have jQuery running but tried adding jquery-ujs without success. In any case, this does seem like an odd solution as this version of Rails is built to work without jQuery-ujs and one would expect remote: true to work out of the box.

I wonder why this is happening and if you can provide any ideas on how to make my link_to helpers work with remote as expected.

[MORE DETAILS]

Here's the rendered HTML for both helpers:

link_to:

<a data-remote="true" rel="nofollow" data-method="post" href="/game_stickers?game_id=492&amp;placement_side=right&amp;sticker_id=11">
            <span class="sticker-imagery">
              <img class="sticker" src="/assets/stickers/boot-3c57715e24e50da0f4bb2cb14229416f53499173efee2f6a0bdb230d2e1cd47f.svg" style="display: none;">
              <svg class="svg-inline--fa fa-boot fa-w-16 sticker-passive" aria-hidden="true" focusable="false" data-prefix="fal" data-icon="boot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="" style="display: block;"><path fill="currentColor" d="M415 247.8L352 232V128c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H32C14.3 0 0 14.3 0 32v434.7c0 8.5 3.4 16.6 9.4 22.6l13.3 13.3c6 6 14.1 9.4 22.6 9.4h37.5c8.5 0 16.6-3.4 22.6-9.4L128 480l22.6 22.6c6 6 14.1 9.4 22.6 9.4h37.5c8.5 0 16.6-3.4 22.6-9.4L256 480l22.6 22.6c6 6 14.1 9.4 22.6 9.4h37.5c8.5 0 16.6-3.4 22.6-9.4L384 480l22.6 22.6c6 6 14.1 9.4 22.6 9.4h37.5c8.5 0 16.6-3.4 22.6-9.4l13.3-13.3c6-6 9.4-14.1 9.4-22.6v-94.8c0-58.7-40-109.9-97-124.1zM32 32h320v64H32V32zm448 434.7L466.7 480h-37.5l-22.6-22.6c-6-6-14.1-9.4-22.6-9.4s-16.6 3.4-22.6 9.4L338.7 480h-37.5l-22.6-22.6c-6-6-14.1-9.4-22.6-9.4s-16.6 3.4-22.6 9.4L210.7 480h-37.5l-22.6-22.6c-6-6-14.1-9.4-22.6-9.4s-16.6 3.4-22.6 9.4L82.7 480H45.3L32 466.7V416h448v50.7zm0-82.7H32V128h288v32h-88c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h88v32h-88c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h88l87.3 22.8c42.8 10.7 72.7 49 72.7 93.1V384z"></path></svg><!-- <i class="fal fa-boot sticker-passive"></i> -->
            </span>
</a>

button_to:

<form class="button_to" method="post" action="/game_stickers?game_id=492&amp;placement_side=right&amp;sticker_id=16" data-remote="true"><button type="submit">
            <span class="sticker-imagery">
              <img class="sticker" src="/assets/stickers/flame-9b64ac1b4a1175c7ad2af055e8c2f01c3f1b3361e01ede883cf35c78af103da4.svg">
              <svg class="svg-inline--fa fa-flame fa-w-12 sticker-passive" aria-hidden="true" focusable="false" data-prefix="fal" data-icon="flame" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path fill="currentColor" d="M192 0C79.7 101.33 0 220.92 0 300.55 0 425.05 78.95 512 192 512s192-86.95 192-211.45C384 220.6 303.78 100.86 192 0zm0 480c-95.7 0-160-72.12-160-179.45 0-63.08 63.42-164.08 160-256.83 96.58 92.76 160 193.76 160 256.83C352 407.88 287.7 480 192 480zm60.1-267.1c-26.52-22.66-51.57-44.08-51.57-77.63 0-4.54-3.77-6.25-5.38-6.78-.96-.3-2.05-.49-3.2-.49-2.57 0-5.39.95-7.38 3.67C111.36 231.23 224 224 224 296c0 30.93-25.07 56-56 56s-56-25.07-56-56v-40c0-2.05-.78-4.1-2.34-5.66S106.05 248 104 248s-4.09.78-5.66 2.34C89.84 258.6 64 285.98 64 330.11c0 65 57.42 117.89 128 117.89s128-52.89 128-117.89c0-59.17-34.52-88.67-67.9-117.21zM192 416c-45.26 0-83.29-28.16-93.38-65.93C114.74 370.71 139.85 384 168 384c48.52 0 88-39.48 88-88 0-20.66-6.08-36.85-14.51-50.01 26.69 23.29 46.51 44.58 46.51 84.12 0 47.36-43.06 85.89-96 85.89z"></path></svg><!-- <i class="fal fa-flame sticker-passive"></i> -->
            </span>
</button><input type="hidden" name="authenticity_token" value="1BG92aLv0In0NNqArHzReIRkf8CvuiZnCMzzjMxhGTbYYKmIbNMr5znGuwK9Y1+XYy8N6goyGeXcQIo8FUJpoA==">
</form>

Can you post the HTML generated on the page for the link_to vs. the button_to examples you gave? — Mike Gorski
@MikeGorski sure Mike, I've updated the Question. As expected one renders a Link element and the other one Form element. However, as you can see both have the correct data-remote and method. Still the request with the link helper is an HTML one instead of the expected JS. — alopez02

Qwertie Qwertie · Accepted Answer · 2019-03-16T22:42:00

It looks like the html is being generated as expected. You do need to require the rails ujs code in to your application.js file which will attach the correct event listeners to the element. jquery-ujs was replaced by a pure js version of the library which is now included by default in rails.

Add this to application.js

//= require rails-ujs

I think its likely that the button actually isn't working properly with remote:true currently. Forms can send posts and this one is configured correct for that but <a> tags can not post without rails uj

Why Rails 5.2 'remote:true' doesn't work in link_to helpers but works in button_to?

1 Answers