2

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.

Improve this question

1 Answer 1

Reset to default
1

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)));
                    }
                });
           }
Improve this answer
1
  • it doesn't contain secret key!
    – LucScu
    Commented Aug 17, 2020 at 14:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.