1

I'm trying to load a js file in adminhtml area.

I've created my module and requirejs-config.js file under app/code/vendorName/moduleName/view/adminhtml/web folder:

var config = {

        map: {
            "*": {
                stickerConfig: 'vendorName_moduleName/js/stickerConfig'
            }
        }
    };

I see this piece of code in pub/static/_requirejs/adminhtml/Magento/backend/en_US/requirejs-config.js file.

Then I created my stickerConfig.js in app/code/Mainf/Stickers/view/adminhtml/web/js

When I load backend pages, I don't find my javascript in list of js downloaded by browser.

What's wrong?

Improve this question
6
  • Read more My js file is not loaded in Magento 2
    – Khoa TruongDinh
    Commented Jan 3, 2017 at 16:47
  • 1
    You need to call your custom script in your phtml template.
    – Khoa TruongDinh
    Commented Jan 3, 2017 at 16:54
  • @KhoaTruongDinh I've already used this method (load js by requirejs) in frontend area and it works fine. This should be the right way to improve page loading performance. I am not able to load js by requirejs in adminhtml area but I find documentation about it. Are you sure of what you're writing?
    – WaPoNe
    Commented Jan 4, 2017 at 7:54
  • Make sure your template is called in adminhtml area?
    – Khoa TruongDinh
    Commented Jan 4, 2017 at 8:11
  • 1
    @KhoaTruongDinh: thanks to you advice I've found a solution: I load my js code in an adminhtml template called by adminhtml_system_config_edit.xml layout.
    – WaPoNe
    Commented Jan 5, 2017 at 14:04

2 Answers 2

Reset to default
1

I solved in this way..

app/code/vendorName/moduleName/view/adminhtml/layout/adminhtml_system_config_edit.xml:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="footer">
            <block class="vendorName\moduleName\Block\Config" template="vendorName_moduleName::js.phtml"/>
        </referenceContainer>
    </body>
</page>

app/code/vendorName/moduleName/view/adminhtml/templates/js.phtml:

<script type="text/javascript">
    require(
        ['jquery'],
        function($) {
            $(function() {
                // My js code
            });
        });
</script>
Improve this answer
1
1

Load js file using the requirejs-config.js

app/code/BA/BStore/view/adminhtml/requirejs-config.js

requirejs-config.js

   var config = {
    map: {
        '*': {
            loadcatalogs:'BA_BStore/js/loadcatalogs'
        }
    }
};

app/code/BA/BStore/view/adminhtml/web/js/loadcatalogs.js

define(['jquery'], function ($) {
    "use strict";
    return function(config) {
        $("#division_id").on('change', function() {
            var divisionId = $("#b_division_id").val();
            $.ajax({
            url: config.ajaxUrlValue,
            type: "POST",
            data: { divisionId:divisionId },
            showLoader: true,
            cache: false,
            success: function(response){
              console.log(response);            
            }
        });      
    });
}
});

app/code/BA/BStore/view/adminhtml/templates/loadjs.phtml

<?php
    $viewModel = $block->getViewModel();
    $ajaxUrl = $viewModel->getAjaxUrl();
?>
<script type="text/x-magento-init">
{
    "*": {
        "loadcatalogs": {
            "ajaxUrlValue": "<?= __($ajaxUrl)?>"
        }
    }
}
</script>

app/code/BA/BStore/view/adminhtml/layout/adminhtml_system_config_edit.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">
    <body>
        <referenceContainer name="footer">
            <container name="basys_load_js" htmlTag="div" htmlClass="basys_load_js">
                <block name="basysloadjs.viewmodel" template="BA_BStore::loadjs.phtml">
                    <arguments>
                        <argument name="view_model" xsi:type="object">BA\BStore\ViewModel\LoadajaxUrl</argument>
                    </arguments>
                </block>
            </container>
        </referenceContainer>
    </body>
</page>
Improve this answer

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.