php - Load data into a html class

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>
  <a href="javascript:void(0);">Boxes <span class="drop-icon">?</span> <label class="drop-icon" for="sm4" title="Toggle Drop-down">?</label></a>
  <input id="sm4" type="checkbox">
  <ul class="sub-menu">
    <li>
      <a href="domain/admin/newintake.php" title="Add">New Intake <span style="float: right;" class="notification ni"><?php echo $ni_num; ?></span></a>
    </li>
    <li>
      <a href="domain/admin/bretrieval.php" title="Retrievals">Retrievals <span style="float: right;" class="notification retrievals"><?php echo $brtv_num; ?></span></a>
    </li>
    <li>
      <a href="domain/admin/breturn.php" title="Returns">Returns <span style="float: right;" class="notification returns"><?php echo $brtn_num; ?></span></a>
    </li>
    <li>
      <a href="domain/admin/bdestruct.php" title="Destructions">Destructions <span style="float: right;" class="notification destructions"><?php echo $bdstr_num; ?></span></a>
    </li>
    <li>
      <a href="domain/admin/bpretrieval.php" title="Permanent Box Retrieval">Permanent Retrieval <span style="float: right;" class="notification pretrieval"><?php echo $prtv_num; ?></span></a>
    </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>
  <a href="javascript:void(0);">Boxes <span class="drop-icon">?</span> <label class="drop-icon" for="sm4" title="Toggle Drop-down">?</label></a>
  <input id="sm4" type="checkbox">
  <ul class="sub-menu">
    <li>
      <a href="domain/admin/newintake.php" title="Add">New Intake <span style="float: right;" class="notification ni"></span></a>
    </li>
    <li>
      <a href="domain/admin/bretrieval.php" title="Retrievals">Retrievals <span style="float: right;" class="notification retrievals"></span></a>
    </li>
    <li>
      <a href="domain/admin/breturn.php" title="Returns">Returns <span style="float: right;" class="notification returns"></span></a>
    </li>
    <li>
      <a href="domain/admin/bdestruct.php" title="Destructions">Destructions <span style="float: right;" class="notification destructions"></span></a>
    </li>
    <li>
      <a href="domain/admin/bpretrieval.php" title="Permanent Box Retrieval">Permanent Retrieval <span style="float: right;" class="notification pretrieval"></span></a>
    </li>
  </ul>
</li>
<div class="total"></div>