如何在 laravel 5 中成功完成提交时显示甜蜜的警报框

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

本文关键字：甜蜜 显示 提交 laravel 成功      更新时间：2023-09-26

我想在单击提交按钮并且所有验证正确后显示一个甜蜜的警报。我已经使用请求类完成了验证。我该怎么做？

假设你使用的是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拉拉维尔包装器，请像使用任何其他软件包一样使用作曲家：

composer require uxweb/sweet-alert

然后在 Laravel 配置/应用程序中设置别名.php

供应商：

'providers' => [
    /*
     * Laravel Framework Service Providers...
     */
    ...
    'UxWeb'SweetAlert'SweetAlertServiceProvider',
],

别名： 

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

下载 sweetalert 文件并将它们放在您的公共目录中，并从您的布局文件链接到它们。

在 laravel 主模板中包含默认布局，如 github 文档中的内容

@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（"警报取消"）

SweetAlert的GitHub示例

拉拉维尔的验证文档

您可以从这里下载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>

相关文章：