このJQuery Multiselect競合状態を修正するにはどうすればよいですか？

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.返されたデータは正しく見えます。

ただし、領域ボックス（#lbBusinessAreas）はクリック後に正しく更新されません。それは1回のクリックであるようだ。箱のリフレッシュで競合状態が発生しているようです。

私がFirebugに入れ、ブレークポイントをマルチセレクション（ "リフレッシュ"）と呼ぶところに置くと、デバッガをステップ実行するときにすべてが正しく動作し、まさにそのように動作します。

これは真に競争状態で、オプションが更新される前に更新が完了していますか？それはajax/getJsonコールなのでしょうか？

操作の順番を確認するために、電話をかけ直したり、何らかの数字を特定する必要がありますか？ I.オプションの更新が完了してから、リフレッシュが発生する必要があります。

Answer 1

すべてのことが成し遂げられた後に簡単なリフレッシュができると思いました。あなたがgetJsonコールの成功が戻ってくるのを待たなければならないことに気が付いたら、A/headbonkの瞬間。だから私は、それぞれの呼び出しの成功関数にリフレッシュを移動しなければならなかった。他の誰かが "ああああ"の瞬間を抱えている場合に、ここに変更/回答を投稿してください。

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