Chained select (listbox) on tinymce window (modal). For WordPress.

chained-select-tinymce-window.js

/* global jQuery, iziToast */

// Chained select (listbox) on tinymce window (modal)
tinymce.PluginManager.add('address_shortcode_inserter', function (editor) {
    var addresses = [];

    function getCountries(countryID, elm) {
        let win                = tinymce.activeEditor.windowManager.getWindows()[0];
        let countriesField     = win.find(`#${elm.name}`);
        let citiesField        = win.find(`#${fields.citiesField.name}`);
        let countriesParentElm = countriesField.parent();
        let citiesParentElm    = citiesField.parent();
        let countryList        = [];

        // Populate data in tinyMCE's dropdown format
        Object.entries(addresses[countryID]).forEach(([countryID]) => {
            if ("undefined" != typeof addresses[countryID]['CountryName']) {
                if (addresses[countryID]['CountryName'].length) {
                    countryList.push({ value: countryID, text: addresses[countryID]['CountryName'] })
                }
            }
        });

        countryList.sort(function (a, b) { return a.text < b.text ? -1 : 1 });
        countryList = [{ text: 'Select a country' }, ...countryList];

        countriesField.remove();
        countriesParentElm.append({ ...elm, values: countryList });

        citiesField.remove();
        citiesParentElm.append({ ...fields.citiesField });
    }

    function getCities(countryID, elm) {
        let win         = tinymce.activeEditor.windowManager.getWindows()[0];
        let citiesField = win.find(`#${elm.name}`);
        let formElement = citiesField.parent();
        let countryID   = win.find(`#country-id`)[0].value();
        let cityList    = [];

        // Populate data in tinyMCE's dropdown format
        Object.entries(addresses[countryID]).forEach(([cityID]) => {
            if ("undefined" != typeof addresses[countryID][cityID]['CityName']) {
                if (addresses[countryID][cityID]['CityName'].length) {
                    cityList.push({
                        value: cityID,
                        text: `${addresses[countryID][cityID]['CityName']}`
                    })
                }
            }
        });

        cityList.sort(function (a, b) { return a.text < b.text ? -1 : 1 });
        cityList = [{ text: 'Select a city' }, ...cityList];

        citiesField.remove();
        citiesParentElm.append({ ...elm, values: cityList });
    }

    var fields = {
        countriesField: {
            type    : 'listbox',
            name    : 'countryid',
            label   : 'Country',
            values  : [{ text: 'Select a country' }],
            onselect: function () {
                getCities(this.value(), fields.citiesField)
            },
            autofocus: true,
            required : true
        },
        citiesField: {
            type    : 'listbox',
            name    : 'cityid',
            label   : 'City',
            values  : [{ text: 'Select a country first' }],
            onselect: function () {
                getTowns(this.value(), fields.townsField)
            }
        },
        townsField: {
            type  : 'listbox',
            name  : 'townid',
            label : 'Town',
            values: [{ text: 'Select a city first' }]
        }
    };

    editor.addButton('address_shortcode_inserter', {
        text: 'Select Address',
        icon: false,
        onclick: function () {
            iziToast.show({
                title      : 'Addresses are loading',
                message    : 'Please wait...',
                color      : 'green',
                position   : 'topRight',
                timeout    : false,
                displayMode: 'replace',
                zindex     : 100101
            });

            jQuery.ajax({
                type    : "post",
                dataType: "json",
                url     : main_params.ajax_url,
                data    : {
                    'action'  : 'get_addresses',
                    'nonce'   : main_params.addresses_nonce,
                    'provider': main_params.addresses
                },
                success: function (response) {
                    addresses = response.data;

                    if ("undefined" != typeof addresses.countries) {
                        iziToast.destroy();
                        fields.countriesField.values = [{ text: 'Select a country' }, ...addresses.countries],

                            editor.windowManager.open({
                                title: 'Get exact address',
                                size : 'small',
                                body : [
                                    fields.countriesField,
                                    fields.citiesField,
                                    fields.townsField
                                ],
                                onsubmit: function (e) {
                                    if ("undefined" == typeof e.data.countryid ||
                                        "undefined" == typeof e.data.cityid ||
                                        "undefined" == typeof e.data.townid) {
                                        e.preventDefault();
                                        iziToast.show({
                                            title      : 'Error',
                                            message    : 'Please make sure you selected a value for all fields',
                                            color      : 'red',
                                            position   : 'topRight',
                                            displayMode: 'replace',
                                            zindex     : 100101
                                        });
                                    } else {
                                        editor.insertContent('[address CountryID="' + e.data.CountryID + '" CityID="' + e.data.lCityID + '" TownID="' + e.data.mTownID + '"]');
                                    }
                                }
                            });
                    } else {
                        iziToast.destroy();
                        iziToast.show({
                            title      : 'Error',
                            message    : 'Address data is getting updated. Please wait a few minutes and refresh the page to try again',
                            color      : 'red',
                            position   : 'topRight',
                            displayMode: 'replace',
                            zindex     : 100101
                        });
                    }
                },
                error: function (err) {
                    if ("undefined" == typeof addresses.countries) {
                        iziToast.show({
                            title      : 'Error',
                            message    : 'Address data not fetched. Please contact support.',
                            color      : 'red',
                            position   : 'topRight',
                            displayMode: 'replace',
                            zindex     : 100101
                        });
                    }
                }
            });
        },
    });
});