Search results

Severities in JavaScript (ES5) Message control

08 Feb 2023 / 1 minute to read

The severity denotes the importance and context of the message to the user. The message contains different severity types. Use the severity property to display the messages with different severity levels.

The available severity types are Normal, Success, Info, Warning and Error. The default severity type for messages is Normal.

The following example demonstrates the severity of the messages.

Source
Preview
index.js
index.html
Copied to clipboard
var msgDefault = new ej.notifications.Message({
    content: "Editing is restricted"
  });
  msgDefault.appendTo('#msg_default');

  var msgInfo = new ej.notifications.Message({
    content: "Please read the comments carefully",
    severity: "Info"
  });
  msgInfo.appendTo('#msg_info');

  var msgSuccess = new ej.notifications.Message({
    content: "Your message has been sent successfully",
    severity: "Success"
  });
  msgSuccess.appendTo('#msg_success');

  var msgWarning = new ej.notifications.Message({
    content: "There was a problem with your network connection",
    severity: "Warning"
  });
  msgWarning.appendTo('#msg_warning');

  var msgError = new ej.notifications.Message({
    content: "A problem occurred while submitting your data",
    severity: "Error"
  });
  msgError.appendTo('#msg_error');
Copied to clipboard
<html><head>
            
    <title>Essential JS 2 Message control</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 Message control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="msg-default-section">
            <div class="content-section">
                <div id="msg_default"></div>
                <div id="msg_info"></div>
                <div id="msg_success"></div>
                <div id="msg_warning"></div>
                <div id="msg_error"></div>
            </div>
        </div>
    </div>
    <style>
        /* Sample level styles */
        .msg-default-section .content-section {
            margin: 0 auto;
            max-width: 450px;
            padding-top: 10px;
        }
    
        .msg-default-section .e-message {
            margin: 10px 0;
        }
    </style>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>