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.
Add a comment
|
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
}
);
-
-
in the view source file is showing but its showing as blank, any reason behind it ? – SagarPPanchal Feb 13 '19 at 10:52
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
-
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
-
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';
}
}
