0

我正在使用Eric Hynd 出色的多选插件来填充几个下拉菜单。

一是业务单位：...

$('#lbBusinessUnits').multiselect({
height: "auto",
selectedList: 20
});

...第二个是业务领域（#lbBusinessAreas）。...

$('#lbBusinessAreas').multiselect({
selectedList: 20
});

...当像这样检查一个单元时，区域列表会更新：

// Business Units List Box Change
$('#lbBusinessUnits').bind("multiselectclick", function (event, ui) {
    var selectedPeriod = $('#ddlSalesPeriods').val();
    var selectedUnit = ui.value;
    var selectedUnitText = ui.text;
    var checkedUnit = ui.checked;
    var areChecked = $(this).multiselect("getChecked").map(function () { return this.value; }).get();

if (areChecked.length > 0) {
    url = '/InvoiceException/LoadBusinessareasBySalesPeriodBusinessUnit';
    $.getJSON(url, { selectedSalesPeriod: selectedPeriod, selectedBusinessUnits: areChecked }, function (areas) {
    var areaSelect = $('#lbBusinessAreas');
    areaSelect.empty();
    $.each(areas, function (index, optionData) {
         areaSelect.append($('<option/>', { value: optionData.Id, text: optionData.Name }));
      });
    });
    }
else {
     var url = '/InvoiceException/LoadBusinessAreasBySalesPeriod';
    $.getJSON(url, { selectedSalesPeriod: selectedPeriod }, function (areas) {
    var areaSelect = $('#lbBusinessAreas');
    areaSelect.empty();
    $.each(areas, function (index, optionData) {
    areaSelect.append($('<option/>', { value: optionData.Id, text: optionData.Name }));
    });
  });
}
$('#lbBusinessAreas').multiselect("refresh");
});

JSON 结果由 MVC3 控制器处理，并从 URL 调用中正确返回。IE 返回的数据看起来不错。

但是，区域框 (#lbBusinessAreas) 在单击后不会正确更新。它似乎落后了。似乎在刷新框时出现了竞争条件。

当我将它放入 Firebug 并在它调用 multiselect("refresh") 的点放置一个断点时，当我逐步通过调试器并完全按照应有的方式运行时，一切正常。

这真的是在选项更新之前完成刷新的竞争条件吗？是因为它是一个 ajax/getJson 调用吗？

我是否需要移动呼叫以刷新或以某种方式找出以确保操作顺序？IE 选项需要完成更新，然后需要进行刷新。

4

1 回答 1

0

我认为在一切都说完之后进行简单的刷新就可以了。/headbonk 时刻，您意识到您必须等待 getJson 调用成功返回。所以我不得不将刷新移动到每个调用的成功函数中。在这里发布更改/答案，以防其他人有“哦，呃”的时刻。

// Business Units List Box Change
$('#lbBusinessUnits').bind("multiselectclick", function (event, ui) {
    var selectedPeriod = $('#ddlSalesPeriods').val();
    var selectedUnit = ui.value;
    var selectedUnitText = ui.text;
    var checkedUnit = ui.checked;
    var areChecked = $(this).multiselect("getChecked").map(function () { return this.value; }).get();

    if (areChecked.length > 0) {
        url = '/InvoiceException/LoadBusinessareasBySalesPeriodBusinessUnit';
        $.getJSON(url, { selectedSalesPeriod: selectedPeriod, selectedBusinessUnits: areChecked }, function (areas) {
            var areaSelect = $('#lbBusinessAreas');
            areaSelect.empty();
            $.each(areas, function (index, optionData) {
                areaSelect.append($('<option/>', { value: optionData.Id, text: optionData.Name }));

            });
            **$('#lbBusinessAreas').multiselect("refresh");**
        });
    }
    else {
        var url = '/InvoiceException/LoadBusinessAreasBySalesPeriod';
        $.getJSON(url, { selectedSalesPeriod: selectedPeriod }, function (areas) {
            var areaSelect = $('#lbBusinessAreas');
            areaSelect.empty();
            $.each(areas, function (index, optionData) {
                areaSelect.append($('<option/>', { value: optionData.Id, text: optionData.Name }));
            });
            **$('#lbBusinessAreas').multiselect("refresh");**
        });
    }
});
于 2012-04-11T13:27:55.353 回答