Available in the OSS Version

Notifier - Overview

The notification widget offers more informative feedback about system state.

Check out my messages

Success message.





This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

The widget can be bound to the igValidator and the igEditors widgets. It has four different message states: success, error, warning and info. These can be shown in either inline or popover mode, while auto mode chooses those automatically. The popover mode also can be shown in four directions: top, left, right, or bottom. If there is not enough room for it to be shown in the chosen direction, it will be shown in the next available direction, following the order of top > left > right > bottom.

Code View

Copy to Clipboard
$("#successEditor1").igNotifier({
    direction: "right",
    locale: {
        infoMsg: "Information message.",
        successMsg: "Success message.",
        warningMsg: "Warning message.",
        errorMsg: "Error message."
    }
 }).igNotifier("notify", "success");

 $("#state").on("change", function myfunction() {
     var state = $(this).find("option:selected").val();

     $("#successEditor1").igNotifier("option", "state", state);
 });

 $("#mode").on("change", function myfunction() {
     var mode = $(this).find("option:selected").val();

     $("#successEditor1").igNotifier("option", "mode", mode);
 });

 $("#direction").on("change", function myfunction() {
     var direction = $(this).find("option:selected").val();

     $("#successEditor1").igNotifier("option", "direction", direction);
 });

 $("#show").on("click", function myfunction() {
     $("#successEditor1").igNotifier("show");
 });
 $("#hide").on("click", function myfunction() {
     $("#successEditor1").igNotifier("hide");
 });