Magento2: How to get adminUrl in js file using something like 'mage/url'?

magento.stackexchange https://magento.stackexchange.com/questions/205839

Question

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.

Was it helpful?

Solution

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)));
                    }
                });
           }
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top