Magento 2 – External JS for Backend Not Loaded

adminhtmljavascriptjquerymagento-2.1requirejs

I create the external js for magento 2 backend like this:

Namespace/Module/view/adminhtml/requirejs-config.js:

 var config = {
    map: {
        '*': {
            regionsForm: 'Namespace_Module/js/regions-form'
        }
    }
};

in Namespace/Module/view/adminhtml/web/js/regions-form.js

    define([
        'jquery',
        'underscore',
        'mage/url',
        'jquery/ui'
        ], function ($, _,urlBuilder) {
        'use strict';
        $(function() { 
           console.log('a'); 
        });
    });

i already delete pub/static and ran setup:upgrade & static:content, but when i inspect element in my browser i cant find my js file, but in pub/static my file is already there.

Edit:
I ran deploy command php bin/magento setup:static-content:deploy

Best Answer

The reason is that we didn't call the custom script. So, we can call it via template or the head. You can try two cases:

1) We can add directly on the head.

app/code/Namespace/Module/view/adminhtml/layout/default.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Namespace_Module::js/regions-form.js"/>
    </head>
    <body/>
</page>

In this case, remember to change define to require in the custom script.

require([
    'jquery',
    'underscore',
    'mage/url',
    'jquery/ui'
], function ($, _,urlBuilder) {
    'use strict';
    console.log('Here');
    return 1;
});

2) We can call it via template:

app/code/Company/Module/view/adminhtml/templates/test.phtml

<script>
    require(["regionsForm"], function($form){
        //Your code here
    })
</script>

Related Solutions

How to Wait Until text/x-magento-init Has Loaded the Options

I think the problem with what your trying to do is that a property defined dynamically within component.js will not be accessible from third.js.

As an alternative solution, you can pass whatever variables are needed directly to your 'third.js' file. You could use 'component.js' as a library of functions rather than as a middle man for passing data from the view.

In the template:

<script type="text/x-magento-init">
    {
        "*": {
            "third": {
                "var1" : "hello"
            }
        }
    }
</script>

third.js is defined like this:

define([
    'component'
], function (component) {
    'use strict';

    return function (config) {
        console.log(config); // will output the config object {var1: "hello"}
        component.foo(config.var1); // call function from component.js on data
    }
});

and component.js looks like this:

define([], function() {
    'use strict';
    return {
        foo: function (bar) {
            console.log(bar);
        }
    };
});

Magento 2 – My JS File is Not Loaded

The Way you are including custom js in requirejs-config-js is correct , but you must need to load this js in your template(.phtml) file.

Add below code in your .phtml template file :

<script type="text/javascript">

    require(['jquery', 'slider'],function($){
        (function() {
             //code goes here
        })(jQuery);
    });
</script>

Best Answer

Related Solutions

How to Wait Until text/x-magento-init Has Loaded the Options

Magento 2 – My JS File is Not Loaded

Related Topic