CODEWITHSUNDEEP
javascriptjqueryajax
user4408375
user4408375

Reputation:

How to make ajax call for div update wait until its completion

I using fusion chart so in fusion chart link events I have Following code

if (eventObject.eventType == "linkeditemopened") {
   var url = "/" + $("#appName").val() + "/reports/getUserFilter?isSelectedLegends=true&isSelected=false&isDuplicateReq=true"          
   $('#legendListIdDiv').load(url);
   loadMultiselectDropdown()
}

and loadMultiselectDropdown() method below

function loadMultiselectDropdown(){
    alert('called load mil')
    var filterList1= $("#updatedlegendListId").val();
    var filterList= $("#legendListId").val();
    alert('type-- '+typeof filterList)
    console.log('filterList1-- '+filterList)
    alert('type-- '+typeof filterList1)
    console.log('filterList1-- '+filterList1)
    var filterList= $("#legendListId").val();
    if(!filterList1 == ''){
        $("#impact-report-user-filter-dropdown-div").show();
        $("#impact-report-user-filter-dropdown").multiselect({ 
              noneSelectedText: 'Select Legends',
              selectedText: '# Legends Selected'
        });
        for(f in filterList1){
            $('#impact-report-user-filter-dropdown').append($('<option>', {
                 value: filterList[f],
                 text:  filterList[f]
            }));
        }
        $("#impact-report-user-filter-dropdown").multiselect("refresh"); 
    }
}

But at line console.log('filterList1-- '+filterList1) im getting undefined instead of some values as string.

here is dom 

`<div id="legendListIdDiv">
    <input type="hidden" name="updatedlegendList" id="updatedlegendListId" value="Hyderabad Factory,Delhi Registered Office,Mumbai Warehouse,Bangalore Development Centre,">
</div>`

and why? I guess its because ajax is not completed before execution of var filterList1= $("#updatedlegendListId").val(); line

How to overcome?

Upvotes: 1

Views: 46

Answers (1)

vcanales
vcanales

Reputation: 1818

Call loadMultiselectDropdown() as the callback for load():

if (eventObject.eventType == "linkeditemopened") {
   var url = "/" + $("#appName").val() + "/reports/getUserFilter?isSelectedLegends=true&isSelected=false&isDuplicateReq=true"          
   $('#legendListIdDiv').load(url,loadMultiselectDropdown);
}

Ajax requests are asynchronous, so you somehow have to wait for it to end to be able to use the results. In your code, you call loadMultiselectDropdown() immediately after you make the call, which means the request results are not ready by the time you call loadMultiselectDropdown().

Upvotes: 2

Related Questions