Script not work after redirect in Rails

Question

I have a clear button on my page with coffee script

html

<div class="containerNew">
<%= form_for @customer, :url => customers_path do |f| %>
<table id="createNewCustomer">
    <tr>
        <td colspan="2">Input</td>
    </tr>
    <tr>
        <td class="title">
            <%= f.label :machine_id, "Error Machine:" %>
        </td>
        <td class="content">
            <%= select("customer", "machine_id", Machine.all.collect {|m| [ m.name, m.id ] }, { include_blank: false }) %>  
        </td>
    </tr>
    <tr>
        <td class="title">
            <%= f.label :error_info, "Error Info:" %>
        </td>
        <td class="content">
            <%= f.text_area :error_info %>
        </td>
    </tr>
</table>
<div class="bottomBtnArea">
    <%= f.submit "Submit" , class:"button btn btn-primary" %>
    <input type="button" name="clear" value="clear" id="clearBtn" class="btn btn-default">
</div>
<% end %>

coffee

$ ->
  $('#clearBtn').click ->
    $("#customer_machine_id").get(0).selectedIndex = 0
    $("textarea").val("")

It works well when I directly access this page's url which is localhost:3000/customers/new

But it can't work when I use the nav link to access this page

<%= link_to "Add", new_customer_path %>

I use chrome to debug my script, it seems that it didn't go into the function block when I use nav to access this page and then click the clear button. Script file seems not being loaded. I couldn't figure out why it happens.

score 1 · Answer 1 · answered Aug 07 '22 at 06:24

1

Update: turbolink is now just turbo, so in new projects you need turbo:load instead.

document.addEventListener("turbo:load", () => {
    console.log("turbo loaded");
});

answered Aug 07 '22 at 06:24

StevenHe

262
4
4

Works in Rails 7. Thank you for sharing. – Dipen Chauhan Sep 23 '22 at 22:21

score 0 · Accepted Answer · edited May 23 '17 at 12:34

0

This is most likely because of Turbolinks, a Rails feature which does some magical caching and prevents jQuery's page-load trigger from working properly. This question has been answered before (here for example) – the solution is to add a trigger to load your JS functions on Turbolinks's load events, rather than jQuery's usual $(document).ready hook. Assuming you are using Rails 5 this should do it:

$(document).on 'turbolinks:load', ->
  $('#clearBtn').click ->
      $("#customer_machine_id").get(0).selectedIndex = 0
      $("textarea").val("")

For more information, have a look at the turbolinks documentation.

edited May 23 '17 at 12:34

Community

1
1

answered Apr 24 '17 at 08:38

omnikron

2,211
17
30

thks, this worked for me. Does it mean turbolinks preload the pages in the nav link so I should use the turbolinks way to find out if these page is fully loaded instead of jQuery way? – Neo Jiang Apr 24 '17 at 08:53
basically, yes. It's worth reading up on how Turbolinks actually works, but the way they describe it is in their documentation "When you follow a link, Turbolinks automatically fetches the page, swaps in its , and merges its , all without incurring the cost of a full page load." – this can magically make a simple Rails app feel more like a modern JS-driven single-page application, but does have a few surprises as you have discovered! – omnikron Apr 24 '17 at 09:18

Script not work after redirect in Rails

2 Answers2