Ajax Submit Design Pattern

by SebastianPataneMasuelli

HTML

<a href="#"/> cancel</a>
<input id="my_btn" type="submit" value="Do Something"/>
<img id="preloader_bar" class="hidden" src="http://www.fease.org/code/ui_patterns/img/preloader_bar.gif" title="doing it..." />
<div id="loading_msg" class="hidden"></div>

<!-- use this image for WebAdmin, give it the appropiate title
<img class="preloader_bar outer_shadow ui-corner-all" src="/images/ui/preloader_bar.gif" title="loading report..." />
-->

CSS

#my_btn { width: 121px; height: 28px; cursor: pointer }
#preloader_bar { width: 121px; height: 28px; cursor: wait }
#loading_msg { width: 121px; height: 28px; text-align: center; font-size: .8em }


.hidden { display: none }

JavaScript

function actionComplete() {
    //hide prolader, udpate message, show button
    $('#preloader_bar').fadeOut(250, function() {
        $('#my_btn').fadeIn(250);
        $('#loading_msg').fadeOut(1000, function() {
            $(this).text('Done').fadeIn(250).delay(1000).fadeOut(250);
        })
    });   
}

//click action
$('#my_btn').bind('click', function() {
    //hide button, show preloader + message
    $(this).fadeOut(250, function() {
        $('#preloader_bar').fadeIn(250);
        $('#loading_msg').text('Doing It...').delay(1000).fadeOut(250);
        $('#loading_msg').fadeIn(250);
        
    });
    //perform action -this is only a delay in this example.
    window.setTimeout(actionComplete, 3000, true);
});