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?
-
Read more My js file is not loaded in Magento 2Khoa Truong– Khoa Truong2017年01月03日 16:47:43 +00:00Commented Jan 3, 2017 at 16:47
-
1You need to call your custom script in your phtml template.Khoa Truong– Khoa Truong2017年01月03日 16:54:08 +00:00Commented 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– WaPoNe2017年01月04日 07:54:12 +00:00Commented Jan 4, 2017 at 7:54
-
Make sure your template is called in adminhtml area?Khoa Truong– Khoa Truong2017年01月04日 08:11:53 +00:00Commented 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– WaPoNe2017年01月05日 14:04:48 +00:00Commented Jan 5, 2017 at 14:04
2 Answers 2
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>
-
Yeah! Good job!Khoa Truong– Khoa Truong2017年01月05日 14:11:54 +00:00Commented Jan 5, 2017 at 14:11
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>