Как настроить правильную последовательность выполнения callbacks в виджете AMOCRM?

Question

[Александр]

Добрый день, помогите с проблемой.
Делаю виджет для AMOCRM. Разметка виджета подгружается с удаленного сервера. Есть проблема, инициализация кнопки происходит быстрей, чем подгружается разметка. В итоге при нажатии на кнопку ничего не происходит.
Как можно решить эту проблему?

define(['jquery'], function($) {
    var CustomWidget = function() {
        var self = this, // для доступа к объекту из методов
            system = self.system, //Данный метод возвращает объект с переменными системы.
            langs = self.langs; //Объект локализации с данными из файла локализации (папки i18n)		

        this.getRenderData = function(w_code) {
            console.log('this.getRenderData');
            self.crm_post(
                'http://109.254.1.143/getCities', {
                    form_data: 'cities'
                },
                function(msg) {
                    console.log('msg ->>');
                    console.log(msg);
                    cities = msg
                },
                'json'
            );
            var render_data = '<link type="text/css" rel="stylesheet" href="/upl/' + w_code + '/widget/style.css"><div class="ac-form"><div id="js-ac-sub-subs-container"><form id="form"><div><input name="ordername" type="text" class="form-control" placeholder="Заголовок" required></div><div><textarea name="descr" class="form-control" placeholder="Опишите подробно что нужно сделать?" rows="4" required></textarea></div><div><select name="ordertype" class="form-control" required><option value="">Выберете тип работ</option><option value="1">Услуги электрика</option><option value="2">Электромонтажные работы</option></select></div><div><select name ="city" class ="form-control" required><option value="">В каком городе вы находитесь?</option>'
    
            for (i=0; i<cities.length; i++){
                render_data += '<option value="' + cities[i]["id"] + '">' + cities[i]["text"] + '</option>'
            }
            render_data += '</select></div><div><input name="addr" type="text" class="form-control" placeholder="По какому адресу нужно провести работы?" required></div><div><input name="clientname" type="text" class="form-control" placeholder="Как вас зовут?" required></div><div><input name="number" type="text" class="form-control" placeholder="Телефон" value="777" required></div><button class="btn btn-success" type="submit">ДОБАВИТЬ В РАБОТУ</button></form></div></div>';

            console.log(render_data);
            return render_data;
        };

        this.sendInfo = function(formData, id_lead) { // Отправка собранной информации
            console.log('this.sendInfo');
            console.log('formData ->>');
            console.log(formData);

            self.crm_post(
                'http://109.254.1.143/amocrmhandler', {
                    // Передаем POST данные
                    form_data: formData,
                    lead_id: id_lead
                },
                function(msg) {
                    console.log('msg ->>');
                    console.log(msg);
                    if (msg.indexOf('200ok') + 1) {
                        alert('Ответ сервера 200 OK');
                        // location.reload()
                    } else {
                        alert('Ошибка на стороне сервера');
                        // location.reload()
                    }
                },
                'text'
            );
        };

        this.callbacks = {
            settings: function() {
                console.log('settings')
            },
            init: function() {
                console.log('init')
                return true;
            },
            bind_actions: function() {
                console.log('bind_actions')
                $("form").on("submit", function() {
                    console.log("button")
                    var formData = $(this).serialize();
                    console.log(formData);
                    self.sendInfo(formData, AMOCRM.data.current_card.id);
                });
                return true;
            },
            render: function() {
                console.log('function')
                var lang = self.i18n('userLang');
                w_code = self.get_settings().widget_code; //в данном случае w_code='new-widget'
                var number,
                    render_data;
                console.log(w_code)
                console.log('Type AMOCRM.data.current_card >>')
                console.log(AMOCRM.data.current_card)
                console.log('in render')

                render_data = self.getRenderData(w_code)

                self.render_template({
                    caption: {
                        class_name: 'js-ac-caption',
                        html: ''
                    },
                    body: '',
                    render: render_data
                });
                
                console.log('out render')
                return true;
            },
            dpSettings: function() {
                console.log('dpSettings')
                return true;
            },
            advancedSettings: function() {
                console.log('advancedSettings')
                return true;
            },
            destroy: function() {
                console.log('destroy')
                return true;
            },
            contacts: {
                selected: function() {
                    console.log('contacts')
                    return true;
                }
            },
            leads: {
                selected: function() {
                    console.log('leads.selected')
                    return true;
                }
            },
            onSave: function() {
                console.log('onSave')
                return true;
            }
        };
        return this;
    };
    return CustomWidget;
});