JQUERY POST, UI to show if status is "saving" "still saving" "error" "complete"

Question

I have a JQUERY Post call which is posting critical data to the server. Which if isn't posted successfully, results in a huge loss of important data.

I have a save banner UI show on the page before the JQUERY POST, after the JQUERY Post it has the Save Banner go away.

I'd like an inbetween state, where if the save is taking longer than 1 second, it updates from "saving" to "saving..."

but if it doesn't save within 4 seconds, it says "error, try again" something like that.

Any ideas on how to accomplish this with JQUERY?

Answer 1

var status = 'Nothing happening';    
var success= 0;
function countdown(id) {
       if(id==0 && success==0) status = "saving...";
       if(id==1 && success==0) status = "Error, try again";
       if(id==2){ status = "Everything alright"; success=1;}
}

    setTimeout("countdown(0)", 1000);
    setTimeout("countdown(1)", 4000);
    //Call countdown(2) if it's successful

Protip: You can also save stuff in cookies so that it doesn't get lost even if you can't connect to the server.

Update explaination: Obviously you should replace the status = xyz; commands with some way to actually show the status to your users.

setTimeout(x,y) basically runs command x after time y has run out. (1000 = 1 sec). countdown would be the function called each time. If the posting is successful, you should call countdown(2) so that the "Error, try again" message isnt shown. Other than that it's just showing particular statuses.