jump to navigation

bootstrap transient alert

CSS (in a bootstrap_PATCH.css file):

.transient_alert {
    position: absolute;
    top: 100px;
    left: 500px;
    padding: 6px;
}
.in_progress_alert {
    border: 1px solid #973;
    color: #973;
    background-color: #eda;
}
.success_alert {
    border: 1px solid #393;
    color: #393;
    background-color: #dfd;
}
.error_alert {
    border: 1px solid #933;
    color: #933;
    background-color: #fdd;
}

JS Definitions (in a separate JS file includes in the doc head):

function eqrUtil_setTransientAlert(alertType,alertMessage) {
    $('#page_alert').removeClass("in_progress_alert");
    $('#page_alert').removeClass("success_alert");
    $('#page_alert').removeClass("error_alert");
    if (alertType == 'progress') {
        $('#page_alert').html('<i class="icon-time"></i> '+alertMessage);
        $('#page_alert').addClass("in_progress_alert");
    }
    else if (alertType == 'success') {
        $('#page_alert').html('<i class="icon-ok"></i> '+alertMessage);
        $('#page_alert').addClass("success_alert");
        $('#page_alert').fadeOut({duration: 3000, queue: false}); //,function(){$('#page_alert').addClass("hide");})
    }
    else if (alertType == 'error') {
        $('#page_alert').html('<i class="icon-exclamation-sign"></i> '+alertMessage);
        $('#page_alert').addClass("error_alert");
        $('#page_alert').fadeOut({duration: 10000, queue: false});//,function(){$('#page_alert').addClass("hide");})
    }
    //$('#page_alert').removeClass("hide");
    $('#page_alert').fadeIn({duration: 10, queue: false});
}
// NOTE: could put this directly in the HTML or in a footer file or some such, but doing it here consolidates the code
$(document).ready(function () {
    $('body').append('<div id="page_alert" class="transient_alert in_progress_alert hide alert">Saved</div>');
});

Example Usage (in-line or in a separate JS file):

$("#sched-notes").blur(function () {
    eqrUtil_setTransientAlert('progress','saving...');
    $.ajax({
        url:ajax_url,
        dataType: 'json',
        data: {'action':'updateNotes'}
    })
        .done(function (data,status,xhr) {
            eqrUtil_setTransientAlert('success','saved');
        })
        .fail(function (data,status,xhr) {
            eqrUtil_setTransientAlert('error','ERROR - not saved!');
        })
    ;
});
Advertisements

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: