Restrict the maximum toast to show in JavaScript (ES5) Toast control

06 Jun 2023 / 2 minutes to read

You can restrict the maximum toast count by using the event callback function and terminate the toast displaying process by setting the cancel event property in the beforeOpen event.

The following sample demonstrates restricting toast displaying up to 3. You can restrict by your own count with custom code blocks.

Source

Preview

index.js

index.html

ej.base.enableRipple(true);

//Initialize Toast component
var toasts = [
  { title: 'Warning !', content: 'There was a problem with your network connection.' },
  { title: 'Success !', content: 'Your message has been sent successfully.' },
  { title: 'Error !', content: 'A problem has been occurred while submitting your data.' },
  { title: 'Information !', content: 'Please read the comments carefully.' }
];

var toastFlag = 0;
var maxCount = 3;
var toast = new ej.notifications.Toast({
    title: 'Matt sent you a friend request',
    content: 'You have a new friend request yet to accept',
    target: document.body,
    position: { X: 'Right', Y: 'Bottom' },
    beforeOpen: onBeforeOpen
});
toast.appendTo('#element');
toast.show(toasts[toastFlag]);
++toastFlag;


document.getElementById('show_toast').onclick = function () {
  toast.show(toasts[toastFlag]);
  ++toastFlag;
  if (toastFlag === (toasts.length)) {
      toastFlag = 0;
  }
};

function onBeforeOpen(e) {
  if (maxCount === toast.element.childElementCount) {
   e.cancel =true;
  } else {
    e.cancel = false;
  }
}

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="row"> <button class="e-btn" id="show_toast"> Show Toast</button> </div>
        <div id="element"></div>
        <br><br>
        <div id="result"></div>
        <div id="templateToast" style="display: none;color:red"> System affected by virus !!! </div>
    </div>


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