I have some jQuery that is interacting with a script that controls a credit card terminal. It uses getJSON and has a long wait time, because it is waiting for them to interact with the terminal. The response time can be anywhere between 10 seconds and a minute.
The browser freezes up entirely while it is waiting, and eventually a browser error pops up saying the page is unresponsive.
This either didn't use to cause an issue or it wasn't noticed until now. How can I handle this long wait time without locking up the browser and showing an error?
$(".completeOrderAjax").html('Instruct customer to insert or swipe credit card');
$.ajaxSetup({ async: true });
$.getJSON( "/payment-api.php", function( data ) {
if(data.status == 'declined') {
if(data.resptext == null) {
$(".completeOrderAjax").html('Payment declined, customer may have pressed decline button');
}else{
$(".completeOrderAjax").html('Payment Declined: '+data.resptext);
}
}
if(data.status == 'approved') {
$(".completeOrderAjax").html('Payment was approved');
var ccResponse = JSON.stringify(data);
if(orderId == 0) {
reSaveOrder('credit', ccResponse);
}else{
saveOrder('credit', ccResponse);
}
}
}).fail(function() {
$(".completeOrderAjax").html( "Payment request failed due to unknown error" );
});