Toast message not showing and website stuck on refresh

Question

I'm using ajax to validate a form and redirect on submission success. Everything is working fine, however on fail where I've set the status code to a specific number to print a toast message, the site would refresh and get stuck, without displaying any toast. Everything works fine when I remove the line to display toast.

here is the layout

<div class="container-fluid">
    <div class="m-0 p-0">
        <div class="alert-container">@include('layout.toast-message')</div>
        {{ $slot}}
    </div>
</div>

and in layout.toast-message

@if ($errors->any())
<div class="alert alert-danger alert-dismissable fade show {{ session()->get('dismiss', '') }}" data-auto-dismiss="2000">
  <i class="fas fa-times-circle toast-icon"></i>
  <div class="toast-message">{{ $errors->has('message') ? $errors->first('message', ':message') : __('The given data was invalid.') }}</div>
  <i class="fal fa-times close" data-dismiss="alert" aria-label="Close"></i>
</div>
@endif

This is the toastmessage() function

function toastMessage(url, status, message) {
    /* declaring empty data object*/
    var data = {};
    /* adding status property to data with its value of message */
    data[status] = message;
    $.ajax({
        url: url,
        data: data,
        cache: false,
        context: $('.alert-container')
    }).done(function (response) {
        /* alert-container to display response */
        $(this).html(response);
        $(this).show();

    });
}

And on ajax fail call where I will call toastMessage(url, status, message)

.fail(function (jqXHR) { /* on server fail check for json response */

if (jqXHR.responseJSON) {
  if (jqXHR.status == 500) {
    /* parse the json response as a message in toastMessage function */
    toastMessage("", 'error', jqXHR.responseJSON.message);
  }
}
});

On removing the toastmessage() function, the site refresh and runs fine, so I'm thinking it's something to do with how I've set the parameters that affected the function call.

Answer 1

You could try the ToastMaker library, the toast messages created with this library does not block the ui thread.

$('#mybutton').click(()=>{ToastMaker("This is a toast notification!")});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://unpkg.com/toastmaker/dist/toastmaker.min.css">

<script type="text/javascript" src="https://unpkg.com/toastmaker/dist/toastmaker.min.js"></script>


<button id="mybutton">Show Toast</button>

Visit this page to check more examples with beautiful styled toast messages