Loader div doesn't appears

Question

I have the code below and my div with loader gif doesn't appears. I tried many ways to do that and I could. Why $('.loader').show(); doesn't works?

$('.loader').show();
var url = "myURL.ashx?p1=" + p1;
if (GetRequestReturnStatus(url)) {
    window.open(url);
}
$('.loader').hide();

function GetRequestReturnStatus(url) {
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();   

    if (http.status == 404 || http.status == 403 || http.status == 500) {
        ShowMessage("nFailure", "some message");
        return false;
    }
    return true;
}

And the HTML:

<div class="loader" style="display: none;">
    <asp:Image ID="Loader" CssClass="p12" ImageUrl="~/_img/loader.gif" runat="server" ViewStateMode="Enabled" />
</div>

It's working in another functions in the code. Just in that case doesn't works. I'm not using ajax because I don't know how to download de response and when I was looking for that topic, I read is better use window.open than ajax to download file.

Do you actually have a div with the class `loader`? You haven't posted any of the HTML markup for your page, so the reasons could be numerous. — Sam Hanley, Dec 03 '15 at 19:50

Adam Konieska · Accepted Answer · 2015-12-03T21:35:44.637

2

It is working, however you are immediately hiding it again with $('.loader').hide();

$('.loader').show();
var url = "myURL.ashx?p1=" + p1;
if (GetRequestReturnStatus(url)) {
    window.open(url);
}
//$('.loader').hide();  //this line was hiding your .loader element(s)

function GetRequestReturnStatus(url) {
    var http = new XMLHttpRequest();

    http.onreadystatechange = function() {
        //todo logic here once the request has changed state
        if(http.readyState == 4) { //done loading
            hideLoader();
        }
    };
    http.open('HEAD', url, false);
    http.send();   

    if (http.status == 404 || http.status == 403 || http.status == 500) {
        ShowMessage("nFailure", "some message");
        return false;
    }
    return true;
}

function hideLoader() {
    $('.loader').hide();
}

You can see it in this JS fiddle: https://jsfiddle.net/jr5uye4o/2/

There is more reading on how to use XMLHttpRequest here: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

edited Dec 03 '15 at 21:35

answered Dec 03 '15 at 19:51

Adam Konieska

2,805
3
14
27

Yes, but GetRequestReturnStatus takes a time because that function goes to a generic handler and verify the return and I need block my screen while it's happening. – Salatiel Dec 03 '15 at 19:56
$('.loader').hide(); is called before GetRequestReturnStatus() ends. Why? – Salatiel Dec 03 '15 at 20:13
@Scbairros `XMLHttpRequest()` runs asynchronously, so `$('.loader').hide();` does not wait for it to end. I've updated the answer with an example of a callback function that you can use to fire code after the http request finishes. – Adam Konieska Dec 03 '15 at 20:20
@Scbairros I included a JS fiddle so you can see the example working: https://jsfiddle.net/jr5uye4o/ – Adam Konieska Dec 03 '15 at 20:23
Thank you, but your code doesn't works for me. If I use setTimeout, is it a good ideia? – Salatiel Dec 04 '15 at 11:41
@Scbairros its not a good idea to use setTimeout() because you have no idea of knowing how long it will take to process the http request. What you need to use is a callback function, there are some good examples at of how to use XMLHttpRequest, including callbacks, here: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest – Adam Konieska Dec 04 '15 at 14:26

score 0 · Answer 2 · answered Dec 03 '15 at 20:14

0

Since you are already using jQuery, why not use $.ajax for the request?

$.ajax({
  method: "GET",
  url: "/yourRequestUrl",
  data: { p1: yourParam, p2: otherParam }
}).done(function(msg) {
    $('.loader').hide(); // Processed once the request is complete.
  })
  .fail(function() {
    alert("Something went wrong with the request");
  });

answered Dec 03 '15 at 20:14

Boris Ablamunits

115
1
12

Because the call result is a file and how can I download a file from a ashx using Ajax? When I search on internet, I found that is better use window.open than ajax to download files. – Salatiel Dec 04 '15 at 11:26

Loader div doesn't appears

2 Answers2