Japanese translator turned software engineer. I work mostly with Ruby and Rails, but love working on both the backend and the frontend. Currently a computer science student @ University of Colorado.
Location
Connecticut
Education
University of Colorado, Ohio State University, IUC (for Japanese)
Well, I did some digging... Since these are webpack modules, I guess you have to do a little more work to make the function available if you're simply declaring it in pack/custom.js. First, you need to export function by adding an export at the end of the file:
Then, in the main application.js, you have to import it and make it available to the window. You can do that by adding this to the bottom of application.js
Then it should work! I think there's a way to export and import all functions in a file too... I'm not very familiar with how webpack works yet, but I'll try to update this post with some more info soon.
Instead of exporting/importing, another way is to add the onClick function with an event listener instead. First, give your button and id or something like that and remove the onclick:
You do need to make sure you wrap the event listener (and other JS) inside the document.addEventListener('turbolinks:load', () => {}. That's Rails' way of making sure the page and turbolinks is loaded before any of the javascript gets executed!
I hope that helps!! I learned a bit trying to figure this out too!
Well, I did some digging... Since these are webpack modules, I guess you have to do a little more work to make the function available if you're simply declaring it in
pack/custom.js
. First, you need to export function by adding anexport
at the end of the file:Then, in the main
application.js
, you have to import it and make it available to thewindow
. You can do that by adding this to the bottom ofapplication.js
Then it should work! I think there's a way to export and import all functions in a file too... I'm not very familiar with how webpack works yet, but I'll try to update this post with some more info soon.
Instead of exporting/importing, another way is to add the onClick function with an event listener instead. First, give your button and id or something like that and remove the
onclick
:Then in the
custom.js
file, add an event listener:You do need to make sure you wrap the event listener (and other JS) inside the
document.addEventListener('turbolinks:load', () => {}
. That's Rails' way of making sure the page and turbolinks is loaded before any of the javascript gets executed!I hope that helps!! I learned a bit trying to figure this out too!
Ooh, great thanks, Felice!
Thanks for this article. It was helpful. Changing the declaration of your JavaScript function may simplify things a bit:
// in your html
<a href="#" onclick="dosmth()">dosmth</a>
// javascript/packs/custom.js
window.dosmth = function() {
alert('hello');
}
// I don't think you need the export default dosmth;
// export default dosmth;
// In your javascript/packs/application.js I don't think you need the corresponding declarations:
// import dosmth from './custom'
// window.dosmth = dosmth