Load data into a html class - php

Question

I am retrieving data from mysql and need to display the result in a specific class. I am using jquery to update every 10 seconds and this is working ok. Where I am getting stuck is getting that data into a specific class: actions.
I would be grateful if someone could point me in the right direction? php or jquery will be acceptable. Many thanks
$sql= mysqli_query($conn,"SELECT count(*) as total FROM act WHERE new = '1'");
$rows = mysqli_fetch_assoc($sql);
$num = $rows['total'];
$ni = $num;
if($ni < 1) {
$ni = '0';
} else {
echo $ni; <--- NEED TO LOAD RESULT IN ACTIONS CLASS
}
Example html from header.php
<li>
Boxes <span class="drop-icon">▸</span> <label class="drop-icon" for="sm4" title="Toggle Drop-down">▾</label>
<input id="sm4" type="checkbox">
<ul class="sub-menu">
<li>
New Intake <span style="float: right;" class="notification ni"><?php echo $ni_num; ?></span>
</li>
<li>
Retrievals <span style="float: right;" class="notification retrievals"><?php echo $brtv_num; ?></span>
</li>
<li>
Returns <span style="float: right;" class="notification returns"><?php echo $brtn_num; ?></span>
</li>
<li>
Destructions <span style="float: right;" class="notification destructions"><?php echo $bdstr_num; ?></span>
</li>
<li>
Permanent Retrieval <span style="float: right;" class="notification pretrieval"><?php echo $prtv_num; ?></span>
</li>
</ul>
</li>
Example from loadActions.php
$sql= mysqli_query($conn,"SELECT count(*) as total FROM act WHERE new = '1'");
$rows = mysqli_fetch_assoc($sql);
$num = $rows['total'];
$ni = $num;
if($ni < 1) {
$ni = '0';
} echo $ni;
$nisql= mysqli_query($conn,"SELECT count(*) as intake FROM act WHERE activity='New Intake' AND new = '1'"); // provide db connection object as first parameter
$ni_row = mysqli_fetch_assoc($nisql);
$ninum = $ni_row['intake'];
//echo $num;
$ni_num = $ninum;
if($ni_num < 1) {
$ni_num = '0';
} echo $ni_num;
$brtvsql= mysqli_query($conn,"SELECT count(*) as brtv FROM act WHERE activity='Box Retrieval' AND new = '1'"); // provide db connection object as first parameter
$brtv_row = mysqli_fetch_assoc($brtvsql);
$brtvnum = $brtv_row['brtv'];
//echo $num;
$brtv_num = $brtvnum;
if($brtv_num < 1) {
$brtv_num = '0';
} echo $brtv_num;
$brtnsql= mysqli_query($conn,"SELECT count(*) as brtn FROM act WHERE activity='Box Return' AND new = '1'"); // provide db connection object as first parameter
$brtn_row = mysqli_fetch_assoc($brtnsql);
$brtnnum = $brtn_row['brtn'];
//echo $num;
$brtn_num = $brtnnum;
if($brtn_num < 1) {
$brtn_num = '0';
} echo $brtn_num;

Answer 1

Please note, I am NOT a PHP programmer so you will have to do some work yourself
Take below as pseudo code and ask another PHP question if the PHP does not make sense.
Have ONE request
select activity,
count(*) total,
sum(activity = 'New Intake') intakeCount,
sum(activity = 'Box Retrieval') boxCount,
...
from act WHERE new = '1'
if ($rec["total"] == 0) {
echo '{ "total" : 0 }';
die 0;
}
$res = array(
"total" => $rec["total"],
"ni" => $rec["intakeCount"],
"retrievals" => $rec["boxCount"],
...
);
echo json_encode($res);
Result should be
{ "total" : 24,
"ni" : 14,
"retrievals" : 9,
....
}
Then you can do
function getBoxes() {
$.get('/domain/admin/loadActions.php', function(data) {
processData(data);
setTimeout(getBoxes, 15000);
});
}
function processData(data) {
for (key in data) {
console.log(key,data[key])
$("." + key).text(data[key]);
}
}
$(function() { // page load
// testing - remove this when running the getBoxes():
processData({
"total": 24,
"ni": 14,
"retrievals": 9
});
// getBoxes(); // remove comment when tested
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
Boxes <span class="drop-icon">▸</span> <label class="drop-icon" for="sm4" title="Toggle Drop-down">▾</label>
<input id="sm4" type="checkbox">
<ul class="sub-menu">
<li>
New Intake <span style="float: right;" class="notification ni"></span>
</li>
<li>
Retrievals <span style="float: right;" class="notification retrievals"></span>
</li>
<li>
Returns <span style="float: right;" class="notification returns"></span>
</li>
<li>
Destructions <span style="float: right;" class="notification destructions"></span>
</li>
<li>
Permanent Retrieval <span style="float: right;" class="notification pretrieval"></span>
</li>
</ul>
</li>
<div class="total"></div>