Using jquery and ajax to call a php file to load data into multiple divs

Question

thanks for clicking on this question, I'm trying to add a new function that whenever I click on a button, it will load multiple rows of items into a div.

This is my code for the div

<div id="add_items_row"></div>

This is the button

<div class="col-sm-2 add_items">
   <button 
    type="button" id="add_items" name="add_items" class="btn btn-primary" 
    onclick="add_items()"> <?php echo $add_items_btn; ?>
   </button>
 </div>

This is the function

function add_items() {
  if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
  } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          txt = xmlhttp.responseText;
          $(txt).clone().prependTo( "#add_items_row");
      }
  }
  xmlhttp.open("GET", "../php/add_items.php");
  xmlhttp.send();
}

This is the code in my add_items.php file

    $sql = mysqli_query($conn, "SELECT id, item_name, item_qty FROM inventory WHERE active = 1");
    while($row = mysqli_fetch_array($sql)){
      $item_id = $row['id'];
      $item_name = $row['item_name'];
      $item_qty = $row['item_qty'];
    }

    $display_row = '
      <div class="col-md-4">
         <input type="hidden" class="small form-control" name="item_id[]" value="'.$item_id .'">
         <input type="text" class="small form-control" name="item_name[] readonly value="'.$item_name .'">
         <input type="text" class="small form-control" name="item_qty[] readonly value="'.$item_qty .'">
      </div>
   ';

   echo $display_row;

The SQL statement works in my db and it returns multiple rows, however on the page itself it is only adding one item into the add_items_row div.

Also, when I open the add_items.php page, its only showing one item as well.

I suspect the issue is either in my add_items.php file or in the function. Thank you to those who've read my question, I'm new to programming and any insight or advice would help me out.

Answer 1

I changed the code to this and the items are showing up.

$sql = mysqli_query($conn, "SELECT id, item_name, item_qty FROM inventory WHERE active = 1");
$display_row = '';
while ($row = mysqli_fetch_array($sql)) {
    $item_id = $row['id'];
    $item_name = $row['item_name'];
    $item_qty = $row['item_qty'];

    $display_row .= '
      <div class="col-md-4">
         <input type="hidden" class="small form-control" name="item_id[]" value="' . $item_id . '">
         <input type="text" class="small form-control" name="item_name[] readonly value="' . $item_name . '">
         <input type="text" class="small form-control" name="item_qty[] readonly value="' . $item_qty . '">
      </div>
    ';
}

echo $display_row;