How to display a sweet alert box when submission is completed sucessfully in laravel 5?

Question

I want to display a sweet alert after clicking the submit button and if all the validations are correct. I have done the validations using Request class.How can I do that?

Answer 1

Presuming you're using the sweetalert Facade ( Laravel package ), something like should do the trick:

if ($validator->fails()) {
    //handle your validation errors
} else {
    //validation was succesful show sweetalert and return 
    Alert::success('Success Message', 'Optional Title');
    return Redirect::home();
}

To install the sweetalert laravel wrapper use composer like any other package:

composer require uxweb/sweet-alert

then set up the aliases in laravels config/app.php

Providers:

'providers' => [

    /*
     * Laravel Framework Service Providers...
     */
    ...
    'UxWeb\SweetAlert\SweetAlertServiceProvider',

],

Aliases:

'aliases' => [
    ...
    'Alert'         => 'UxWeb\SweetAlert\SweetAlert',

],

Download the sweetalert files and place them in your public directory and link to them from your layout files.

Include the default layout in your laravel master template as in the github documentation

@include('sweet::alert')

You should now be good to go.

Custom View (alertcancel.blade.php)

@if (Session::has('sweet_alert.alert'))
    <script>
        swal({
            text: "{!! Session::get('sweet_alert.text') !!}",
            title: "{!! Session::get('sweet_alert.title') !!}",
            timer: {!! Session::get('sweet_alert.timer') !!},
            type: "{!! Session::get('sweet_alert.type') !!}",
            showConfirmButton: "{!! Session::get('sweet_alert.showConfirmButton') !!}",
            confirmButtonText: "{!! Session::get('sweet_alert.confirmButtonText') !!}",
            confirmButtonColor: "#AEDEF4",
            showCancelButton: true
            // more options
        });
    </script>
@endif

In your master template include the custom view: @include ('alertcancel')

sweetalert's github examples

Laravel's Validation Documentation

Answer 2

You can download SweetAlert files from here: http://t4t5.github.io/sweetalert/

 document.querySelector('button#test-1').onclick = function() { swal("Here's a message!"); }; document.querySelector('button#test-2').onclick = function() { swal({ title: "Sweet!", text: "Here's a custom image.", imageUrl: "https://cdn3.iconfinder.com/data/icons/best-hand/500/Hand_finger_like_thumbs_up-512.png" }) }; document.querySelector('button#test-3').onclick = function() { swal({ title: "Are you sure?", text: "Your will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!" }); }; document.querySelector('button#test-4').onclick = function() { swal("Oops...", "Something went wrong!", "error"); }; 

 @import url(http://fonts.googleapis.com/css?family=Merriweather:300,700); @import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:300,700); * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { background: #00000; font-family: 'Merriweather', serif; color: #efefef; font-weight: 300; font-size: 1em; line-height: 1.5; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); } a, a:visited { color: #00000; } .wrapper { width: 960px; margin: 1em auto; padding: 2em 3em; text-align: center; border: 2px solid #FFFFF; } h1 { font-family: 'Merriweather Sans', sans-serif; } button { padding: 0.4em 0.8em; font-size: 1.1em; border-radius: 25px; font-family: 'Merriweather Sans', sans-serif; color: #fff; font-weight: 300; background: #sdfs8; box-shadow: none; border: 1px solid #90AABF; cursor: pointer; } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://tristanedwards.me/u/SweetAlert//lib/sweet-alert.js"></script> <link rel="stylesheet" type="text/css" href="http://tristanedwards.me/u/SweetAlert//lib/sweet-alert.css"> <div class="wrapper"> <p> <button id="test-1">Basic</button> <button id="test-2">Success</button> <button id="test-3">Fancy</button> <button id="test-4">Error</button> <p> <p>&nbsp;</p> </div>