How to retrieved data from mysql using php and show it on javascript?

Question

I am trying to create a real time update using php and javascript. For example, If the user added a new client, the number of rows should be reflect on the element of the HTML using javascript. Can someone teach me how to do that? I have this code below, and trying to retrieved it, but it does not have a value.

PHP:

<?php
 include("pConfig.php");
 session_start();
 $cntPending = 0;
 $sql = "SELECT * FROM ci_account_info Where Status = 0";
 $result = mysqli_query($db,$sql);
 if (!$result) {
 printf("Error: %s\n", mysqli_error($db));
 exit();
 }
 $cntPending = mysqli_num_rows($result);
?>

JAVASCRIPT:

function getTimeSheetValue() {
 $.ajax({
 type: 'POST',
 url: '../back_php_Code/pCntPending.php',
 dataType: 'json',
 data: '',
 contentType: 'application/json; charset=utf-8',
 success: function (response) {
 var cells = eval("(" + response.d + ")");
 document.getElementById("lblPending").innerHTML = cell[0].value;
 },
 }); 
}

HTML:

<h4 id="lblPending" class="m-b-0">0</h4>

Thank you and Regards

Answer 1

You have to add echo line in PHP when query is success, then php could send message back to ajax, so change your PHP code:

 <?php
 include("pConfig.php");
 session_start();
 $cntPending = 0;
 $sql = "SELECT * FROM ci_account_info Where Status = 0";
 $result = mysqli_query($db,$sql);
 if (!$result) 
 {
 printf("Error: %s\n", mysqli_error($db));
 exit();
 }
 else
 {
 $cntPending = mysqli_num_rows($result);
 echo $cntPending;
 }
 ?>

And your javascript need to change a little bit:

function getTimeSheetValue(user, pass) {
 $.ajax({
 type: 'POST',
 url: '../back_php_Code/pCntPending.php',
 dataType: 'text',
 contentType: 'application/json; charset=utf-8',
 success: function (response) {
 var cell = response;
 document.getElementById("lblPending").innerHTML = cell;
 },
 }); 
}