$('#estimate').show(); is currently triggered after the API call is completed, but I am looking to make it happen before the API call.
The styling is applied only after the API call is finished. Is there an alternative method to achieve this?
If the response takes 3 seconds, the div is displayed after 3 seconds, but I want it to show before that time.
var formData = {
"latlon1": "80.2707,13.0827",
"latlon2": "78.7047,10.7905"
}
$("#dSedan,#dSuv,#dInnova,#dSuvR,#dSedanR").on('click', function () { $('#estimate').show();
$("#estdistancedt").empty()
$(".estdtbreakup").html("")
$("#estimate .estamount").html("<img src='images/loading.gif' />");
getEstimate(formData);
})
function getEstimate(formData) {
if (formData.latlon1 && formData.latlon2) {
console.log(formData);
var settings = {
"url": serverurl + "rest/estimatecalculate",
"method": "POST",
"timeout": 0,
'dataType': "json",
"crossDomain": true,
"headers": {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
"data": JSON.stringify(formData),
};
$.ajax(settings).done(function(element) {
$("#estdistancedt").empty().append("Distance:" + element.distance.toFixed() + " kms");
$(".estamount").html(element.estimate);
$(".estdtbreakup").html("[Base charges: ₹ " + element.basecharge + " / Driver bata: ₹ " + element.driverbata);
if (element.isp != 0) {
$(".estdtbreakup").append(" / ISP: ₹ " + element.isp);
}
if (element.hillcharges != 0) {
$(".estdtbreakup").append(" / Hill charges: ₹ " + element.hillcharges);
}
$(".estdtbreakup").append(" + Toll at actuals]");
$(".tripamount").val(element.estimate)
});
}
}