使用Coldfusion 10和jQuery根据另一个select的值动态填充一个select。我已将AJAX设置为同步,因此在AJAX请求完成之前,它不会尝试填充选择。但是,每隔一段时间用户就会看到没有任何选项的选择,这表明尽管有同步设置,但仍存在竞争条件。我的代码中是否有任何可能导致竞争条件的内容?
function fChangeTxOutcome(sel) {
/* function receives controlling select as an argument */
/* there are actually 2 sets of controller/controllee selects, so vars below identify which select should be populated, based on controller select's id */
var encCatIdList = '';
var id = sel.prop('id');
var idNum = id[id.length-1];
var txOutcomeDiv = $('##htreat' + idNum);
var txOutcomeSelect = document.getElementById('txOutcomeSelect' + idNum);
/* encCatIdList will be passed to a Coldfusion function/query via AJAX, to get the correct set of options */
if (sel.val() != '9' && sel.val() != '714') {
txOutcomeDiv.show();
encCatIdList = '8,11';
}
else if (sel.val() == '9') {
txOutcomeDiv.show();
encCatIdList = '9';
}
else if (sel.val() == '714') {
txOutcomeDiv.hide();
encCatIdList = '0';
}
/* assessment.cfc is essentially an object. getEncCatChildrenRemote is the function, and encCatIdList is an argument passed to it */
$.ajax({
url: "#request.webroot#cfc/assessment.cfc?method=getEncCatChildrenRemote&encCatIdList=" + encCatIdList,
success: function (jsonText) {
var qryTxOutcomes = JSON.parse(jsonText);
//qryTxOutcomes is now an object with 2 arrays: COLUMNS and DATA.
//COLUMNS is an array of strings of the column names.
//DATA is an array of arrays, where each array is a row.
//Thus, every data cell is DATA[rownumber][columnnumber]
//[0] = cEncOutcomeId
//[1] = cEncCatId
//[2] = bTreatProgActive
//[3] = encOutcomeName
//[4] = encCatId
//[5] = iCodedecodeId
//[6] = encCatName
//clear out any options in the selectfirst
for(var i=txOutcomeSelect.options.length-1; i>=0; i--) {
txOutcomeSelect.remove(i);
}
var firstOption = document.createElement('option');
firstOption.setAttribute('value', '');
firstOption.innerHTML = '--Select an Option--';
txOutcomeSelect.appendChild(firstOption);
/* this is where the select is populated. At this point there should be a JSON object returned from the AJAX call, but it appears that occassionally the below code is running before the AJAX call is complete, so the select ends up getting populated with nothing */
$.each(qryTxOutcomes.DATA, function() {
var thisOption = document.createElement('option');
thisOption.setAttribute('value', $(this)[5]);
thisOption.innerHTML = $(this)[3];
txOutcomeSelect.appendChild(thisOption);
});
},
async: false
});
}// end fChangeTxOutcome()