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

xam8gpfp 于 2023-01-31 发布在其他

关注(0)|答案(2)|浏览(111)

如何显示一个弹出通知在管理员方面，当客户点击一个订单？。现在它没有得到弹出通知？。
var audio =文档. getElementById（"我的音频"）;

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>

laravel

来源：https://stackoverflow.com/questions/72255569/how-to-display-a-pop-up-notification-laravel-using-ajax

2条答案

按热度按时间

9jyewag01#

AJAX

<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);
}

赞(0）回复(0）举报 2023-01-31

sxpgvts32#

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

$('.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>

赞(0）回复(0）举报 2023-01-31

我来回答

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

弹出代码

2条答案

AJAX

控制器

相关问题

热门标签

最新问答