在laravel 5中成功完成提交后，如何顯示一個甜美的警告框？

Question

我想在單擊“提交”按鈕並且所有驗證均正確之后顯示一個甜美的警報。 我已經使用Request類進行了驗證，該怎么做呢？

Answer 1

假設您使用的是sweetalert Facade（ Laravel軟件包 ），則應采取以下措施：

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

要安裝sweetalert laravel包裝器，請像其他任何軟件包一樣使用composer：

composer require uxweb/sweet-alert

然后在laravels config / app.php中設置別名

提供者：

'providers' => [

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

],

別名：

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

],

下載sweetalert文件 ，並將其放置在公共目錄中，然后從布局文件鏈接到它們。

像github文檔中一樣在您的laravel主模板中包含默認布局

@include('sweet::alert')

您現在應該可以進行了。

自定義視圖（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

在主模板中，包括自定義視圖：@include（'alertcancel'）

sweetalert的github示例

Laravel的驗證文件

Answer 2

您可以從此處下載SweetAlert文件： 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>