I am triggering a change event on a combo box for multiple values but unfortunately events are getting lost. Is there a way to wait for one event to complete before triggering the next event. Sample code is shown below
for (i = 0; i < contextFilters.length; i++)
{
var contextFilter = contextFilters[i];
if (contextFilter != "")
{
var cfData = contextFilter.split(":");
var cfName = cfData[0];
var cfVal = cfData[1];
if (cfName != null)
{
//alert("cfName : " + cfName);
//alert("cfVal : " + cfVal);
$('#context_filter').val(cfName);
$('#context_filter').trigger('change', cfVal);
}
}
}
When the event is triggered a new select box is added to the DOM but not all select boxes are getting added.
Also the change event handler is a s shown below
$('#context_filter').change(function(event, selectValues)
{
if ($(this).prop("selectedIndex") > 0)
{
populateDateValues();
var contextFilterComboObject = $(this);
var selectedVal = $(contextFilterComboObject).val();
var validate = $('#collapsiblePanel :input').attr('disabled') == null;
if (!validate)
{
$('table[id*=OtherOptions] :input').attr('disabled', false);
$('#collapsiblePanel :input').attr('disabled', false);
}
var formInput = decodeURIComponent($('#rptInputParams').serialize());
formInput += "&validate=" + validate;
$('#ajaxBusy').show();
$.getJSON('GetContextFilterData', formInput, function(data)
{
var selectBox = '<tr><td class="celltoppad"><b>' + selectedVal +
' : </b></td> <td class="celltoppad"><select multiple="multiple" name="' +
selectedVal.toLowerCase() + '" id="' + selectedVal.toLowerCase() + '" >';
var errorMsg = '';
var errorCount = 1;
errorMsg += '<html>';
$.each(data.errorMessageList, function(index, value)
{
errorMsg += errorCount + ') ' + value + '</br></br>';
errorCount++;
});
errorMsg += '</html>';
if (errorCount > 1)
{
$('#ajaxBusy').hide();
showErrorDialog(errorMsg, errorCount * 20);
$(contextFilterComboObject).prop("selectedIndex", '0');
return;
}
$.each(data.contextFilterDataList, function(index, value)
{
selectBox += '<option value="' + value + '">' + value + "</option>";
});
selectBox +=
'</select></td><td class="celltoppad"><a href="#"><img id="removeCF" ' +
'src="../images/remove.png"/></a></td></tr>';
$('#ajaxBusy').hide();
// If the context filter has not been already added.
if ($('#' + selectedVal.toLowerCase()).length == 0)
{
$('a[id*=_showDialog]').hide();
toggleDatePickerLink();
$('img#removeDate').hide();
$('table[id*=OtherOptions] :input').attr('disabled', true);
$('#collapsiblePanel :input').attr('disabled', true);
$('table#context_filter').append(selectBox);
$(contextFilterComboObject).prop("selectedIndex", '0');
}
if (selectValues != null)
{
$('#' + selectedVal.toLowerCase()).val(selectValues.split(","));
}
$('#' + selectedVal.toLowerCase()).multiselect({
noneSelectedText: 'Please select',
selectedList: 3,
selectedText: '# of # selected',
position: {
my: 'left center',
at: 'right center',
offset: '20 100'
}
}).multiselectfilter();
});
}
});
I was able to figure out the solution to my problem, when the back button is clicked and the change event is fired then I made the ajax call using async as false and that resolved the issue. This is because if the async is true json calls happen simultaneously and some events are lost during that period.
Thanks