How to execute custom javascript functions in Rails 6

Question

With the arrival of Webpacker to Ruby On Rails, I can't find a way to use my JavaScript functions.

I have a file called app-globals.js with a function to test:

function alerts() {
  alert("TEST")
}

Then I want to use it in one of my views:

<% = button_tag 'Button', type: 'button', onClick: 'alerts ()'%>

But when I press the button, this error is shown in the browser console:

ReferenceError: alerts is not defined

I placed the app-globals.js file in "app/javascript" and in "app/ javascript/packs/application.js" I placed require ("app-globals").
I moved app-globals.js to "app/javascript/packs" and removed the require ("app-globals") from application.js.

With either case, an error still appears.

Does this answer your question? Rails 5/6: How to include JS functions with webpacker? — Michael Chaney
– Michael Chaney, Commented Jun 8, 2020 at 16:57

Johan Donado B. · Accepted Answer · 2019-12-16 23:25:29Z

8

There is a workaround, though. You can:

change the function signatures from:

function myFunction() { ... }

to:

window.myFunction = function() { ... }

So in your code we can do like below :-

app/javascript/packs/app-globals.js

window.alerts = function() {
    alert ("TEST");
}

and then require this file to application.js :-

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()

require("@rails/activestorage").start()
require("channels")
require("jquery")

import $ from 'jquery'
window.jQuery = $;
window.$ = $;


require("packs/app-globals") ## require your file

edited Dec 16, 2019 at 23:25

Johan Donado B.

2953 silver badges15 bronze badges

answered Dec 16, 2019 at 7:53

code_aks

2,0742 gold badges16 silver badges29 bronze badges

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

5 Comments

Michael Chaney Over a year ago

This is not the correct way to do it. The question is a dup, please see stackoverflow.com/questions/54501241/… and my correct answer there.

Michael Chaney Over a year ago

Note that part of this answer is copied/pasted from the wrong answer at the earlier question.

code_aks Over a year ago

This is not the wrong answer, I have implemented the same in my Rails 6 project which is successfully worked. Currently I am also working with Rails 6 app. You can see this comment Maybe all above works – Alexander Gorg he is also pinting the same thing.

Michael Chaney Over a year ago

This answer is not correct. Yes, it works, but it's not the correct way to use the new javascript packs. See my correct answer at the link above.

developer01 Over a year ago

This worked for me but only for one function. When I tried to do multiple functions (i.e. window.showNum() window.showAlph() window.myFunction() ) - it totally stopped working.

Collectives™ on Stack Overflow

How to execute custom javascript functions in Rails 6

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related