How can I use JS, JQuery, PHP, and MySQLi to automatically generate an HTML table within a div on a webpage? The table should display data based on user-input search criteria. For example, the user enters a start date and end date, clicks a button, which then sends a request to a PHP file to query a MySQLi table. The PHP file returns a multi-dimensional array to JS that processes the data to build the HTML table.
From the user's perspective, they input a range of dates and see a list of bookings made between those dates displayed elsewhere on the same page.
To manage my code effectively, I want to keep my JS script in a separate file referenced in the HTML header and the PHP script in another file referenced from the JS script.
This is a snippet of what my JS script looks like:
$(document).ready(function(){
var startDate = new Date (2017,11,25);
var stopDate = new Date (2017,11,31);
displayBookings = function(startDate, stopDate) {
$.post("php/getBookings.php", {
startDate: startDate,
stopDate: stopDate
},
function(data){
html = "<table>";
var i, j, result = JSON.parse(data);
while (i=0, i <= result.length, i++) {
while (j=0, j <= result[i].length, j++) {
html+= "<tr><td>"+result[i][j]+"</td></tr>";
}
}
html += "</table>";
$('#bookings').html(html);
});
};
});
This is a snippet of my PHP script ('getBookings.php'):
<?php
$startDate = date('Y-m-d',strtotime($_POST["startDate"]));
$stopDate = date('Y-m-d',strtotime($_POST["stopDate"]));
$con = mysqli_connect("localhost","userid","password","database");
$sql = "SELECT * FROM bookings WHERE date BETWEEN '$startDate' AND '$stopDate'";
$result = mysqli_query($con,$sql);
$rows = mysqli_num_rows($result);
for ($i = 0; $i < $rows; $i++) {
$row = mysqli_fetch_array($result);
$newArray[$i]['reference'] = $row['reference'];
$newArray[$i]['name'] = $row['name'];
$newArray[$i]['price'] = $row['price'];
}
mysqli_free_result($result);
mysqli_close($con);
echo json_encode($newArray);
?>
My HTML code includes:
<button onClick='displayBookings()'>Press</button>
<div id="bookings"></div>
When I press the button, I receive the error message:
Uncaught TypeError: Cannot read property 'length' of null
As a beginner, I'm sure I've made a basic mistake. Can someone provide assistance?