Print Page - Combobox error

Title: Combobox error
Post by: y.bykov on February 28, 2017, 05:42:50 AM

When I open form with combobox field(s) and fastly close it, for example I need another form, I will get error

Code:

Uncaught TypeError: Cannot read property 'options' of undefined
    at loadData (jquery.easyui.all.js:17514)
    at jquery.easyui.all.js:17548
    at Object.success (jquery.easyui.all.js:17998)
    at j (jquery-1.11.3.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-1.11.3.min.js:2)
    at x (jquery-1.11.3.min.js:5)
    at XMLHttpRequest.b (jquery-1.11.3.min.js:5)

I understand it's happen because combobox is not fully loaded/initialized, but how to fix this bug ?
I don't know how to fix 'loadData' private method without changing lib itself internally like this

Code:

if (!state) {
    return;
}

Thanks for help!

Title: Re: Combobox error
Post by: jarry on February 28, 2017, 06:19:11 AM

Please show an example to demonstrate your issue.

Title: Re: Combobox error
Post by: y.bykov on March 01, 2017, 06:13:29 AM

Now I can only explain how I used form module cause it difficult to take out dialog part of my app.
First of all I create new dialog window:

Code:

dialog_window = $('<div id="dd" class="easyui-dialog" data-options="closed:true" style="padding:5px"></div>');
dialog_window.appendTo('BODY');

Than build dialog_window_config with default parameters like in documentation (title, width, height, etc).
Important! I load form in dialog thru 'href' dialog param:

Code:

{ href: '/form/common/cable.html' }

After form loading I use onLoad handler for configuration combobox field(s):

Code:

const cableOnLoad = (user, dialog_name, data) => {
        const $vendor = $('#cd_vendor_id');

        $vendor.combobox({
            url: config.remote.api + sections['vendors'].rest + '?for_select',
        });

        if (data !== undefined) {
            $vendor.combobox('setValue', data.cd_vendor_id);
        }
    };

My /form/common/cable.html form:

Code:

<form id="cable_create_form">
    <table class="form">
        <tr>
            <td>{{common.cable.dialog.create.label.part_number}}:</td>
            <td><input class="easyui-textbox" name="part_number" style="width:250px" data-options="required:true"/></td>
        </tr>
        <tr>
            <td>{{common.cable.dialog.create.label.awg}}:</td>
            <td><input class="easyui-textbox" name="awg" style="width:250px" data-options="required:true"/></td>
        </tr>
        <tr>
            <td><label for="is_twisted">{{common.cable.dialog.create.label.twisted}}:</label></td>
            <td>
                <input type="hidden" name="is_twisted" value="0"/>
                <input class="easyui-checkbox" type="checkbox" name="is_twisted" id="is_twisted" value="1"/>
            </td>
        </tr>
        <tr>
            <td>{{common.cable.dialog.create.label.vendor}}:</td>
            <td><input class="easyui-combobox" name="cd_vendor_id" id="cd_vendor_id" style="width:250px;" data-options="required:true"></td>
        </tr>
        <tr>
            <td>{{common.cable.dialog.create.label.comment}}:</td>
            <td><input class="easyui-textbox" name="comment" data-options="multiline:true" style="width:250px;height:100px"/></td>
        </tr>
    </table>
</form>

And finish code with builded dialog_window_config:

Code:

dialog_window.dialog(dialog_window_config);
dialog_window.dialog('center');
dialog_window.dialog('open');

My onClose method:

Code:

onClose() {
                        app.current_dialog = false;
                        app.keypress.activate();

                        let comboboxes = dialog_window.find('INPUT.easyui-combobox');
                        if (comboboxes.length > 0) {
                            comboboxes.combobox('destroy');
                        }
                        dialog_window.dialog('destroy');
                    },

I use hotkey F2 for open dialog and Esc for close.
I think bug happens when I close dialog before EasyUI finish form parsing so combobox do not initialize own options.

Title: Re: Combobox error
Post by: jarry on March 01, 2017, 05:07:32 PM

You can override the 'loader' function to change the default loading behavior. Please try to include this code to your page.

Code:

<script>
(function($){
	$.extend($.fn.combobox.defaults, {
		loader: function(param, success, error){
			var target = this;
			var opts = $(target).combobox('options');
			if (!opts.url) return false;
			$.ajax({
				type: opts.method,
				url: opts.url,
				data: param,
				dataType: 'json',
				success: function(data){
					if ($(target).parent().length){
						success(data);
					}
				},
				error: function(){
					error.apply(this, arguments);
				}
			});
		}

	})
})(jQuery);
</script>

Title: Re: Combobox error
Post by: y.bykov on March 02, 2017, 05:08:34 AM

Yes, it's work.
Simple clever solution!
Thanks for help!

EasyUI Forum

General Category => General Discussion => Topic started by: y.bykov on February 28, 2017, 05:42:50 AM