How to display a pop up notification laravel using ajax?-CodePudding

How to display a pop-up notification in admin side when a customer click an order?. Now its not getting the pop-up notification?.when inspect the values getting.

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

Controller

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

pop up code

<div  id="popup-modal">
<div  role="document">
    <div >
        <div >
            <div >
                <div >
                    <center>
                        <h2 style="color: rgba(96,96,96,0.68)">
                            <i ></i> You have new order, Check Please.
                        </h2>
                        <hr>
                        
                    </center>
                </div>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

You are displaying the popup through modal window. You can trigger the modal window through javascript. I hope the below code will be useful for you. Try this code in jsFiddle with jQuery enabled. Append the javascript code inside the ajax code where you need to display the notification.

HTML :

<div id="myModal"  tabindex="-1">
  <div >
    <div >
      <div >
        <h5 >Modal title</h5>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div >
        <p>Modal body text goes here.</p>
      </div>
      <div >
        <button type="button"  data-bs-dismiss="modal">Close</button>
        <button type="button" >Save changes</button>
      </div>
    </div>
  </div>
</div>

<button >
Submit
</button>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

Javascript :

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

CodePudding user response：

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>

Controller

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