由于我维护的网站中有下拉框的数量,我编写了一个jquery扩展,它将获取指定的URL,对其进行ajax调用并使用结果填充下拉框。代码一直在工作,但现在当我在页面上有多个下拉框时,大多数(如果不是全部)都会失败。在Chrome开发人员工具中检查它们时,错误是500内部服务器错误。但是,如果我单步执行代码而不是运行代码,那么一切都可以正常运行。 Javascript如下:
(function() {
(function($, window) {
$.extend($.fn, {
loadDropdown: function(selectControl, data) {
var currentOptions, d, i, id, idField, initialBlank, initialText, initialVal, len, objData, opt, text, textField;
if (data) {
objData = data.$values || data;
} else {
return;
}
idField = selectControl.attr('data-id') || selectControl.attr('dd-id') || 'id';
textField = selectControl.attr('data-text') || selectControl.attr('dd-text') || 'name';
initialBlank = selectControl.attr('data-placeholder') || selectControl.attr('dd-placeholder') ? true : false;
initialText = selectControl.attr('data-initial-text') || selectControl.attr('dd-initial-text');
initialVal = selectControl.attr('data-initial-val') || selectControl.attr('dd-initial-val');
currentOptions = [];
if (initialVal) {
currentOptions = initialVal.split(',');
}
selectControl.find('option :selected').each(function() {
return currentOptions.push($(this).val());
});
selectControl.empty();
if (initialBlank) {
opt = $('<option>').text('');
selectControl.append(opt);
}
for (i = 0, len = objData.length; i < len; i++) {
d = objData[i];
id = d[idField];
text = d[textField];
opt = $('<option>', {
value: id
}).text(text);
if ((currentOptions && currentOptions.length > 0) && $.inArray(id.toString(), currentOptions) !== -1) {
opt.attr('selected', 'selected');
}
if (initialText && initialText === text) {
opt.attr('selected', 'selected');
}
selectControl.append(opt);
}
selectControl.trigger('chosen:updated');
selectControl.trigger('dd:loaded');
},
ddbox: function(args) {
var _this, defaults, opts;
_this = $(this);
defaults = $.extend({
url: _this.attr('data-url') || _this.attr('qf-url') || _this.attr('dd-url'),
width: _this.attr('data-width') || _this.attr('qf-width') || _this.attr('dd-width') || '100%',
allow_single_deselect: _this.hasAttr('data-placeholder') || _this.hasAttr('qf-placeholder') || _this.hasAttr('dd-placeholder') || false,
dropdownLoad: function(event, data) {
return $.fn.loadDropdown($(event.currentTarget), data);
},
dropdownLoaded: function(event) {}
}, args);
opts = {
width: defaults.width,
allow_single_deselect: defaults.allow_single_deselect
};
_this.on('dd:load', function(event, data) {
return defaults.dropdownLoad.apply(_this, [event, data]);
});
_this.on('dd:loaded', function(event) {
return defaults.dropdownLoaded.apply(_this, [event]);
});
_this.chosen(opts);
$('#overlay').removeClass('overlay-off').addClass('overlay');
return $.ajax({
method: 'GET',
url: defaults.url,
success: function(html) {
$('#overlay').removeClass('overlay').addClass('overlay-off');
return _this.trigger('dd:load', [html]);
}
});
}
});
return $(document).ready(function() {
return $('select[data-url], select[qf-url], select[dd-url]').each(function() {
return $(this).ddbox();
});
});
})(window.jQuery, window);
}).call(this);
它查询的URL都是以JSON格式返回id / name对的Web API:
{"$id":"1","$values":[{"$id":"2","id":1,"name":"None"},{"$id":"3","id":3,"name":"Safety and Hazard Analysis Software and Design Software"},{"$id":"4","id":4,"name":"Safety Management and Administrative Controls Software"},{"$id":"5","id":2,"name":"Safety System Software"}]}
有人可以告诉我这里发生了什么吗?
编辑: 在下面的评论之后,我将ajax调用更改为同步,一切都开始正常工作。我不禁想到还有其他方法可以做到这一点。