Laravel Toast in JavaScript

Question

im using the https://xvelopers.com/demos/html/paper-panel/panel-element-toast.html

panel... and i trying to show toast after a function..

if i use

<div class="toast"
    data-title="Hi, there!"
    data-message="Hope you like paper panel."
    data-type="success">
</div>

it show a toast correctly at page load...

now, im trying to add this at:

$.ajax({
      url: "asd/store-asd",
      type: "POST",
      data: fd,
      processData: false,
      contentType: false
    }).done(function(resp){
      if(resp&& resp.ok){
        calendar.refetchEvents();
        alert("OK"); **change alert to toast**
        clean();
      }else {
        alert("FAIL");
      }
    });

how can add it?

PS.: using @if(session('status')) @endif... work too, but i need implement it without reload a page

Answer 1

hey if you've no document how to implement their toaster a work around you can do it place the HTML with display none attribute i.e

<button class="btn btn-primary btn-lg toast-action" data-title="Hey, Bro!" data-message="Paper Panel has toast as well." data-type="info" data-position-class="toast-bottom-right" style='display:none;'>Info Toast</button>

Then you can trigger click on this button by targetting class ".toast-action" also you can update the attributes like message, title etc hope this will work,,, again this is only a work around since you don't have any documentation available and js is also compiled version.