I realise that I probably need to declare the onclick event globally, but I am trying to avoid using the --bare
tag when compiling.
This is the code I am trying to get working...
jQuery ->
$('.tabs_image').click ->
$(this).addClass('tabs_selected')
$('.tabs_video').removeClass('tabs_selected')
$('#image_upload_form').show()
$('#video_upload_form').hide()
return
$('.tabs_video').click ->
$(this).addClass('tabs_selected')
$('.tabs_image').removeClass('tabs_selected')
$('#image_upload_form').hide()
$('#video_upload_form').show()
return
return
It works fine once the page is hard refreshed (refresh clicked) in the browser Chrome.
I have tried $ =>
, $(document).ready ->
, and $(document).ready =>
.
I found the crux of the problem - My Coffeescript was fine, it was because of a gem called Turbolinks that the code was not triggering. It keeps the current page instance alive and replaces only the body and the title in the head, which means you can't rely on
DOMContentLoaded
orjQuery.ready()
to trigger your code. This is why the script would seem to work when the page was hard refreshed (refresh clicked).
Add data-no-turbolink
to the parent container of the link(s) like so...
<a href="/">Home (via Turbolinks)</a>
<div id="some-div" data-no-turbolink>
<a href="/">Home (without Turbolinks)</a>
</div>
jQuery.ready()
Using the event hook page:change
, you can replace the jQuery.ready()
with $(document).on 'page:change', ->
or, even better $(document).on 'ready page:change', ->
; better, because it means that even if turbolinks is not running (because of being on an old browser version maybe), the call will still trigger due to ready
being there.
It is best to use
page:change
instead ofpage:load
. The former event hook fires when the page is loaded from the server or from the client-side cache, whereas the latter event hook only fires when a new body element has been loaded into the DOM (source).
...or...
You can use the jquery-turbolinks gem.
Gemfile:
gem 'jquery-turbolinks'
bundle install
and then add it to your JavaScript manifest file, in this order:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks