3

I have created a js file in my custom module: components.js which contains the following code:

require([
    'jquery',
    'jquery/ui'
], function($) {
    function checkFormValues(inputs, radio) {
        var empty = false;
        $(inputs).each(function () {
            if ($(this).val() == '') {
                empty = true;
                return false;
            }
        });
    $.each(radio, function(index, value) {
        if (!$("input[name='" + value + "']:checked").val()) {
            empty = true;
        }
    });
    return empty;
}

function checkEnableSubmit(inputs, radio, button) {
    if (checkFormValues(inputs, radio)) {
        $(button).attr('disabled', 'disabled');
    } else {
        $(button).removeAttr('disabled');
    }
}
});

I am then requiring the js file in my template file via requirejs and referencing the functions, however the console outputs error

<script>
require([
    'jquery',
    'jquery/ui',
    'ms.ux'
], function($, ui, ux) {
    checkEnableSubmit('.form-service-plan input', ['plan_code', 'is_scb'], '.js-submit');
    $('.form-service-plan input').change(function () {
        checkEnableSubmit('.form-service-plan input', ['plan_code', 'is_scb'], '.js-submit');
    });
});
</script>

which outputs:

Uncaught ReferenceError: checkEnableSubmit is not defined

The components.js file is loading fine, so I believe the issue is with js function declarations but am not sure how to resolve.

Update:

I was able to get functions to work if i removed the requirejs wrapper and change $ to jQuery in components.js.

function checkFormValues(inputs, radio) {
    var empty = false;
    jQuery(inputs).each(function () {
        if (jQuery(this).val() == '') {
            empty = true;
            return false;
        }
    });

    jQuery.each(radio, function(index, value) {
        if (!jQuery("input[name='" + value + "']:checked").val()) {
            empty = true;
        }
    });
    return empty;
}

function checkEnableSubmit(inputs, radio, button) {
    if (checkFormValues(inputs, radio)) {
        jQuery(button).attr('disabled', 'disabled');
    } else {
        jQuery(button).removeAttr('disabled');
    }
}

Should I not use requirejs wrapper for any shared functions or libraries?

6
  • Is ms.ux referring to components.js? If not then you need to add components.js as a dependency. One of the positives of Require JS is that your JS is not globally accessible.
    – Ben Crook
    Commented Jul 20, 2017 at 15:39
  • yes, ms.ux is the reference to components.js Commented Jul 20, 2017 at 15:42
  • What happens if you replace checkEnableSubmit with ux.checkEnableSubmit?
    – Ben Crook
    Commented Jul 20, 2017 at 15:43
  • Uncaught TypeError: Cannot read property 'checkEnableSubmit' of undefined. I also did a console.log(ux) which output undefined Commented Jul 20, 2017 at 15:50
  • 1
    One last quick fix attempt, what happens if you change require to define in components.js? I'm thinking that you may need to use define to define it as a module.
    – Ben Crook
    Commented Jul 20, 2017 at 16:28

1 Answer 1

5

When you are defining a module to be reused you need to use define rather than require.

About define

With define you register a module in require.js that you can then depend on in other module definitions or require statements.

About require

With require you "just" load/use a module or javascript file that can be loaded by require.js. For examples have a look at the documentation.

Example

require([
    'jquery',
    'jquery/ui'
], function($) {
    ...
});

Should be

define([
    'jquery',
    'jquery/ui'
], function($) {
    ...
});

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.