Materialize.toast show a toast only once

Does anyone know of a way to show a toast only once? Right now let's say if you keep clicking on a button to display a toast, they will just keep stacking on top of each other before the previous one has expired. Kind of annoying. Is there any way?

2 Answers
2

There are different ways to achieve this.

The first that comes to mind is the following. let's say you have a function that triggers your toast. Once the toast is triggered, set a global flag (something like toastCurrentlyDisplayed = true) and prevent that function from opening the toast again if the flag is set to true. I.e.:

toastCurrentlyDisplayed = true

myFunction() {
if (!toastCurrentlyDisplayed) {
//Logic to open your toast here
}
}


Then simply use a callback to reset the flag once the toast has been dismissed, like

<a class="btn" onclick="M.toast({html: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Toast!</a>

<a class="btn" onclick="M.toast({html: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Toast!</a>

You can hide toast on click and then use condition for toast. Like

$("btn").click(function(e){
$('.toast').hide();
if(//some condn){
Materialize.toast("Enter Your Text here",1500);

}
});


This will hide all toast and show toast only once after clicking many times too.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.