How to add JS file reference in a custom JS file

Question 1

In a custom module view/frontend/web/js folder I have 2 JS files:

jquery.custom.js registration.js

In the XML layout file of the module, I have:

<head>
 <link src="Vendor_Module::js/jquery.custom.js"/>
 <link src="Vendor_Module::js/registration.js"/>
</head>

Inside the third party library jquery.custom.js file there is a function called $.validateData. This library works since I use it everywhere in my projects (so there is no an issue with $.validateData function definition). The problem is when trying to use it in Magento.

This is registration.js file content:

requirejs([
 'jquery',
 'jquery/ui',
 'jquery/validate',
 'mage/translate',
 'mage/mage',
 ], function ($) {
 $.validator.addMethod(
 'validateData',
 function (value) {
 return $.validateData(value);
 },
 $.mage.__('Data is incorrect.')
 );
 });

When I load the page and the custom validation is run, a javascript error is shown telling that $.validateData is not found.

I think that the problem is because I am referencing the third party library incorrectly, so, the question is, how can I reference it correctly? I should add it in the requirejs array? how?

I tried to add that library in the registration.js file this way:

requirejs([
 'jquery',
 'jquery/ui',
 'jquery/validate',
 'mage/translate',
 'mage/mage',
 'Vendor_Module/js/jquery.custom.js'
 ], function ($) {
 $.validator.addMethod(
 'validateData',
 function (value) {
 return $.validateData(value);
 },
 $.mage.__('Data is incorrect.')
 );
 });

But in this case, this other error is shown:

require.js:166 Uncaught Error: Script error for: Vendor_Module/js/jquery.custom.js
http://requirejs.org/docs/errors.html#scripterror
 at makeError (require.js:166)
 at HTMLScriptElement.onScriptError (require.js:1681)

what is missing?

Thanks

Question 2

May you try after replacing your $ with jQuery everywhere, sometimes $ conflicts with php.
Your registration.js will look like

requirejs([
 'jquery',
 'jquery/ui',
 'jquery/validate',
 'mage/translate',
 'mage/mage',
 ], function (jQuery) {
 jQuery.validator.addMethod(
 'validateData',
 function (value) {
 return jQuery.validateData(value);
 },
 jQuery.mage.__('Data is incorrect.')
 );
 });

Also do inspect element then go to network tab then check that registration.js file is actually included in that page or not. You may need to press ctrl+r to reload the webpage to see all included files.
If you found .js file is included but still code not working then try to use on ready and onload functions also, examples are -

require([ 'jquery'], function($){ $(document).ready(function($) { //your code }); });

And

require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
 $(window).load(function() {
 //custom js code
 /* $(".product-item-name").each(function(){
 $(this).dotdotdot(); 
 }); */
 });
});

Thanks Vibhore

Question 3

Hello,,,, by analising the console window I could conclude that the JS jquery.custom.js is not loaded correctly due to missing jquery library. If I don't reference it in the requirejs function and include it in the <head> element of the layout, the error shown in console is jQuery is not defined. I tried by linking the jquery.custom.js file after registration.js but the same happen. How can I ensure jquery library is loaded first? I thought that requirejs does that, but it seems it does not.

Question 4

Hello, finally I got it to work. I should create a requiredjs-config.js file. That way I created the jquery dependency for the custom JS.

Vibhore Jain 7071 gold badge7 silver badges16 bronze badges · Accepted Answer · 2021-07-23 01:13:15Z

May you try after replacing your $ with jQuery everywhere, sometimes $ conflicts with php.
Your registration.js will look like

requirejs([
 'jquery',
 'jquery/ui',
 'jquery/validate',
 'mage/translate',
 'mage/mage',
 ], function (jQuery) {
 jQuery.validator.addMethod(
 'validateData',
 function (value) {
 return jQuery.validateData(value);
 },
 jQuery.mage.__('Data is incorrect.')
 );
 });

Also do inspect element then go to network tab then check that registration.js file is actually included in that page or not. You may need to press ctrl+r to reload the webpage to see all included files.
If you found .js file is included but still code not working then try to use on ready and onload functions also, examples are -

require([ 'jquery'], function($){ $(document).ready(function($) { //your code }); });

And

require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
 $(window).load(function() {
 //custom js code
 /* $(".product-item-name").each(function(){
 $(this).dotdotdot(); 
 }); */
 });
});

Thanks Vibhore

Hello,,,, by analising the console window I could conclude that the JS jquery.custom.js is not loaded correctly due to missing jquery library. If I don't reference it in the requirejs function and include it in the <head> element of the layout, the error shown in console is jQuery is not defined. I tried by linking the jquery.custom.js file after registration.js but the same happen. How can I ensure jquery library is loaded first? I thought that requirejs does that, but it seems it does not.
Hello, finally I got it to work. I should create a requiredjs-config.js file. That way I created the jquery dependency for the custom JS.

Stack Exchange Network

How to add JS file reference in a custom JS file

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

How to add JS file reference in a custom JS file

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions