ajax call returns 'undefined' during first call only

Question

I am trying to make a desktop like text input help using datatable.in table with keyboard navigation. For that I am dynamically changing the source and also change the header column. So far I have succeeded in that except getting dynamic column header.

For getting the column header based on the text input header, I am making an ajax call and getting the list of column header. the issue is during first call ajax returns undefined but in the second call it shows the value. I understand this is pertaining to the asynchronous call but not sure how to handle this.

Below is my code snips.

AJAX call in external .js

function ajaxCall(ipUrl, callType = "POST", dataIn) {
 
    return $.ajax({
        url: ipUrl,
        type: callType,
        data: dataIn,
        dataType: "json",
        success: function (response) {

        retData = response.data;
        alert('success'+ retData);
        return retData;             
    }, error: function (err) {
            alert("fail" + JSON.stringify(err));
        }, //error
    });
    //alert('in js'+ retData);
    //return retData;     
}

HTML Script tag

$("#btn").click( function (e) {
    var tData = { action: 'getHeader',
        csrfmiddlewaretoken: 'Gys4TSx3ODJLcMDuXlSvS7DopVZr1HWEDLg9AlJsARXp7wmUGAxxKwo6uLVXIrf2',
    }    
    tmp = ajaxCall('dyncolheader','GET',tData) ;
    if (tmp == undefined) {
        alert('second call');
        tmp = ajaxCall('dyncolheader','GET',tData) ;
        alert('tmp' + tmp);
    } else {
      alert('else' + tmp);
    }       
});

Django View code

def dyncolheader(request):
  hrdText = 'First,Second,Third'  
   
if request.is_ajax and request.method == 'GET':
    print('ajax call')          
    if request.GET.get('action') == 'getHeader':       
        print('get header')          
        return JsonResponse({ 'data': hrdText }, status=200)
    
return render(request, 'dyncolheader.html')

score 0 · Accepted Answer · answered Dec 15 '20 at 17:40

0

use this code in external.js file

function ajaxCall(ipUrl, callType = "POST", dataIn) {
    console.log('function Call', ipUrl, callType, dataIn);
    retData = null;

    $.ajax({
        url: ipUrl,
        type: callType,
        data: dataIn,
        dataType: "json",
        async: false,
        success: function (response) {
            retData = response.data;
        },
        error: function (err) {
            alert("fail" + JSON.stringify(err));
        },
    });
    console.log('retData', retData);
    return retData;
}

answered Dec 15 '20 at 17:40

Nikunj

305
1
7

The use of `async: false` [is deprecated and discouraged due to its detrimental effects to the end user's experience](https://stackoverflow.com/questions/28680897/jquery-ajax-async-false-causes-a-strange-warning). Don't use it. – Ivar Dec 15 '20 at 17:45
so plz. give the solution for this issue – Nikunj Dec 15 '20 at 17:57
I already did under the question. The solution can be found [here](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). – Ivar Dec 15 '20 at 18:37
Hi Ivar,Thanks for the valuable solution. If i understood correctly, assigning value to the outer scope variable should help here, but In my case " retData = response.data;" where retData is outer scope variable outside the function ajaxCall. But still it is called asynchronous and not as expected. Though it is not suggested async:false worked for me. but i wan to implement robust solution. any further suggestion plz. – AhmedRaza Dec 15 '20 at 19:34
@AhmedRaza Assigning to an outer scope doesn't work because the code inside the `success` callback will be executed _after_ `return retData` is ran. So at the time you return the data, `retData` is still `null` . The duplicate that you accepted explains this concept and ways how you can use it. Given that you accepted it, I hope it helped you. – Ivar Dec 16 '20 at 14:45

ajax call returns 'undefined' during first call only

1 Answers1