image alt

jQuery Toast Plugin

blog image

Source: jQuery Toast Plugin (kamranahmed.info)


$(document).ready(function () {         @foreach(['danger', 'warning', 'success', 'info'] as $msg)         @if(Session::has('alert-'.$msg))         var msg = '@php echo Session("alert-".$msg); @endphp';         @if($msg == 'success')         setTimeout(() => {             alertSuccess(msg);         }, 500);         @endif         @if($msg == 'danger')         setTimeout(() => {             alertDanger(msg);         }, 500);         @endif         @if($msg == 'info')         setTimeout(() => {             alertInfo(msg);         }, 500);         @endif         @if($msg == 'warning')         setTimeout(() => {             alertWarning(msg);         }, 500);         @endif         @endif         @endforeach     });

    function alertDanger(msg) {         $.toast({             heading: 'Oops',             text: msg,             icon: 'error',             loader: true,             loaderBg: '#fff',             showHideTransition: 'slide',             hideAfter: 6000,             position: 'top-right',         })     }

    function alertSuccess(msg) {         $.toast({             heading: 'Success',             text: msg,             icon: 'success',             loader: true,             loaderBg: '#fff',             showHideTransition: 'slide',             hideAfter: 6000,             allowToastClose: false,             position: 'bottom-center',         })     }

    function alertWarning(msg) {         $.toast({             heading: 'Warning',             text: msg,             icon: 'warning',             loader: true,             loaderBg: '#fff',             showHideTransition: 'slide',             hideAfter: 6000,             allowToastClose: false,             position: 'bottom-right',         })     }

    function alertInfo(msg) {         $.toast({             heading: 'Attention',             text: msg,             icon: 'info',             loader: true,             loaderBg: '#fff',             showHideTransition: 'slide',             hideAfter: 6000,             allowToastClose: false,             position: 'bottom-right',         })     }

 

Controller Example

  public function store(Request $request)     {         CategoryFacade::store($request->all());         $response['alert-success'] = 'Category created successfully';         return redirect()->route('categories.all')->with($response);     }

 

Script CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js"     integrity="sha512-zlWWyZq71UMApAjih4WkaRpikgY9Bz1oXIW5G0fED4vk14JjGlQ1UmkGM392jEULP8jbNMiwLWdM8Z87Hu88Fw=="     crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

Style CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.css"     integrity="sha512-wJgJNTBBkLit7ymC6vvzM1EcSWeM9mmOu+1USHaRBbHkm6W9EgM0HY27+UtUaprntaYQJF75rc8gjxllKs5OIQ=="     crossorigin="anonymous" referrerpolicy="no-referrer" />

Thanks for reading ❤

Ready to grow your business digitally?