Im trying to show a progressbar when my page is doing an ajax request.
I have a div with an image inside it and i would like to show it on the ajaxStart event. The problem is the img only shows itself when the ajaxStart event is done. However the alert is fired before the ajax request.
$(document).ajaxStart(function () {
alert("test");
document.getElementById('LoadingDiv').style.visibility = "visible";
});
$.ajax({
url: url,
async: true,
dataType: 'json',
success: function (data) {
Posted abit to early changed async to true and works now.
You can show/hide loading spinner like this:
/*LOADING SPINNER*/
jQuery.ajaxSetup({
beforeSend: function() {
$('#loadingDiv').show()
},
complete: function(){
$('#loadingDiv').hide()
},
success: function() {}
});
The #loadingDiv simply contains an animated image. The ajaxSetup method set default values for future Ajax requests.
That means that this loading indicator will be shown every time when making ajax calls.
Related
I have an ajax call that on success create an element. When the element is clicked, a spinning gif needs to be displayed while another action is being done (creating jquery datatables). Then the gif should disappear. In my case everything works except for the fact that the gif is loading after the jquery datatables is created and therefore only shown very briefly. I want it to start as soon as I click the element, but this is not the case.
ajax{
element.create();
element.click(){
startLoadingGif();
drawJqueryDataTables();
stopLoadingGif();
}
}
I would appreciate any help.
What you need to do is this. startLoadingGif() before the request is made and stopLoadingGif(); after the completion (success or failure) of the request:
startLoadingGif();
$.ajax({
...
complete: function (data) {
stopLoadingGif()
}
});
UPDATE:
$.ajax({
...
complete: function (data) {
element.create();
element.click()
startLoadingGif();
drawJqueryDataTables(); //Or you can make this a promise if it takes a longer time and after that is resolved you can stop the spinner. Or,
window.setTimeout(()=>{
stopLoadingGif();
}, 2000)
});
So I have a to upload image files to the server and correspondingly save their info in the database. Some of these files are big and take time to upload, so I need to incorporate a loading.gif when the upload is on using ajax. I also use the same AJAX function to prevent page refresh as I upload several images.
These are the two JS functions I am using
function showLoading(){
document.getElementById("loading").style = "visibility: visible";
}
function hideLoading(){
document.getElementById("loading").style = "visibility: hidden";
}
This is the AJAX
$(function () {
$('form#data').submit(function (e){
e.preventDefault();
e.stopImmediatePropagation();
var formData = new FormData($(this)[0]);
showLoading();
$.ajax({
type:'POST',
url: 'upload.php',
data: formData,
async:false,
cache:false,
contentType: false,
processData: false,
success: function (returndata) {
$('#result').hideLoading().html(returndata);
alert("Data has been Uploaded: ");
}
});
return false;
});
});
This is the image tag
<img id='loading' src='loading.gif' style='visibility: hidden;'>
When I click submit, i can only see the loading.gif. It previously used to tell me that the file has been uploaded and returned the input details. Also I need the loading.gif to hide once the file has been uploaded.
Where am I going wrong?
This:
$('#result').hideLoading().html(returndata);
you're calling hideloading() as if it was a JQuery method. it's not, so that code is a syntax error: call to undefined method.
You should have
success: function() {
hideLoading();
}
And note that your code simply assumes success. If the upload fails for whatever reason, you'll STILL be showing the loading gif. You should move that hide call to a complete handler instead, so that regardless of the success/failure, the gif will hide when the ajax call is done.
I have been trying to get the loading gif to replace the cursor while I am updating the database or loading. It does work when my tabs are loading but it doesn't when I am saving from the jQuery modal popup.
when I debug and look at the rendered html it tells me it is displaying right before it makes the call style="display:block;" when I let it complete the save it switches back to style="display:none;" The below code is just a taste, sorry I can't transfer the actual code from the development network to here. Since I am using these popups for every edit in a huge application, I really would like to get the loading gif showing.
//using jquery to start and stop with ajax
var $loading = $('#waiting').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
//my div
<div id="waiting" class="loading-img" style="display:none;"
$("#somePopup").dialog({
autoOpen:false,
height: 'auto',
width: 900,
buttons: { Save: ....
// you get the idea
$ajax({
type:"post",
url: "some procedure",
dataType: "json",
data: DTOvar,
contentType: "application/json",
async: false,
success: function(data){
//refresh main screen and close popup
error : function(errorstuff){
//handle error
}
});
It won't work since you specified "async: false", signalling the browser to use the same ui thread. ajaxStart/ajaxStop methods will never have a chance to run. You should most likely remote the sync option to achieve what you need.
First of all I want to say I am not a javascript expert at all..
I am testing Ray Stone's leanModal pluggin.
I am able to open and close modal using the pluggin.
I have added a form to modal div.
What I want to do now is to close the modal when user clicks submit button (as you can see in project website).
The problem is that I don't process the form as usual. I get the data using jQuery and I do request to server using $.ajax(). Here is my code:
$(function() {
$('#add-user').submit(function() {
$.ajax({
type: 'post',
url: '***',
data: '***',
contentType: 'application/json',
dataType: 'json'
});
$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');
return false;
});
});
Where
#add-user is the link that opens the modal.
#cp is the div id of the modal.
In this case the div gets close but the blur behind the div does not dissapear until user do clicks. The effect is the same than using $('#cp').remove();
How can I totally close the div when the request is sent?
Thanks in advance
Update: A jsFiddle with my code is available here.
Some CSS rules are missed and I have not featured the AJAX request but I think the main code is there.
Firstly $.ajax() is asynchronous so the following lines
$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');
will be executed even if your query is not successful.
You would better do
$.ajax({
...
success: function () {
$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');
}
});
Secondly, after checking the source, I think you should use
$.leanModal.close_modal('#cp');
$("#lean_overlay") seems to be the "blur" element you want to get rid of.
Ultimately you could do $("#lean_overlay").remove() but the plugin seems to manage it already
Finally you should have
$(function() {
$('#add-user').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '***',
data: '***',
contentType: 'application/json',
dataType: 'json',
success: function () {
$('#add-user :input:not(:submit)').val('');
$.leanModal.close_modal('#add-user');
}
});
return false;
});
});
Here is my full JS code:
var timeOutId;
function ft(){
$.get("progress.txt", null, function(data){
if(data.substr(0,10) == "MSG::MSG::"){
$("#box").html(data);
window.clearTimeout(timeOutId);
}else{
$("#box").html(data);
}
});
};
$(document).ready(function(){
$("#box").corner('20px');
$("#progress").hide();
});
$("#newm").click(function(){
$("#progress").show();
$("#list").html = $.ajax({
url: "action.php",
global: false,
type: "POST",
data: ({keyword : $("#keyword").value()},{format: $("#format").value()},{filename: $("#filename").value()},{list: $("#list").value()}),
dataType: "html"
});
timeOutId = window.setTimeout("ft()", 10000);
});
and there is a hyperlink with ID "newm" on page but clicking on the link doesnt trigger the ajax request. Can anyone tell me what is wrong?
Description
I have tryed your code and recognize that your binding to click is not working because the DOM element is not available at this time.
You should bind it under $(document).ready() to ensure the DOM is fully loaded before binding javascript / jquery to that.
This will enusre that your link will work, but its hard to help you without the html source.
If this will not help, please post the html.