I am coding a restaurant application where the customers can order the food on a webpage. The problem i have is when the customers done ordering the food, the web will output that the order havent paid yet untill the customers paid it to the restaurant staffs and the restaurant staffs update the order in the database from another device. I want this webpage to constantly check the database with the same "order_id" and check the "status" field. The status field will have integer value (0=havent paid, 1=paid) This is how the ordering works

• guy order the food from guy's device
• guy clicked "done"
• the order is placed in a table database with a fieldset simply like this ("order_id","order_status")
• guy's web page outputs "Waiting for payment"
• guy paid it to the staff
• staff updates the "order_status" from 0 to 1 from another device
• guy's webpage automatically outputs "Payment Received" and shows a button to go back to home.php

This is my webpage

<div class="modal-header">
  <h5 class="modal-title" id="">Waiting for payment</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
  <p class="h5">Transaction is on going <span class='spinner-border spinner-border-sm'></span></p>
  <p class='h5'>total price = Rp. <?php echo $_SESSION['totalprice'];?> ,-</p>
  <div class="overflow-auto mb-3" style="height: 400px;">
  </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">cancel</button>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Im planning to use ajax for this one but im really new to ajax and the other thread seems to not quite what i seek for because it involves a button click or an input from the user, but i want this to be in real time and not have any inputs from the customers. im using mysql for the database.

CodePudding user response：

Your AJAX call can be made at set intervals using Javascript's aptly-named setInterval() function.

The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.

This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval().

MDN setInterval()

CodePudding user response：

Well you will be dealing with something like

<script>
function checkOrderStatus(){
     // Instantiate an new XHR Object
        const xhr = new XMLHttpRequest();
  
        // we call the file responsible for checking the db
        xhr.open("GET","check_order.php", true);
  
        // When response is ready
        xhr.onload = function () {
            if (this.status === 200) {  
                // we check the data return 
                if(this.responseText === 1){
                    // Getting the element where we will display our response message
                let feedback = getElementsByClassName("h5");
                feedback.innerHTML = "Payment Received";
                clearInterval(timer); // we stop checking the database
                 } else {
                    console.log('Still waiting...');
               };              
                
            }
            else {
                console.log("Something went wrong!");
            }
        }
  
        // At last send the request
        xhr.send();
    }
}

// now we want call this function every 3 seconds
let timer = setInterval(() => checkOrderStatus(), 3000);

Of course you will have to pass an order ID either appending to the url to check_order.php or as a session variable