Detecting if a combo select was by a user

[devnull]

I need to be able to detect whether the onSelect() function in a combo was triggered by the user clicking on the control with their mouse, or whether the select event was triggered by the combobox('select') method.

This works, but it is using up 2 events, is there a better way

Code:

$.extend($.fn.combobox.defaults,{  
  clicked: false,
  onShowPanel: function() {
    $(this).combobox('options').clicked = true;
  },

  onHidePanel: function() {
    $(this).combobox('options').clicked = false;
  },
})

Thanks

[stworthy]

Here is another solution to override the click handler.

Code:

<script type="text/javascript">
$.extend($.fn.combobox.defaults, {
	onShowPanel: function(){
		$(this).combobox('panel').unbind('click').bind('click', function(e){
			var target = $(this).panel('options').comboTarget;
			if (!target){return;}
			var opts = $(target).combobox('options');
			var item = $(e.target).closest('div.combobox-item');
			if (!item.length || item.hasClass('combobox-item-disabled')){return}
			var row = opts.finder.getRow(target, item);
			if (!row){return}
			var value = row[opts.valueField];
			if (opts.multiple){
				if (item.hasClass('combobox-item-selected')){
					$(target).combobox('unselect', value);
				} else {
					$(target).combobox('select', value);
				}
			} else {
				$(target).combobox('setValue', value).combobox('hidePanel');
			}
			if (opts.onClick){
				opts.onClick.call(target, row);
			}
			e.stopPropagation();
		})
	}
})
$(function(){
	$('#cc').combobox({
		onClick: function(row){
			console.log(row)
		}
	})
})
</script>

[devnull]

Thanks very much for helping, but I would like to still use the OnSelect() event, but be able to detect whether the event was user initiated or programmatically selected.

[wade.zhu]

I've had the same problem
i have a comobox with 'onSelect' options, and i want get the value of a numberbox when user select a list item.
but the numberbox may NOT ready when onSelect auto triggered during the initial loading of form data

Code:

<select id="cbxDemo" class="easyui-combobox" data-options="onSelect : function(rec) {
var val = $('#nbxDemo').numberbox('getValue');// nbxDemo numberbox NOT ready when page load, we got undefined exception
alert(val);
}">
	<option value="0">N/A</option>
	<option value="1">B</option>
	<option value="2">C</option>
</select>

i don't want to set a flag to indicates if it is triggered by page initial or .form('loadData', data) or user select.
i'm now using try-catch to avoid undefined exception, but i think it is not a good way.

[stworthy]

You can call .data('numberbox') to detect if the numberbox is created successfully.

Code:

<select id="cbxDemo" class="easyui-combobox" data-options="
onSelect : function(rec) {
	var nb = $('#nbxDemo');
	if (nb.data('numberbox')){
		var val = nb.numberbox('getValue');
		alert(val);
	}
}">
	<option value="0">N/A</option>
	<option value="1">B</option>
	<option value="2">C</option>
</select>