I am new to this topic and online resources didnt help. I am trying to set up a simple button which onClick
executes something in JavaScript
. I wanted to implement on the front-end to add html to the DOM. It seems I am doing something wrong with regards to referencing the programmed JS Code.
-
I modified my
application.js
to addrequire("./invoices/invoice_positions")
:// present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("popper.js") require("bootstrap") require("jquery") require("inputmask") require("channels") require('./nested_forms/addFields') require('./nested_forms/removeFields') require("./invoices/form") require("./invoices/select") require("./payments/form") require("./header_menu") require("./invoices/invoice_positions") // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true)
-
I added the function under
app/javascript/invoices/invoice_positions.js
with some dummy code:
function increaseInvoicePositions() {window.alert("BAM");}
- I added this to my view because of some online help:
<%= content_for :head do %>
<%= javascript_include_tag "/invoices/invoice_positions" %>
<% end %>
- I added this button to the view:
<%= button_tag t('invoice_positions.increase'), type: "button", onclick: "increaseInvoicePositions()", class: "btn btn-secondary" %>
Result
In theory after reloading the page I assume it works but it fails with a browser error in Chrome. I restarted the server but it didnt help. What am I missing?