I am building a web page that gets data through a php file and with manipulation with AJAX and JQuery, displays the said data into a table.
In the buttons i have created, I want to be able to change the "page" to different pieces of data and have them displayed into the table. Currently the problem is that the data I have parsed through the query is returning the main page of data.
I believe the problem is in my page data function but i do not know how to fix this.
//Function to add the page data to the assigned buttons
$('#Buttons').on('click', 'button', function() {
$('#Table1 tbody').remove();
$('#Table1').append("<tbody></tbody>");
var ap = 1
for(ap; ap <= 15; ap++){
if ($(this).attr('id') == ap){
$.getJSON('https://www.cs.kent.ac.uk/people/staff/lb514/hygiene/hygiene.php?=retrieve&pages=' + ap, function(data){
console.log(data)
var row
var t = 0;
for(t; t < data.length; t++){
$('#Table1').append( "<tr>" + "<td>" + data[t].business + "</td>", "<td>" + data[t].address + "</td>", "<td>" + data[t].rating + "</td>", "<td>" + data[t].date + "</td>"+"</tr>")
}
})
}
}
The complete code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title> Food Ratings </title>
<style>
h1{
size:20px;
color:#F44336;
underline:bold;
}
table, th, td{
border: 1px solid #E91E63;
}
#Buttons{
padding: 15px 32px;
text-align: center;
}
p{
padding:5px;
padding-bottom:10px;
}
body{
background-color:#B3E5FC;
color:#9C27B0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//First function to display the table
$.get('https://www.cs.kent.ac.uk/people/staff/lb514/hygiene/hygiene.php', {
op: "demo",
}, function(data){
var row;
console.log(data);
data = $.parseJSON(data);
for(var i = 0; i < data.length; i++){
row = $('<tr/>');
row.append( "<td>" + data[i].business + "</td>", "<td>" + data[i].address + "</td>", "<td>" + data[i].rating + "</td>", "<td>" + data[i].date + "</td>");
$('#Table1').append(row);
}
});
//Function to create the buttons to select the pages
$.get('https://www.cs.kent.ac.uk/people/staff/lb514/hygiene/hygiene.php', {
op : "pages",
}, function(data){
var butNum = 1;
console.log(data)
data = $.parseJSON(data);
for(butNum; butNum <= data.pages; butNum++) {
$('#Buttons').append('<button id='+butNum +'>' + butNum+ '</button>');
}
}) ;
//Function to add the page data to the assigned buttons
$('#Buttons').on('click', 'button', function() {
$('#Table1 tbody').remove();
$('#Table1').append("<tbody></tbody>");
var ap = 1
for(ap; ap <= 15; ap++){
if ($(this).attr('id') == ap){
$.getJSON('https://www.cs.kent.ac.uk/people/staff/lb514/hygiene/hygiene.php?=retrieve&pages=' + ap, function(data){
console.log(data)
var row
var t = 0;
for(t; t < data.length; t++){
$('#Table1').append( "<tr>" + "<td>" + data[t].business + "</td>", "<td>" + data[t].address + "</td>", "<td>" + data[t].rating + "</td>", "<td>" + data[t].date + "</td>"+"</tr>")
}
})
}
}
});
$("#searchForm").submit(function(event) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $(this),
term = $form.find( "input[name='s']").val(),
url = $form.attr("action");
// Send the data using post
var posting = $.post( 'https://www.cs.kent.ac.uk/people/staff/lb514/hygiene/hygiene.php', {s: term});
// Put the results in a div
posting.done(function(data) {
var content = $(data).find("#content");
$("#Table1").empty().append(content);
})
});
});
</script>
<body>
<h1>
Food Standards Agency
</h1>
<br>
<br>
<div id="Buttons"> </div>
<table id="Table1" cellspacing="0" width="100%">
<thead>
<tr>
<th>Business</th>
<th>Address</th>
<th>Rating</th>
<th>Date</th>
</thead>
<tbody>
</tbody>
</table>
<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<p>
This site list all of the resturants in canterbury with their location and their rating according to the Food standards agency
</p>
</body>
</html>
