How to call jQuery AJAX in every n seconds?
By Faruque Ahamed MollickAJAX is awesome. It does not need to refresh the whole page to load something on a web page. previously I have also discussed on AJAX on this post – Process form value in PHP using jQuery AJAX method. Here is another post related to jQuery AJAX – AJAX search from MySQL database in PHP example.
In this tutorial, I am going to let you know how to call an AJAX request in every n seconds. In many modern websites, you can see this functionality.
For example, on an eCommerce website or on a money transfer website you can see a page waiting for the payment to be done. It actually sends an AJAX request every time after a specific interval of time. In this way, it is actually getting data for your payment status to check if the payment was made or not by you.
We may need to call the AJAX every 10 seconds or maybe in 5 seconds time intervals.
How can we do that? Here I am going to help you by providing you the code snippets.
But how do these AJAX request call without any user interaction with the mouse or keyboard?
If you logged in on Facebook, you can see that you didn’t click on any button or didn’t touch the keyboard and still, the new message is coming when somebody sends you a message. Online friend list updating automatically.
Well, these things are happening by sending an AJAX request again and again after a time interval. After that certain time interval, the AJAX call occurs. It can be easily done by using the jQuery JavaScript library.
The jQuery code to call AJAX every 5 seconds
In this example, I am going to give you a simple example code snippet of jQuery AJAX that can execute AJAX in every 5 seconds. We are going to use the setInterval JavaScript method. Using the setInterval() method we can do the task easily.
Below is given the jQuery code:
$(document).ready(function(){
sendRequest();
function sendRequest(){
$.ajax({
url: "example.php",
success:
function(data){
$('#listposts').html(data); //insert text of test.php into your div
},
complete: function() {
// Schedule the next request when the current one's complete
setInterval(sendRequest, 5000); // The interval set to 5 seconds
}
});
};
});You can see in the above code that we have created a method sendRequest() and then apply the setInterval() method on that sendRequest method.
Now the code will be used to send an AJAX request every 5 seconds. The time interval 5000 refers to milliseconds. 1 seconds form of 1000 milliseconds.
You can use the same code whenever it is required with your own modifications. Just replace the time interval with the time that you need in microseconds. and send the request to your targeted URL.
This code is wrong it is sending ajax calls repeteadly + one in n seconds You shold correct it by
setInterval (function sendRequest(){
$.ajax({
url: “example.php”,
success:
function(data){
$(‘#listposts’).html(data); //insert text of test.php into your div
},
}),1000};
your code is also wrong,this is correct format… yes i know there is a silly mistake but when someone who is newbie will see this might get confused ..so always put right code with proper syntax.
setInterval (function sendRequest(){
$.ajax({
url: “example.php”,
success:
function(data){
$(‘#listposts’).html(data); //insert text of test.php into your div
},
}),1000);
I think your code is wrong also, you didn’t close the sendRequest function.
This maybe the correct one:
setInterval (function sendRequest(){
$.ajax({
url: “example.php”,
success:
function(data){
$(‘#listposts’).html(data); //insert text of test.php into your div
},
})},1000);
@cem good call! it increases double the calls every iteration :).
thank you very much
How can I add this code to HTML?
and how can i call several functions in one?