Friday, September 27, 2013

Show nice css jquery notification when data is saved using ajax

 showNotification("Success!", "Deduction Detail Saved !", "notice", "br");

// displays Growl notifications
function showNotification(title, msg, type, location) {
    switch (type) {
        case "error":
            $.growl.error({ title: title, message: msg, location: location });
            break;
        case "notice":
            $.growl.notice({ title: title, message: msg, location: location });
            break;
        case "warning":
            $.growl.warning({ title: title, message: msg, location: location });
            break;
        default:
            $.growl.notice({ title: title, message: msg, location: location });
            break;
    }

You also need to reference jQuery Growl jQuery and Growl CSS in your js section .

You can in your ajax call as following  :

$.ajax("yourpagename.aspx/webmethodname", {
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ objDeduction: deductionPageState }),
            dataType: 'json'
        })
        .done(function(data) {
            if (data.d) {
                clearDeductionPage();
                hideLoader();
                showNotification("Success!", "Deduction Detail Saved !", "notice", "br");
                callback(data);
            } else {
                    getRecentErrors(function(data) {
                    hideLoader();
                    showNotification("Error!", "Error in Saving Deduction Details !\n" + data.d.Message, "error", "br");
                });
            }
        })
        .fail(function(xhr, err, msg) {
            hideLoader();
            handleError(xhr, err, msg);
        });


No comments:

Post a Comment