CODEWITHSUNDEEP
javascriptphpajax
Skylar Brown
Skylar Brown

Reputation: 41

How to create an array of objects with php and ajax

My code currently works how it should with AJAX however if you type something in to be submitted and add then click on another item you want it destroys the table creates a new one without refreshing. I am needing to make this so that it will keep the data in the text field with every selection.

I have tried figuring out how to make it an array of objects but cannot seem to make it work.

Here is my ajax call for the information to gather and to get the div i am writing it to

function orderShow(str) {
   if (str == "") {
       document.getElementById("orderText").innerHTML = "";
       return;
   } else {
       if (window.XMLHttpRequest) {
           // code for IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp = new XMLHttpRequest();
       } else {
           // code for IE6, IE5
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
       xmlhttp.onreadystatechange = function() {
           if (this.readyState == 4 && this.status == 200) {
               document.getElementById("orderText").innerHTML+= this.responseText;
           }
       };
       xmlhttp.open("GET","getOrder.php?q="+str,true);
       xmlhttp.send();
   }
}

here is my php that formats it and prints it to the table for ajax to place in the table

<?php require('includes/procs.php'); ?>

<?php
$PageName="";
$q = intval($_GET['q']);


$sql="SELECT * FROM parts WHERE PartID = '".$q."'";
$result =  mysqli_query($conn, $sql);?>

<?php
while($rs=mysqli_fetch_assoc($result)) {

      echo "<tr class="."orderList"." >";
      echo "<td class="."vendorDetails"." >" . $rs['PartID'] . "</td>";
      echo "<td class="."vendorDetails".">" . $rs['Description'] . "</td>";
      echo "<td class="."vendorDetails"."><input type="."text"." name=".$rs['PartID']." id="."part".$rs['PartID']." onchange='calculatePrice('document.getElementById'('part".$rs['PartID']."').innerHTML;');' value=".""." >
      <input type="."hidden"."  value=".$rs['Price']."></td>";
      echo "</tr>";
  }

echo "
";
mysqli_close($conn);
?>

I want it to keep the data that has already been typed. However It destroys it. see pictures below enter image description here

enter image description here

Upvotes: 0

Views: 138

Answers (2)

Skylar Brown
Skylar Brown

Reputation: 41

Soo all I actually had to do to get it to work correctly is change the line

document.getElementById("orderText").innerHTML+= this.responseText;

to 

$("#orderText").append(this.responseText);

Upvotes: 0

PhilMaGeo
PhilMaGeo

Reputation: 551

You are not at ease with js so ad minima you will have to keep an array of objects on the front-end containing your client basket 

var basket = [];

and send new items one at a time to php, then php send back to the front the newly stored item in json 

'{id:852,label:"atomic rocket",price:14544548785}'

then you transform this json string into a js object

var itemToAdd = JSON.Parse(this.responseText);

then you add it to the table :

  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = itemToAdd.id;
  cell2.innerHTML = itemToAdd.label;
  cell3.innerHTML = itemToAdd.price;

That's a start

alternatively you can add the item to your basket

basket.push(itemToAdd)

and redraw the entire table body

var tableBody = document.querySelector("#myTable body");
tableBody.innerhtml = "";
let html="";
basket.forEach(function(x){
   html+= "<tr>";
   html+= "<td>" + x.id + "</td>";
// ... idem with label and price
   html+= "</tr>";
});
tableBody.innerhtml =html;

So first : try to send back a string like this one from php

'{id:852,label:"atomic rocket",price:14544548785}'

and add it to the basket

Let's keep in touch and tell us about your progress

Don't look for a recipe, search, understand and apply

See you soon

Upvotes: 1

Related Questions