Magento2: How to get adminUrl in js file using something like 'mage/url'?
-
21-12-2020 - |
質問
I am trying to populate an adminhtml dropdown when another dropdown is selected using AJAX and 'mage/url' returns the frontend url. This is my code:
app/code/Namespace/Module/view/adminhtml/web/js/form/element/options.js
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'mage/url',
'Magento_Ui/js/form/form'
], function (_, uiRegistry, select, url, form) {
'use strict';
return select.extend({
onUpdate: function (value) {
var field1 = uiRegistry.get('index = type');
var urlString = url.build('stannp/template/ajax');
if (field1.value() == value) {
jQuery.ajax({
url: urlString,
type: 'GET',
data: {type: value},
complete: function (data) {
//
},
done: function (response) {
console.log(JSON.parse(JSON.stringify(response.responseText)));
},
error: function (response) {
console.log(JSON.parse(JSON.stringify(response.responseText)));
}
});
}
return this._super();
},
});
});
urlString returns stannp/template/ajax
I tried with BASE_URL too and by getting the current url and splitting it, but it doesn't work. Thank you.
解決
Ok, so using a couple of other answers on this website: Priank's on this Get Base Url Or Dynamic Url In view Js or html files and KAndy's answer on this Magento 2 Ajax request fails, I managed to find the solution to my problem.
Here is the code:
app/code/Namespace/Module/view/adminhtml/layout/frontname_controller_action.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>
<title>
page title
</title>
</head>
<body>
<referenceContainer name="content">
<uiComponent name="form_name"/>
<block class="Namespace\Module\Block\Adminhtml\Controller\Action" name="some_name" />
</referenceContainer>
</body>
</page>
app/code/Namespace/Module/Block/Adminhtml/Controller/Action.php
use Magento\Backend\Block\Template;
use Magento\Framework\App\DeploymentConfig\Reader;
class Index extends Template {
protected $_template = 'Namespace_Module::frontname/controller/config.phtml';
protected $_configReader;
public function __construct(Template\Context $context, Reader $reader, array $data = [])
{
$this->_configReader = $reader;
parent::__construct($context, $data);
}
public function getAdminBaseUrl(){
$config = $this->_configReader->load();
$adminSuffix = $config['backend']['frontName'];
return $this->getBaseUrl() . $adminSuffix . '/';
}
}
app/code/Namespace/Module/view/adminhtml/templates/frontname/contoller/config.phtml
<script type="text/javascript">
require([
'mage/url'
], function(url) {
return url.setBaseUrl('<?php /* @escapeNotVerified */ echo $block->getAdminBaseUrl();?>');
});
</script>
This allowed me to do this in my ajax call:
//build the string using the base url set in the phtml file
var urlString = url.build('frontname/controller/action');
//if one of the values from dropdown 1 has been selected
if (field1.value() == value) {
jQuery.ajax({
url: urlString + "?type=" + value,
type: 'POST',
data: {form_key: window.FORM_KEY}, //very important!!!
showLoader: true,
complete: function (data) {
//build the array of values for dropdown 2
var resultArray = [];
resultArray.push({
value: '0',
label: 'Blank Template',
});
jQuery.each(data.responseJSON, function(index, el) {
resultArray.push({
value: index,
label: el,
});
});
//change values in dropdown 2
templates.setOptions(resultArray);
},
done: function (response) {
return true;
},
error: function (response) {
console.log(JSON.parse(JSON.stringify(response.responseText)));
}
});
}