Ajax loading image

Question

I have a weird issue.

 function sendEmail(settings) {
    var success = false;

    $.ajax({
        type: "POST",
        contentType: settings.contentType,
        data: settings.data,
        url: settings.url,
        dataType: "json",
        async: false,
        beforeSend: function () {
            setTimeout(showOrHideLoadingImage("LoadingImage", "show"), 2000);
            //$("#LoadingImage").show();
        },
        success: function (data) {
            setTimeout(showOrHideLoadingImage("LoadingImage", "hide"), 500);
            //$("#LoadingImage").hide();//Hide loading image

showOrHideLoadingImage function:

 function showOrHideLoadingImage(id, action)
{
    if (action == "show") {
        $("#" + id).show();
    } else {
        $("#" + id).hide();
    }
}

I use this code to send mail, the mail is arriving BUT the ajaxLoading image is not showing

if i put a "debuger" in the "beforeSend" event the image is shown, so I tried to use java script setTimeout function, but with no luck.

*another quetion that I have regarding this, ajaxSuccess and error Global events.

I red that its better to use these events:

if i will use $("#LoadingImage") each time, the mail loading image will shown

but what if I have other id with loading image?

`setTimeout(function() { showOrHideLoadingImage("LoadingImage", "show"); }, 2000);` — tymeJV, May 21 '14 at 13:42
@mituw16 Sure, i have edited my question. didnt post it because it is the same with her or witout — E.Meir, May 21 '14 at 13:44
I think you might find a solution in this similar post: http://stackoverflow.com/questions/16046387/jquery-ajax-beforesend Possible Dupe? — Dave, May 21 '14 at 13:46
@Dave It was it. I removed async: false and now its woking! can you answe the global ajax events? — E.Meir, May 21 '14 at 13:49
You should use `beforeSend` just in order to access the _raw_ jqXHR object, and not for merely executing code before the call: in that case, simply _place it before the call_. — moonwave99, May 21 '14 at 13:52

score 0 · Answer 1 · answered May 21 '14 at 13:43

0

Your showOrHideLoadingImage is being invoked immediately, use an anonymous function in the setTimeout then call your method with params:

setTimeout(function() { 
    showOrHideLoadingImage("LoadingImage", "show"); 
}, 2000);

answered May 21 '14 at 13:43

tymeJV

103,943
14
161
157

that is not the issue. – E.Meir May 21 '14 at 14:10

score 0 · Answer 2 · answered May 21 '14 at 13:50

A couple of things to point out. Developers often put code in the beforeSend method that is intended to execute immediately.

Therefore the following is true;

$.ajax({....
  beforeSend: function () {
     $(....).show();
  }

Is the same thing as.

$(....).show();
$.ajax({....

Secondly, don't hide your loading images in the success handlers of a promise. You want to always remove the loader.

Therefore;

$(....).show();
$.ajax({...}).always(function(){$(...).hide();});

Now, the timeout will always be executed. Even if the AJAX is executed quickly. So if you only want to show the loader after a 2 second delay. You need to keep the timer ID.

var timeID = setTimeout(function() { $(...).show();}, 2000);
$.ajax({...}).always(function(){
    clearTimeout(timeID);
    $(...).hide();
});

In the always callback you remove the timer using the timeID. This prevents it from firing if it hasn't already do so.

if i will use $("#LoadingImage") each time, the mail loading image will shown

Try using the jQuery closest API to find a DOM element relative to what triggered the event.

http://api.jquery.com/closest/

actually i want the "loading image" to last longer.. i removed it, for the second question. ajaxSuccess and error Global events. I red that its better to use these events: if i will use $("#LoadingImage") each time, the mail loading image will shown but what if I have other id with loading image? — E.Meir, May 21 '14 at 14:03
and i implemented all the things you said here, it is working fine now — E.Meir, May 21 '14 at 14:04

score 0 · Answer 3 · answered May 21 '14 at 14:01

0

$(document).ready(function(){
 $(document).on('click', '#id', function(){
  sendMail();
 });
})

function sendMail(){
 $('#image').show();
 $.ajax({
   url: url,
   type: 'POST',
   success: function(){
      //DO SOMETHING HERE
   },
   error: function(){
      //DO SOMETHING HERE
   },
   complete: function(){
    $('#image').hide()
   }
 });
}

answered May 21 '14 at 14:01

Damian

574
1
6
19

complete: function() and $.ajax({}).complete(function(...){}) are the same thing, right? – E.Meir May 21 '14 at 14:08
If I read the documentation correctly it's pretty much the same (minus a few minor differences), but I wouldn't recommend using '.complete(function(...){})' as it was deprecated in version 1.8 of the JQuery Library and is likely to be removed completely in a later version. – Damian May 21 '14 at 14:15
OK so $.ajax({}).complete(function(...){}) is the preferred one. , for the second question. ajaxSuccess and error Global events. I red that its better to use these events: if i will use $("#LoadingImage") each time, the mail loading image will shown but what if I have other id with loading image? – E.Meir May 21 '14 at 14:17
Sorry for the late response. As said, '.complete' was deprecated in JQuery 1.8. If you want to use this then use '.always()' as this is the new replacement. Refer to http://api.jquery.com/jquery.ajax/ support documents for help on AJAX calls. Regarding the image, put the ajax call in a 'function' (similar to my answer) and then pass the loading image as a parameter, so instead of '$("#image").show()' it would be '$(loadingImage).show()', where loading image is a parameter on the sendMail function. But without knowing first hand the structure of your application I'm only hypothesizing. – Damian May 23 '14 at 08:41

Ajax loading image

3 Answers3