Ajax-вызов возвращает «undefined» только во время первого вызова

Я пытаюсь сделать рабочий стол похожим на справку по вводу текста, используя таблицу datatable.in с навигацией по клавиатуре. Для этого я динамически меняю источник, а также меняю столбец заголовка. До сих пор мне это удалось, за исключением получения динамического заголовка столбца.

Чтобы получить заголовок столбца на основе заголовка ввода текста, я делаю вызов ajax и получаю список заголовков столбцов. проблема в том, что во время первого вызова ajax возвращает undefined, но во втором вызове показывает значение. Я понимаю, что это относится к асинхронному вызову, но не знаю, как с этим справиться.

Ниже мои фрагменты кода.

Вызов AJAX во внешнем .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-скрипта

$("#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);
    }       
});

Джанго Посмотреть код

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')