Combobox: setValue within an onSelect

[2plus2]

I have the following function that is called via a button click. I'm building out a form before displaying the form on a popup. The issue is the onSelect event for the Combobox, which is being triggered by a setValue within the same onSelect - this causes an infinite loop error. I can't use onChange, because onSelect passed the whole row and onChange only passes the new and olde value. I need the row object because I store a bunch of extra data in the returned json object that I use for processing:

Code:

	function confirmNewThresholdDetail() {
	    clearFormErrors('fmThresholdDetail');
	    $('#ProcessType').val('New');
	    $('#InactiveThresholds').combobox({
	        url: '/ctrls/ajax.aspx?a=getInactiveThresholds&r=' + accountId + '&i=' + $('#ThresholdId').val(),
	        valueField: 'id',
	        textField: 'text',
	        panelHeight: 'auto',
	        editable: false,
	        formatter: function (combo) {
	            if (isNaN(combo.text)) {
	                return combo.text;
	            } else {
	                var gTh = '';
	                if (combo.GreaterThan == '1') { gTh = '> '; }
	                return gTh + formatNumber(combo.text, '###,###,###');
	            }
	        },
	        onSelect: function (combo) {
	            $('#UpperThreshold').prop('disabled', false);
	            $('#fmThresholdDetail').form('clear');

	            if (combo.id == "0") {
	                // new threshold
	                $('#AccountThresholdDetailId').val("0");
	                $('#ThresholdDetailId').val('0');
	                $('#IsStandard_Yes').prop('checked', true);
                    $('#GreaterThan').prop('checked', false);
	                $('#NmbrOfApprovers').combobox('setValue', '1');
	                $('#UpperThreshold').val('');
	            } else {
	                if (combo.id != "*") {
	                    // existing inactive
	                    $('#fmThresholdDetail').form('load', combo);
	                    $('#IsStandard_Yes').prop('checked', true);
	                    $('#AccountThresholdDetailId').val(combo.AccountThresholdDetailId);
	                    $('#ThresholdDetailId').val(combo.ThresholdDetailId);
	                    $('#ThresholdRule').text('');
	                    $('#UpperThreshold').val(formatNumber(combo.UpperThreshold, '###,###,###'));
	                    $('#UpperThreshold').prop('disabled', true);
	                }
	            }
	            // reset combo
	           $('#InactiveThresholds').combobox('setValue', combo.id);
	            $('#InactiveThresholds').combobox('setText', function () {
	                if (isNaN(combo.text)) {
	                    return combo.text;
	                } else {
	                    return formatNumber(combo.text, '###,###,###');
	                }
	            });

	            // Clear any rules
	            $('#ThresholdRule').text('');

	            if (combo.id != "*") {
	                // Show Detail
	                $('#ThresholdLevelDetail').slideDown();
	            } else {
	                $('#ThresholdLevelDetail').slideUp();
	            }
	        }
	    });

	    $('#ThresholdLevelDetail').hide();
	    $('#SelectInactiveThresholds').show();
	    $('#UpperThreshold').prop('disabled', false);

	    $('#ThresholdCurrency_Txt').text($('#ThresholdCCY_Txt').text());

	    $('#dlgThresholdDetail').dialog('open').dialog('setTitle', 'New Threshold').dialog('center');
	}

I really need a simple solution here because this design pattern is used all over the place. (And yes this is the same 1.3.x to 1.8.x conversion rearing it's ugly head.)

[jarry]

If you want to get the selected row from the 'onChange' event handler, please try this.

Code:

$('#cb').combobox({
	onChange: function(value){
		var data = $(this).combobox('getData');
		var rows = data.filter(function(r){
			return r.value == value;
		})
		var row = rows[0]
		console.log(row)
	}
})