Search results

Prevent duplicate toast display

You can prevent identical same toast displaying in a screen by the event function and terminate the toast displaying process by setting the cancel event property in the beforeOpen event.

The following sample demonstrates preventing duplicate title toast element displaying with custom code blocks.

Source
Preview
app.vue
<template>
   <div id='app'>
        <ejs-button ref='showButtonRef' class="e-btn" id="show_toast" v-on:click.native="showBtnClick">Show Toast</ejs-button>
        <ejs-toast ref='elementRef' id='element' title='Sample Toast Title' content='Sample Toast content' :position='position' :beforeOpen='beforeOpen'></ejs-toast>
   </div>
</template>

<script>
import Vue from "vue";
import { ToastPlugin, Toast } from "@syncfusion/ej2-vue-notifications";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ToastPlugin);
Vue.use(ButtonPlugin);
export default {
  name: 'app',
  data: function(){
        return {
            position: { X: 'Center' }
        }
   },
  mounted: function() {
      this.prevDuplicates = false;
      this.toastFlag = 0;
      this.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.' }];
      this.$refs.elementRef.show(this.toasts[this.toastFlag]);
      ++this.toastFlag;
  },
  methods: {
       showBtnClick: function(args){
           this.$refs.elementRef.show(this.toasts[this.toastFlag]);
           ++this.toastFlag;
           if (this.toastFlag === (this.toasts.length)) {
               this.toastFlag = 0;
           }
       },
       beforeOpen: function(e){
          e.cancel = this.preventDuplicate(e);
       },
        preventDuplicate: function(e){
           var toastEle = e.element;
           var toasts = e.toastObj.element.children;
           for (let i = 0; i < toasts.length; i++) {
               if ((toasts[i]).querySelector('.e-toast-title').isEqualNode(toastEle.querySelector('.e-toast-title'))) {
                   return true;
               }
           }
           return false;
       }
    }
}
</script>
<style>
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css';
</style>