Why is my 1 to 1 copy of the w3schools ajax database tutorial only pulling the first set of data?-CodePudding

I'm trying to figure out why my 1 to 1 copy of the w3 schools ajax data base pull example is only pulling the first customer worth of data. The code I am running is a 1 to 1 copy of w3 schools with my server info in place of theirs. I added their same info that they display to my database.

I made a 1 to 1 copy of the following exercises at w3 schools.

I made the front end to be a perfect copy of their front end:

<!DOCTYPE html>
<html>
<style>
th,td {
  padding: 5px;
}
</style>
<body>

<h2>The XMLHttpRequest Object</h2>

<form action=""> 
  <select name="customers" onchange="showCustomer(this.value)">
    <option value="">Select a customer:</option>
    <option value="ALFKI">Alfreds Futterkiste</option>
    <option value="NORTS ">North South</option>
    <option value="WOLZA">Wolski Zajazd</option>
  </select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>

<script>
function showCustomer(str) {
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("txtHint").innerHTML = this.responseText;
  }
  xhttp.open("GET", "getcustomer.php?q=" str);
  xhttp.send();
}
</script>
</body>
</html>

Then I added in my own server info in place of the nottelling, noway, notachance and nope:

    <?php
$mysqli = new mysqli("nottelling", "noway", "notachance", "nope");
if($mysqli->connect_error) {
  exit('Could not connect');
}

$sql = "SELECT CustomerID, CompanyName, ContactName, Address, City, PostalCode, Country
FROM customers WHERE CustomerID = ?";

$stmt = $mysqli->prepare($sql);
$stmt->bind_param("s", $_GET['q']);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($cid, $cname, $name, $adr, $city, $pcode, $country);
$stmt->fetch();
$stmt->close();

echo "<table>";
echo "<tr>";
echo "<th>CustomerID</th>";
echo "<td>" . $cid . "</td>";
echo "<th>CompanyName</th>";
echo "<td>" . $cname . "</td>";
echo "<th>ContactName</th>";
echo "<td>" . $name . "</td>";
echo "<th>Address</th>";
echo "<td>" . $adr . "</td>";
echo "<th>City</th>";
echo "<td>" . $city . "</td>";
echo "<th>PostalCode</th>";
echo "<td>" . $pcode . "</td>";
echo "<th>Country</th>";
echo "<td>" . $country . "</td>";
echo "</tr>";
echo "</table>";
?>

After all that,

The first customer pulls, but the table elements are not brought over to the html.

Then if I try to pull the second customer, it gives the header data, but fails to pull from the database.

The third pulls headers, but, also fails to pull data from the database.

I followed the tutorial faithfully with the exception of taking a / out of the second customer code, removing spacing from the data in the fields (which was causing the import to fail until I did it) and finally I changed some of the zipcodes to remove dashes and spaces just to see if it would help (when trying to import the database).

Am I failing to follow this tutorial in some way? Is there another tutorial that could better illustrate this stuff to me?

CodePudding user response：

Issue resolved! There were spaces in the MySQL database that slipped in when I did the csv import. Spaces before and after value.

After removing the spaces, this was fixed.