4

I am creating custom module. I want to add js file in admin configuration. How can i include and use js in magento 2.x.

4

You try following step to add js in admin: Create file app/code/Vendor/Module/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">
    <head>
        <link src="Vendor_ModuleName::js/yourjs.js"/>
    </head>
</page>

app/code/Vendor/Module/view/adminhtml/web/js/yourjs.js

require(
    [
        'jquery',
        'mage/translate',
    ],
    function ($) {
     //add your code 
    }
);
2
  • your welcome :-) – Shashank Gupta Feb 5 '18 at 10:53
  • in the view source file is showing but its showing as blank, any reason behind it ? – SagarPPanchal Feb 13 '19 at 10:52
3

As per magento 2 standards, you will required requirejs-config.js to add custom javascript Create requirejs-config.js in app/code/vendor/module-name/view/adminhtml/requirejs-config.js

var config = {
    map: {
        '*': {
            customscript:'Vendor_ModuleName::js/custom'
        }
    }
};

then create custom.js : app/code/Vendor/modulename/view/adminhtml/web/js

3
  • i need to load this js in admin configuration section not in frontend. and how to call this script file? – iqbal malik Feb 5 '18 at 8:10
  • Please add requirejs-config.js in adminthtml folder in place of frontend folder and create js directory and custom.js file – Shankar Feb 5 '18 at 9:21
  • it is not working for me. something went wrong – iqbal malik Feb 5 '18 at 9:36
0

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_BasysStore/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>

app/code/BA/BStore/ViewModel/LoadajaxUrl.php

<?php
namespace BA\BStore\ViewModel;

use Psr\Log\LoggerInterface;
use Magento\Store\Model\StoreManagerInterface;

class LoadajaxUrl implements \Magento\Framework\View\Element\Block\ArgumentInterface
{
    /**
     * @var \Psr\Log\LoggerInterface
     */
    protected $logger;
    /**
     * @var \Magento\Store\Model\StoreManagerInterface
     */
    protected $storeManager;
   
    public function __construct(
        StoreManagerInterface $storeManager,
        LoggerInterface $logger
    ) {
        $this->logger = $logger;
        $this->storeManager = $storeManager;
    }
    public function getAjaxUrl()
    {
        return $this->storeManager->getStore()->getBaseUrl().'admin/loadcatalogs/index/index';
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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