custom function is not defined

[MZC-CSC]

Description

I am trying to use my own javascript file. assets/js/commonfunctions.js
when I called the function, it shows "testFunction is not defined"

// assets/js/commonfunction.js
function testFunction(){
console.log("this is a test function")
}

// assets/js/application.js
require("./commonfunctions.js");

// templates/application.plush.html
<%= javascriptTag("commonfunctions.js") %>
Test Function

I want to define the functions that I use often separately
like,
function currentYyyyMmDd(){
var today = new Date();
var year = today.getFullYear();
var month = ('0' + (today.getMonth() + 1)).slice(-2);
var day = ('0' + today.getDate()).slice(-2);
var dateString = year + '-' + month + '-' + day;
return dateString
}

[sio4]

Well, sorry but I am not a javascript person and actually, this question is somewhat out-of-scope from the perspective of Buffalo. Even though Buffalo provides the out-of-box scaffold for Webpack along with jQuery to make it easy to prepare the frontend development setup, the actual scripting is out of Buffalo's scope. Please understand it.

(I am writing it with the assumption you did not disable Webpack when you created a buffalo app and used it)

I am trying to use my own javascript file. assets/js/commonfunctions.js when I called the function, it shows "testFunction is not defined"

When a javascript file is under assets/js, they are not just a normal javascript. They will be under Webpack's control, and the file content will be modified by Webpack style. Actually, I am not good at Webpack and I don't know the details.

// assets/js/application.js
require("./commonfunctions.js");

// templates/application.plush.html
<%= javascriptTag("commonfunctions.js") %> Test Function

If you added require line in assets/js/application.js file, you don't need to include the file by javascriptTag in the template since the script is already included in application.js.

By the way, I am not sure how the function can be called in your application. There could be some options.

1. If you put your own javascript file in the assets instead of assets/js, the file will be just copied by Webpack without modification. The file will be under public/assets and you can include the file with a normal way like <script src="assets/test.js"></scirpt>. In this case, the javascript function will be registered directly under the document, so the function will be able to be executed by calling its name.
2. but for me, since I am using most of my own set of javascript for event handling something like "when click on a button" manner, I normally do not define the function like your example but using the following style in the application.js.

  $('a.goback').on('click', function(e){
    e.preventDefault();
    window.history.back();
  });

This works pretty well.

I hope this could be a little helpful to you.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment. Otherwise, this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 30+7 days with no activity.