Question

我正在使用Eric Hynd's wonderful multiselect plug in来填充几个下拉菜单。

一个是业务部门： ...

$('#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调用中正确返回。 I.E.返回的数据看起来正确。

但是，单击后区域框（#lBBusinessAreas）无法正确更新。它似乎只落后一次。看来随着盒子的刷新会出现竞争状况。

当我把它放在Firebug中并在它调用multiselect（“刷新”）的位置放置一个断点时，当我逐步调试调试器并且行为完全正常时，一切正常。

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

我是否需要移动呼叫以刷新或弄清楚以确保操作顺序？ I.E.选项需要完成更新，然后需要进行刷新。

Answer 1

我认为简单的刷新之后，所有的说法和完成都会奏效。 A / headbonk瞬间，你意识到你必须等待getJson调用的成功回来。所以我不得不将刷新移动到每个调用的成功函数中。发布变更/答案，以防其他人有＃34;哦duh＆＃34;时刻。

// 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");**
        });
    }
});

如何修复此JQuery Multiselect竞争条件？

1 个答案: