0

I am working on a Ruby on Rails project where clicking a link_to element on my view is supposed to trigger a method in my CoffeeScript, but the output is never printed!

This is the relevant part of my HTML (the link works):

<%= link_to 'Start Quiz!', {:controller => :pages, :action => :start_quiz}, :id => 'btn btn-primary btn-lg', :method => :get %>

This is the method in my ActionCable CoffeeScript file:

App.quiz_data = App.cable.subscriptions.create "QuizDataChannel",
  connected: ->
    console.log "[AC] on click handler called?"
    $(document).on('turbolinks:load', -> $('btn btn-primary btn-lg').on 'click', -> console.log "[AC] on click handler called!")

My console reads "[AC] on click handler called?" but nothing else, even after I click on the link.

I've been googling a lot and a few posts suggested the problem might be with turbolinks. The above code already reflects 2 of several solutions I've tried (specifying get method in link, enclosing event handler with $(document).on('turbolinks:load', -> ...)), none of which fixed it for me. I'm a Rails beginner and have no clue about CoffeeScript, so any help would be greatly appreciated.

EDIT:

After adding the id selector # and deleting the get method in the link_to element and $(document).on('turbolinks:load', -> ...) in the event handler - it finally works! :D

HTML element now:

<%= link_to 'Start Quiz!', {:controller => :pages, :action => :start_quiz}, :class => 'btn btn-primary btn-lg', :id => 'start_quiz_button' %>

CoffeeScript file now:

App.quiz_data = App.cable.subscriptions.create "QuizDataChannel",
  connected: ->
    console.log "[AC] on click handler called?"
    $('#start_quiz_button').on 'click', -> console.log "[AC] on click handler called!"

Thank you! :)

megahra
  • 185
  • 1
  • 15
  • What are you expecting the `'btn btn-primary btn-lg'` selector to match? – mu is too short Jun 24 '17 at 23:30
  • the id of the `link_to` element I posted - is that incorrect @mu? – megahra Jun 24 '17 at 23:55
  • (1) id-selectors use `#`. (2) `'btn btn-primary btn-lg'` looks like a class list, not an id. (3) Some time reading the [jQuery selector docs](http://api.jquery.com/category/selectors/) might be a good idea. – mu is too short Jun 25 '17 at 00:31
  • Yes, it used to be a class for my css and on my many tries to fix the problem I had sometime just changed it to an id. I've added a # now, thank you :) – megahra Jun 25 '17 at 08:15

1 Answers1

1

1) You need to change your id to a valid one (read this post), something like start_quizz_button

2) Use an id-selector # : 

$(document).on('turbolinks:load', -> $('#start_quizz_button').on 'click', -> console.log "[AC] on click handler called!")
Othmane El Kesri
  • 584
  • 4
  • 16
  • Thank you, that makes sense! I've changed it to what you suggested, but "[AC] on click handler called!" is still not printed when I click the button :( I'd be grateful for any other pointers as to what might be the problem. – megahra Jun 25 '17 at 08:17
  • Nvm, I deleted both of the above mentioned turbolinks fixes and now it works - Thank you :) – megahra Jun 25 '17 at 08:23
  • You're welcome. Can you please upvote my answer if it solved your problem – Othmane El Kesri Jun 25 '17 at 14:12