Ajax aysnc request in JS

See more:

Javascript

Ajax

Hello,

I am using this function to acquire some data from a DB and store the result in a class stripLayout. However the problem is that during the first run the class remains empty, so I introduced the async: false and solved the problem.

But I was reading that this is not the right way to do it, and 'promise' can be used instead. I could not find a way that makes this code work when I tried to do such a change. Can anyone help me out please?

function getStripLayoutsDetails(){
	$.ajax( 'admnStripLayouts_getStripLayoutDetails.php',
	{
		async: false,
		type: 'POST',
		data: {					
			LayoutName: $('#aSL_stripLayoutsList').val()					
		},
		success: function (result) {

		stripLayout = {
			layoutName:result.stripLayoutDetails[0].LayoutName,
			version:result.stripLayoutDetails[0].Version
		};				
							
		if(result.status == "Error"){
			displayError(result.detail, 'Error Retrieving Strip Layout Details', 'critical');
			return;
			}					
		},							
		error: function (resp, status, xhr) {
			displayError('Valid Value lookup request to server failed', 'Lookup Error', 'critical');
		}
	}); 
}

What I have tried:

Tried this change, however this is behaving similar to when not having async: false

function getStripLayoutsDetails(){
    $.ajax(
        { url: "/admnStripLayouts_getStripLayoutDetails.php" ,
            type: 'POST',
            data: {
                LayoutName: $('#aSL_stripLayoutsList').val()
            }
    })
    .done(function(getStripLayoutsDetails) {
        stripLayout = {
            layoutName:getStripLayoutsDetails.stripLayoutDetails[0].LayoutName,
            version:getStripLayoutsDetails.stripLayoutDetails[0].Version
    };
}).fail(function(e) {
    displayError('Valid Value lookup request to server failed', 'Lookup Error', 'critical');

    }).always(function() {} );
}