.js file only loads after refreshing the page in rails

Question

I have the following JavaScript code on a rails project

// app/assets/javascript/simple_effects.js

$(function() {
  // Hide completed tasks when checkbox is clicked. projects/show
  $('#hide-completed').click(function() {
    $('.task-completed').toggle();
  });
  // Change label to checkbox that hides completed tasks. project/show
  $('#hide-completed').change(function(){
    var c = this.checked ? ' Show completed tasks' : ' Hide completed tasks';
    $('#checkbox-label').text(c);
  });

});

The code does not trigger when I enter the page but only after refreshing it. I am using turbolinks.

I am aware of this question: Rails loading my javascript only after a page reload But I don't really know if that solution can be used in my case as well. Thank you!

Edit: This is my application.js file

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

can you post your application.js file ?

mohameddiaa27
– mohameddiaa27

2014-11-02 00:42:11 +00:00
Commented Nov 2, 2014 at 0:42 — mohameddiaa27
– mohameddiaa27, Commented Nov 2, 2014 at 0:42

mohameddiaa27 · Accepted Answer · 2014-11-02 00:58:00Z

5

If you have a lot of existing JavaScript that binds elements on jQuery.ready(), you can pull the jquery.turbolinks library into your project that will trigger ready() when Turbolinks triggers the the page:load event. It may restore functionality of some libraries.

Add the gem to your project,

gem 'jquery-turbolinks'

then add the following line to your JavaScript manifest file, after jquery.js but before turbolinks.js:

//= require jquery.turbolinks

your application.js

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

edited Nov 2, 2014 at 0:58

answered Nov 2, 2014 at 0:47

mohameddiaa27

3,5971 gold badge18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

La Murga Over a year ago

The application throws an error: couldn't find file 'jquery.turbolinks'

Toby 1 Kenobi Over a year ago

You must restart your rails server after adding this gem. Otherwise you get the error La Murga got.

SimonH Over a year ago

Note that this does not work with turbolinks 5+, as noted on their github page: github.com/kossnocorp/jquery.turbolinks

SimonH · Accepted Answer · 2017-12-06 09:33:26Z

0

If you're using turbolinks 5+, jquery-turbolinks doesn't work anymore (see https://github.com/kossnocorp/jquery.turbolinks).

Instead you can wrap your code into the function $(document).on "turbolinks:load", ->.

E.g.

$ ->
  $("#add-artwork-btn").on 'click', ->
    div = $("#add-artwork-div")
    div.toggle(200)

becomes to

$(document).on "turbolinks:load", ->
  $ ->
    $("#add-artwork-btn").on 'click', ->
      div = $("#add-artwork-div")
      div.toggle(200)

answered Dec 6, 2017 at 9:33

SimonH

1,45516 silver badges37 bronze badges

Collectives™ on Stack Overflow

.js file only loads after refreshing the page in rails

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related