Show timeout countdown

[marcoas]

(Translate by Google)

Hi !

My way to use Ajax is this:

$ .ajax ({
    url: this.apiURL,
    data: {
        ... ,
    },
    dataType: "jsonp",
    timeout: 10000,
    ...,
});

I wish I could show a countdown, along with .gif image (or inside), using the value of "timeout" and update the value every second.
To let the user know how much time remains before closing the connection.

You could do that?

Thank you

[gasparesganga]

UPDATE: see my last comment, v1.1 exposes a custom option to attach any HTML/element you like to the DOM.

---

Hi. If I understand correctly your request, there's no need to modify my plugin in order to accomplish what you are looking for:
You can show the LoadingOverlay and then append a DOM element to it to show your countdown and use setInterval to actually refresh the countdown.

So a quick way to implement this using your code is:

// Show LoadingOverlay and append your custom element to it
$.LoadingOverlay("show");
var countdownElement = $("<div>", {
    class   : "loadingoverlay_countdown"
});
$("body").children(".loadingoverlay").first().append(countdownElement);

// Init countdown and set interval
var timeout     = 10000;
var interval    = 1000;
var countdown   = timeout;
countdownElement.text(parseInt(countdown / interval));
var intervalHandle = setInterval(function(){
    countdown -= interval;
    countdownElement.text(parseInt(countdown / interval));
}, interval);

// Make the actual Ajax call
$.ajax({
    url: this.apiURL,
    data: {
        ...,
    },
    dataType: "jsonp",
    timeout: timeout,
    ...,
}).always(function(){
    // Clear interval and hide LoadingOverlay
    clearInterval(intervalHandle);
    $.LoadingOverlay("hide");
});

Then style your brand new DOM element with some CSS like that:

.loadingoverlay_countdown {
    /* Positioning */
    position        : absolute;
    top             : 50%;
    left            : 50%;
    text-align      : center;
    /* Horizontal centering */
    width           : 100px;
    margin-left     : -50px;  /* half of width */
    /* Vertical centering */
    font-size       : 20px;
    margin-top      : -10px;  /* half of font-size */

    /* Your style here */
    font-family     : arial, helvetica, sans-serif;
    color           : #404040;
}

You could wrap everything in a kind of helper function and use it everywhere you need it in your project.

Cheers.

[marcoas]

Thank you for the example
I'll try

[gasparesganga]

UPDATE: v1.1 release

With v1.1 which I released last week you no longer need to manually attach any element, since it now supports a custom option.

See Example 5 in the documentation for a complete implementation.