laravel 8 的 sweetalert 2 上没有出现取消

Question

我希望在用户想要提交批准时弹出警告。但是，当点击 sweetalert 上的提交时，它只显示正常，没有取消选项。

如何让取消选项出现？

这是我的 blade 脚本：

<form action="{{ route('Upload') }}" method="POST" enctype="multipart/form-data" id="form" class="formsubmit">
                                              @csrf
                                              <div class="form-group">
                                                  <label for="title">Title:</label>
                                                  <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" placeholder="Enter Title" name="title" >
                                                  <!-- <span class="text-danger error-text judul_err"></span> -->
                                                  @error('title')
                                                    <div class="alert alert-danger mt-2">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                              </div>
                                              <!-- <div class="form-group">
                                                        <b>Images</b><br/>
                                                        <input type="file" name="file">
                                                    </div> -->
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input @error('file') is-invalid @enderror" name="file">
                                                <label class="custom-file-label" for="file">Pilih Berkas Maks. 2 MB</label>
                                                @error('file')
                                                    <div class="alert alert-danger mt-2">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                          </br>
                                          </br>
                                          </br>
                                            <div align="center">
                                              <input type="submit" value="Autentikasi" class="btn btn-primary"></input>
                                            </div>
                                            </form>

和脚本 javascript :

<script type="text/javascript">
        $(document).on('submit', '[id^=form]', function (e) {
          e.preventDefault();
          var data = $(this).serialize();
          swal({
              title: "Are you sure?",
              text: "Do you want to submit and pay 10 Rupiah",
              type: "warning",
              showCancelButton: true,
              confirmButtonText: "Yes, send it!",
              cancelButtonText: "No, cancel pls!",
          }).then(function () {
              $('#form').submit();
          });
          return false;
        });
        </script> ```

And the result is like this :
[Cancel does not appear on sweetalert 2 on laravel 8][1]

  [1]: https://i.stack.imgur.com/Lmvy1.png

Answer 1

我假设您使用的是最新版本的 Sweet Alert，因为您使用的是最新的 Laravel。如果是这种情况，您需要将 javascript 更新为最新的 SweetAlert 方法。

这已经过测试并适用于最新版本的 jQuery 和 SweetAlert。

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<!-- sweetalert -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

$( document ).ready(function() {
    $('#form').submit(function (e) {
        e.preventDefault();
        swal({
            icon: "warning",
            title: "Are you sure?",
            text: "Do you want to submit and pay 10 Rupiah",
            buttons: ["No, cancel pls!", "Yes, send it!"],
        })
        .then((value) => {
            console.log('form submitted');
        });
    });
});

laravel 8 的 sweetalert 2 上没有出现取消

Cancel does not appear on sweetalert 2 on laravel 8

javascript

php

sweetalert

sweetalert2

laravel-8