如何在PHP应用程序中使用的Bootstrap 4警报上使用Sweet警报

问题描述

我在我的PHP应用程序中使用引导警报来显示有关用户活动的警报消息。现在，我想实施甜蜜警报，那么如何正确替换它才能正常工作？ 吼叫是我的messages.PHP

  <?PHP if (isset($_SESSION['success_msg'])): ?>
      <div id="success-alert" class="alert <?PHP echo 'alert-success'; ?> alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <?PHP
          echo $_SESSION['success_msg'];
          unset($_SESSION['success_msg']);
        ?>
      </div>
    <?PHP endif; ?>

    <?PHP if (isset($_SESSION['error_msg'])): ?>
      <div id="danger-alert" class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <?PHP
          echo $_SESSION['error_msg'];
          unset($_SESSION['error_msg']);
        ?>
      </div>
    <?PHP endif; ?>

我该如何使用？

//Success Message
    Swal.fire(
        {
            title: 'Success!',text: 'Updated successfully!',type: 'success',confirmButtonColor: "#58db83",}
    )  
    
    //Error Message
    Swal.fire(
        {
            title: 'Failed!',text: 'Something went Wrong!',type: 'warning',}
    )

//Error Message
        $('#sa-title').click(function () {
                Swal.fire(
                    {
              icon: 'error',title: 'Your work has Failed to saved',showConfirmButton: true,timer: 2000
                    }
                )
        });

        //Success Message
        $('#sa-success').click(function () {
           Swal.fire(
              {
                icon: 'success',title: 'Your work has been saved',timer: 2000
              }
            )
        });

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZonixN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@9.17.1/dist/sweetalert2.min.css">



 <div class="row">
    <div class="col-lg-3 col-md-6 m-b-30">
        <p class="text-muted">A Error Message</p>
        <button type="button" class="btn btn-primary waves-effect waves-light" id="sa-title">Click me</button>
    </div>
    
    
    <div class="col-lg-3 col-md-6 m-b-30">
        <p class="text-muted">A success message!</p>
        <button type="button" class="btn btn-primary waves-effect waves-light" id="sa-success">Click me</button>
    </div>
</div>  





<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.17.1/dist/sweetalert2.min.js"></script>

解决方法

我已成功将此添加到我的应用中 我已经编辑过的php文件

<?php if (isset($_SESSION['success_msg'])): ?>
  <div id="success-message">
      <p class="text-white"><?php  echo $_SESSION['success_msg'];?></p>
      <?php  unset($_SESSION['success_msg']); ?>
  </div>
<?php endif; ?>

<?php if (isset($_SESSION['error_msg'])): ?>
  <div id="danger-message">
      <p class="text-white"><?php echo $_SESSION['error_msg'];?></p>
    <?php   unset($_SESSION['error_msg']);?>
  </div>
<?php endif; ?>

还有JS代码

//Success Message
if ($("#success-message").length > 0) {
    var textMsG = $('#success-message > .text-white').text();

    Swal.fire(
        {
            title: 'Success!',text: textMsG,type: 'success',confirmButtonColor: "#58db83",}
    )
}

//Error Message
if ($("#danger-message").length > 0) {
    var textMsG = $('#success-message > .text-white').text();

    Swal.fire(
        {
            title: 'Failed!',type: 'error',}
    )
}