Refresh page if there is change in database

I am trying to refresh my a page if there is a change in orderStatus from database using Ajax and PHP. I set the current orderStatus as predefined data and then use Ajax to get the current orderStatus from database and finally compare if they are not the same. I want to refresh the page if they are not the same.

PHP (autorefresh.php)

<?php

$orderId = $_POST["orderId"];

$query = "SELECT * FROM orderinhomeonlinecall WHERE orderId='$orderId'";
$result = mysqli_query($db, $query);
 
  while($row = mysqli_fetch_array($result))
  {
      $orderStatus = $row['orderStatus'];

      $data = array(
        'orderStatus'   => $orderStatus
       );
       echo json_encode($data);
}
?>

Javascript

<script type="text/javascript" >
var predefined_val = '<?php echo $orderStatus; ?>';// your predefined value.
$.document(ready(function(){
    setInterval(function(){
        $.ajax({
            type:"POST",
            url:"autorefresh.php", //put relative url here, script which will return php
            data:{orderId: <?php echo $orderId; ?>}, // if any you would like to post any data
            success:function(response){
                var data = response; // response data from your php script
                if(predefined_val !== data){
                    window.location.href=window.location.href;
                }
            }
        });                     
    },5000);// function will run every 5 seconds
}));

</script>

The below code should work, Need to mention dataType:"json" else use JSON.stringify(data) to parse response

<script type="text/javascript">
var predefined_val = '<?php echo $orderStatus; ?>';// your predefined value.
$(document).ready(function () {
    setInterval(function () {
        $.ajax({
            type: "POST",
            url: "autorefresh.php", //put relative url here, script which will return php
            data: {orderId: <?php echo $orderId; ?>}, // if any you would like to post any data
            dataType: "json",
            success: function (response) {
                var data = response; // response data from your php script
                if (predefined_val !== data.orderStatus) {
                    window.location.href = window.location.href;
                }
            }
        });
    }, 5000);// function will run every 5 seconds
});
</script>

I have tested this by creating two files(autorefresh.php,index.php) and test db with table and it is working for me. I think the below code would be helpful, If not please share you code, i will check and fix it.

autorefresh.php
<?php

// Create connection
$db = new mysqli("localhost", "root", "","test");

$orderId = $_POST["orderId"];

$query = "SELECT * FROM orderinhomeonlinecall WHERE orderId='$orderId'";

$result = mysqli_query($db, $query);

  while($row = mysqli_fetch_array($result))
  {
      $orderStatus = $row['orderStatus'];

      $data = array(
        'orderStatus'   => $orderStatus
       );
       echo json_encode($data);
}
?>

index.php

<?php
$orderStatus ='pending';
$orderId =1;
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
var predefined_val = '<?php echo $orderStatus; ?>';// your predefined value.
$(document).ready(function () {
    setInterval(function () {
        $.ajax({
            type: "POST",
            url: "autorefresh.php", //put relative url here, script which will return php
            data: {orderId: <?php echo $orderId; ?>}, // if any you would like to post any data
            dataType: "json",
            success: function (response) {
                var data = response; // response data from your php script
                if (predefined_val !== data.orderStatus) {
                    window.location.href = window.location.href;
                }
            }
        });
    }, 5000);// function will run every 5 seconds
});
</script>