如何使用 ajax 显示弹出通知 laravel？

Question

当客户点击订单时，如何在管理端显示弹出通知？现在它没有收到弹出通知？当检查获取的值时。

var audio = document.getElementById("myAudio");

function playAudio() {
    audio.play();
}

function pauseAudio() {
    audio.pause();
}

Ajax

   <script>
setInterval(function () {
    $.ajax({
        url: '{{route('get-order-data')}}',
        dataType: 'json',
        success: function (response) {
            let data = response.data;
        
            if (data.new_order > 0) {
                playAudio();
                $('#popup-modal').appendTo("body").modal('show');
            }
    
            
        },
    });
}, 1000);

控制器

public function order_data()
{
    $new_order = DB::table('orders')->where(['checked' => 0])->count();
    return response()->json([
        'success' => 1,
        'data' => ['new_order' => $new_order]
    ]);
}

弹出代码

<div class="modal" id="popup-modal">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <div class="row">
                <div class="col-12">
                    <center>
                        <h2 style="color: rgba(96,96,96,0.68)">
                            <i class="tio-shopping-cart-outlined"></i> You have new order, Check Please.
                        </h2>
                        <hr>
                        
                    </center>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

阿贾克斯

<script>
$(document).ready(function(){
setInterval(function () {
    $.ajax({
        url: '{{route('get-order-data')}}',
        type: 'GET',
        dataType: 'json',
        success: function (response) {                       
                    $.each(response.new_order, function (key, value) { 
                        if (value.new_order > 0) {
            playAudio();
            $('#popup-modal').modal('show');
        }                        
                    });
                    }
    });
}, 1000);
});
</script>

控制器

public function order_data()
{
    $data = DB::table('orders')->where('checked', 0)->get();
    $count = $data->count();
    $res['new_order'] = array([
    'success' => 1,
    'new_order' => $count
    ]);
    return response()->json($res);
}

Answer 2

您正在通过模式窗口显示弹出窗口。您可以通过 javascript 触发模态窗口。我希望下面的代码对你有用。在启用 jQuery 的 jsFiddle 中尝试此代码。在需要显示通知的 ajax 代码中附加 javascript 代码。

$('.btn').click(function () {
     $("#myModal").modal('show');
    })

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="myModal" class="modal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    
    <button class="btn">
    Submit
    </button>