Call javascript function onclick in Rails

Question

I have the following code in one of my views:

<button type="button" onclick="analyze();">Analyze</button>

And, the .js.coffee file for the corresponding controller contains

analyze = ->

  $.ajax
    type: "GET"
    url: "http://localhost:3000/api/logs"
    success: (data) ->
      Analytics.doAnalysis data
      return;

  return;

But, when I click the button, I get an error in console saying Uncaught ReferenceError: analyze is not defined. I think my onclick is not correctly defined. What is the recommended way of doing this?

Richard Peck · Accepted Answer · 2014-06-02 08:47:00Z

I am new to web development

Since you're new, let me give you some ideas on how to improve your code:

Unobtrusive JS (UJS)

This tutorial explains it very well

Rails convention is geared towards "unobtrusive" javascript functionality. This means you can assign events to elements on your page without having to reference those elements directly (don't use inline onclick etc)

This is best described in the same way as CSS - using inline CSS is ridiculously laborious & seen as bad practice (it's not DRY). A much better way is to have a central stylesheet, which you can then use to style elements on the page.

Unobtrusive Javascript works in the same way - keep everything in files you call at runtime:

#app/assets/javascripts/application.js
$(".element").on("click", function(){
    ...
});

The importance of this cannot be stated enough - having unobtrusive JS is one of the best programming patterns you can apply; it not only DRIES up your code, but also ensures future development can be kept modular (a gold standard in development)

Ajax

Since you're using ajax, you may wish to use the Rails UJS Ajax functionality, which basically means this:

<%= button_to "Analyze", analytics_api_path, id: "analyze", remote: true %>

The remote: true option of this calls the Rails UJS driver's ajax functionality - basically setting up an ajax call without you having to write any code. The caveats of this are that you need to handle your own ajax:success process, and you'll need to point the element to the correct href

I would do this:

#app/assets/javascripts/application.js.coffee
$("#analyze").on "ajax:success", (data, status, xhr) ->
    Analytics.doAnalysis data

gwcoffey · Accepted Answer · 2014-06-02 07:45:56Z

11

Change this:

analyze = ->

To this:

window.analyze = ->

Functions in coffeescript are not global by default.

answered Jun 2, 2014 at 7:45

gwcoffey

5,9411 gold badge20 silver badges24 bronze badges

2 Comments

Peeyush Over a year ago

Thanks very much :) I am new to web development and had one more. Is there any way to access the function without making it global? What is the best practice?

gwcoffey Over a year ago

"best" practice is debatable, but you might read up on "unobtrusive" javascript. In a perfect world, instead of your HTML pointing to Javascript functions, your javascript injects itself into the HTML. See: guides.rubyonrails.org/…

Collectives™ on Stack Overflow

Call javascript function onclick in Rails

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related