I'm populating a table with data that automatically updates every 4 seconds using AJAX. I want to display a loading message while waiting for the AJAX to load on the initial page load only.
At the moment I have managed to display the loading message but the message appears every time the data is updated via AJAX (Every 4 seconds) - I want the loading message to only display on the initial page load before the AJAX loads initially. All subsequent AJAX updates should not display the loading message as the table has already been populated with data.
<div id="loading" style="display: none;">Loading..</div>
<script type="text/javascript">
$(document).ajaxStart(function(){
$("#loading").show();
}).ajaxStop(function() {
$("#loading").hide();
});
</script>
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
$('#load_onlineusers').load('/online_players.php').fadeIn("slow");
}, 4000);
</script>
<div id="load_onlineusers"> </div>
Above is the code that is causing the loading message to display every 4 seconds.
Use beforeSend method to show loading message and control using a global variable:
var executed = false;
$.ajax({ url: "",
type: "",
data: "",
beforeSend: function() {
if (!executed) {
// Show loading
executed = true;
}
},
complete: function() {
// Hide loading
},
success: function(data) {
}
});
Related
Hello i am working on a PHP Project where i need to load some request using ajax request. Below are my request function.
Function One: When showNotify event is click i call the ajax request to get content and use ajaxStart to show spinner untill the content is fully ready!
//* First click load nofication
$(document).on('click', '#showNotify', function() {
let check = $(this).data('check');
if(check === 0) {
//* Process notification
$(this).attr('data-check', 1);
//* Load ajax request
$(document).ajaxStart(function() {
$('#notify-wait').show();
});
$(document).ajaxComplete(function() {
$('#notify-wait').hide();
$('#list-noti').show();
});
$.ajax({
url: '/list-dd-notifications',
method: 'GET',
success: function() {
$('#notif-unread').hide();
}
});
}
});
Function Two: i need to check from the server side to see if user has a new unready notify and show up the new notification sign.
function checkNewFotify() {
$.ajax({
url: '/check-notifications',
method: 'GET',
success: function(data) {
if(data) {
if($('#notif-unread').is(":hidden"))
{
$('#notif-unread').show();
}
}
else
{
if($('#notif-unread').is(":visible"))
{
$('#notif-unread').hide();
}
}
}
});
}
//* check for new notification
setInterval(() => {
checkNewFotify();
}, 5000);
Problem: Any time the showNotify is dropdown at first it show the spinner the loader until the request is fully loaded also if the function checkNewFotify is doing is job by refreshing every 5 secs to check the server for new notification the ajaxStart in showNotify will be affected by showing the spinner loader every time the checkNewFotify is refreshing in background.
Please how can i stop it from showing the spinner loader whil it refreshing every 5 seconds.
Set the global option to false on the ajax on checkNewFotify() this will prevent handlers like ajaxStart from firing.
$.ajax({
url: '/check-notifications',
method: 'GET',
global: false,
});
i have a content to display score in html. Here is the example
<div id="homescore">0</div>
<div id="awayscore">0</div>
I want auto refresh div homescore and awayscore every 5 second without php. Is it possible
You can do it with setTimeout function.
Define a function refreshDivContent which will take your div id that needs to be refreshed.Populate div from ajax call or whatever source you are doing(I have shown an ajax example) and then call this refreshDivContent again inside setTimeout.
$(document).ready(function(){
var refreshDivContent = function(divid) {
$.ajax({
url: "path",
cache: false,
success: function(data) {
$('#' + divid).html(data);
setTimeout(function() {
refreshDivContent(divid);
}, 5000);
}
});
};
refreshDivContent('homescore'); // Use it
});
I add loading image in code that image loading till when the whole process is not completely done but how i know the page loading time because the processing time always change according to the data.
I have mention the time in my below javascript code.
<script>
$('#save').click(function() {
$('#loading').html('<img src="./images/ima.png"> loading...');
$.ajax({
success : function(d) {
setTimeout(function() {
$('#loading').html('<img src="./images/images.png">');
}, 2000);
}
});
});
</script>
Use complete to hide your loading image, instead of setout in ajax success method, this way loading image will be hidden once ajax request completes,irrespective of error or success.
<script>
$('#save').click(function() {
$('#loading').html('<img src="./images/ima.png"> loading...');
$.ajax({
success : function(d) {
//handle success
},
error: function(xhr) {
// hanndle if error occurs
},
complete: function() {
//hide loading here
$('#loading').html('<img src="./images/images.png">');
}
});
});
</script>
I’ve a ridiculous problem with my javascript setTimeout and jquery ajax function.
I’ve a webpage who needed to be refreshed every x seconds.
I use a setTimeout who call my ajax function every x seconds.
The user has the opportunity to use a boostrap modal to enter information.
What I want is to clear the timeout when the modal is shown and restart the timeout when the user closed.
My problem is on the event “shown.bs.modal” none of the functions are executed, even the alerts so my setTimout is still running while the modal is open.
If the DOM is uploaded while the modal is shown, the modal source code will be deleted and so I’ll have a frozen webpage, without scrollbar.
The problem comes from the ajax function.
If I change the code of doRefresh to just an alert(); everything works perfectly.
//refresh delay in ms
var delayRefresh=5000;
// stored setTimeout's id
var refresh;
//First call of the ajax function
$(document).ready(function(){
refresh=window.setTimeout(function(){doRefresh();}, delayRefresh);
});
//code executed when the user open a modal
$('.modal').on('shown.bs.modal', function () {
alert(refresh);
//Stopped the refresh
clearTimeout(refresh);
});
//code executed when the user close the modal
$('.modal').on('hidden.bs.modal', function () {
alert(refresh);
//restart of the refresh
refresh=window.setTimeout(function(){doRefresh();}, delayRefresh);
alert(refresh);
});
/* Fonction that run the ajax request to the server */
var doRefresh = function (){
$.ajax({
type:"PUT",
url:"<c:url value="/checklist"/>",
contentType: false,
async: true,
processData: false,
success:function(data){
// DOM update
$("#content_needed_to_be_updated").html(data) ;
//restart of the refresh
refresh=window.setTimeout(function(){doRefresh();},delayRefresh);
},
error:function(xhr){
toastr.error('Le serveur n\'a pas pu être atteint.', 'Erreur !');
//restart of the refresh
refresh=window.setTimeout(function(){doRefresh();}, delayRefresh+20000);
}
});
};
New version:
//refresh delay in ms
var delayRefresh=30000;
// stored setTimeout's id
var idSetTimeout;
var refesh=function(){
idSetTimeout=window.setTimeout(function(){doRefresh();}, delayRefresh);
};
//First call of the ajax function
$(document).ready(function(){
refesh();
});
//code executed when the user open a modal
$('.modal').on('shown.bs.modal', function () {
alert(idSetTimeout);
//Stopped the refresh
clearTimeout(idSetTimeout);
});
//code executed when the user close the modal
$('.modal').on('hidden.bs.modal', function () {
alert(idSetTimeout);
//restart of the refresh
refresh();
alert(idSetTimeout);
});
/* Fonction that run the ajax request to the server */
var doRefresh = function (){
$.ajax({
type:"PUT",
url:"<c:url value="/checklist"/>",
contentType: false,
async: false,
processData: false,
success:function(data){
// DOM update
$("#content_needed_to_be_updated").html(data) ;
//restart of the refresh
refresh();
},
error:function(xhr){
toastr.error('Le serveur n\'a pas pu être atteint.', 'Erreur !');
//restart of the refresh
refresh();
}
});
};
You could leave your timeout set, and simply check whether the modal is shown or not before making the ajax call to the server.
var doRefresh = function () {
if (!$(".modal").data('bs.modal').isShown)
{
$.ajax({
// your code...
});
}
}
I can't find a solution for this and I can't believe I can't find just one example!
Ok, I have a kind of monitory (PHP / MySQL), refreshed by Javascript. The thing is, that my script reload an entire php page, where I have the MySQL Querys. So, every reload I see a little blink, which is nothing else that the page loading.
This is what I have:
(function($) {
$(document).ready(function() {
$.ajaxSetup( {
cache: false,
beforeSend: function() {
$('#colas').hide();
$('#loading').show();
},
complete: function() {
$('#loading').hide();
$('#colas').show();
},
success: function() {
$('#loading').hide();
$('#colas').show();
}
});
var $colas = $("#colas");
$colas.load("panelColasRealtime.php");
var refreshId = setInterval(function() {
$colas.load('panelColasRealtime.php');
}, 8000);
});
})(jQuery);
I load "panelColasRealtime.php" right here:
<div id="colas"></div>
This is working, but I don't want this solution, I don't like that blink. I want to refresh the monitory without reload the php page, just the data.
I think that AJAX is my best choice, but I can't find any example.
Summarizing:
I would like a realtime monitory (every X secods) of my BD and show it .
If anyone has an example script I would really appreciated it.
if you just want to refresh the data here is a simple example which refreshes every 5 seconds
$(document).ready(function() {
loadData();
});
var loadData = function() {
$.ajax({
type: "GET",
url: "data_source_page.php",
dataType: "html",
success: function(response) {
$(".refresh").html(response);
setTimeout(loadData, 5000);
}
});
};
html
<div class="refresh"></div>