Problem reposting data periodically using AJAX to Laravel backend - php

Question

Am working on a PHP Laravel project whereby when a user clicks on a button on the website I perform some background task using AJAX to a PHP backend whreby I trigger a call to a payment gateway, when the user pays via his/her phone,,, I check the payment status (where 1 means paid, 0 means not paid) and if status is equal to 1, I redirect the user to a success page.
Currently am using AJAX to post data from the frontend to the backend and I want to post the data periodically after 5 seconds (where I give the user some time to pay before reaching out to the API to see if the status has changed to 1 then redirect the user).
Am trying to use setTimeout method in JavaScript and dd() the data from the controller which only dumps the data once but doesnt dump after 5 seconds
AJAX code to post data to the backend after 5 seconds
$('.mpesa').on('click', function () {
// run the first time; all subsequent calls will take care of themselves
setTimeout(executeQuery, 5000);
});
function executeQuery() {
alert('clicked');
//Adds Class to the page when it loads
$('.PAY').addClass("loading");
//Gets the MPESA type
var type = $('.mpesa').prop('id');
var quote = $('#quote').val();
var phone = $('#phone').val();
//Converts to a JSON object
var type ={
'type': type,
'quote' : quote,
'phone' : phone,
};
console.log(type);
$.ajax({
//Contains controller of payment
type: 'POST',
url: 'paymentFinal',
data: JSON.stringify(type),
contentType: 'application/json',
dataType: "json",
success: function success(response) {
console.log(response);
},
error: function error(data) {
console.log(data);
}
});
}
//End AJAX call
Controller file being called
public
function payFinal(Request $request)
{
dd($request->all());
}
Updated AJAX code
$('.mpesa').on('click', function () {
setInterval(function() {
alert('clicked');
//Gets the MPESA type
var type = $('.mpesa').prop('id');
var quote = $('#quote').val();
var phone = $('#phone').val();
//Converts to a JSON object
var type ={
'type': type,
'quote' : quote,
'phone' : phone,
};
console.log(type);
$.ajax({
//Contains controller of payment
type: 'POST',
url: 'paymentFinal',
data: JSON.stringify(type),
contentType: 'application/json',
dataType: "json",
success: function success(response) {
if(response) {
window.location.href="success";
}
},
error: function error(data) {
console.log(data);
}
});
}, 15000); // Execute every 15 seconds
});

Answer 1

setTimeout only executes the specified function once after the delay you set. Use setInterval instead so your function get called periodically.
=========================================================================
Update:
You want your function to execute immediately when the user clicks and after that calls itself every 15 secs. To achieve that, you can just use the following code:
$('.mpesa').on('click', executeQuery);
function executeQuery() {
alert('clicked');
//Adds Class to the page when it loads
$('.PAY').addClass("loading");
//Gets the MPESA type
var type = $('.mpesa').prop('id');
var quote = $('#quote').val();
var phone = $('#phone').val();
//Converts to a JSON object
var type ={
'type': type,
'quote' : quote,
'phone' : phone,
};
console.log(type);
$.ajax({
//Contains controller of payment
type: 'POST',
url: 'paymentFinal',
data: JSON.stringify(type),
contentType: 'application/json',
dataType: "json",
success: function success(response) {
console.log(response);
},
error: function error(data) {
console.log(data);
}
});
//use setTimeout here
setTimeout(executeQuery, 15000);
}
Use setTimeout in your function to call itself would solve your problem.
=========================================================================
[To answer OP's question on how to stop the timer]
In your function, say you want the function to stop execution after 5 times.
Set up a variable outside of the function:
var counter = 0;
Then in executeQuery:
if (counter <= 5) { //or use your own logic
counter++;
setTimeout(executeQuery, 15000);
}
Remember that setTimeout is a one-time-thing, so you can just control when to stop calling it.