1

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.

0

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)));
                    }
                });
           }

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.