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

Improve this question

1 Answer 1

Reset to default
0

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

Improve this answer
2
  • 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.
    – jstuardo
    Commented Jul 23, 2021 at 12:03
  • 1
    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.
    – jstuardo
    Commented Jul 23, 2021 at 14:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.