2012-04-10 4 views
0

나는 두 개의 드롭 다운을 채우는 데 Eric Hynd's wonderful multiselect plug in을 사용하고 있습니다.이 JQuery Multiselect 경쟁 조건을 수정하려면 어떻게해야합니까?

하나는 사업 단위입니다 : ...

$('#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에 넣을 때 멀티 포인트 ("새로 고침")를 호출하는 지점에 중단 점을 넣으면 디버거를 단계별로 실행할 때 모든 것이 올바르게 작동하고 정확히 작동해야합니다.

정말 옵션이 업데이트되기 전에 새로 고침이 끝나는 경쟁 조건입니까? 그것은 ajax/getJson 호출이기 때문입니까?

작동 순서를 확인하려면 전화를 새로 고침하거나 다른 방법으로 찾아야합니까? I.E. 옵션을 업데이트해야하며 새로 고침이 필요합니다.

+1

ajax'getJSON' 호출의 완료 또는 성공 이벤트 중에 새로 고침을 수행하십시오. – danludwig

+0

고마워, 나는 신선한 눈으로 오늘 아침에 일하러 왔고, 당신의 의견은 getJson에서 성공 전화를하는 동안 나는 그 자리를 새롭게 바꿀 수있게 도와주었습니다. 때로는 자바 스크립트에서 대괄호가 너무 많이 될 수 있습니다. –

답변

0

모든 것이 완료된 후 간단한 리프레시가 가능하다고 생각했습니다. getJson 호출이 성공하기를 기다려야한다는 것을 알게되면서/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");** 
     }); 
    } 
}); 
관련 문제