I am working on a timetable that uses hourly bookings. The front end is on the Bootstrap framework and the back end is using PHP, MySQL and JQuery.
My "events" table is setup like the following:
id | name | day | time | hotel | host
1 | Test | 1 | 01:00 | https://url.com | Name
1 | Test2 | 1 | 05:00 | https://url.com | Name
I am wanting to show the timetable based on the day selected from buttons labeled Mon, Tue, Wed, Thu and so on.
The following is what I have for the day buttons:
<form id="dayselect">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" type="submit" class="btn btn-default dayselect" name="day" value="1">Mon</button>
</div>
<div class="btn-group" role="group">
<button type="button" type="submit" class="btn btn-default dayselect" name="day" value="2">Tue</button>
</div>
<div class="btn-group" role="group">
<button type="button" type="submit" class="btn btn-default dayselect" name="day" value="3">Wed</button>
</div>
<div class="btn-group" role="group">
<button type="button" type="submit" class="btn btn-default dayselect" name="day" value="4">Thu</button>
</div>
<div class="btn-group" role="group">
<button type="button" type="submit" class="btn btn-default dayselect" name="day" value="5">Fri</button>
</div>
<div class="btn-group" role="group">
<button type="button" type="submit" class="btn btn-default dayselect" name="day" value="6">Sat</button>
</div>
<div class="btn-group" role="group">
<button type="button" type="submit" class="btn btn-default dayselect" name="day" value="7">Sun</button>
</div>
</div>
</form>
The following is what I have for the current day's timetable:
<div class="row" id="timetableinfo">
<?php
$date_format = 'N';
$day = date($date_format);
for ($j = 0; $j <= 23; $j++) {
if ($j < 10) {
$time = "0{$j}:00";
} else {
$time = "{$j}:00";
}
$query = $dbh->prepare("SELECT * FROM events WHERE day=:day AND time=:time ORDER BY time ASC");
$query->execute(array(":day"=>$day, ":time"=>$time));
$queryData = $query->fetch(PDO::FETCH_ASSOC);
?>
<div class="col-md-2">
<div class="event-time-wrap">
<div class="event-time">
<p><?php echo $time; ?></p>
<p><?php echo $queryData['host'] ? $queryData['host'] : '-'; ?></p>
<?php
if ($queryData['name'] != "") {
if (filter_var($queryData['hotel'], FILTER_VALIDATE_URL)) {
?>
<a href="#" class="btn btn-gr eventlink">ENTER</a>
<?php
} else {
echo $queryData['name'];
}
}
?>
</div>
</div>
</div>
<?php
}
?>
</div>
The following is what I was using for the JQuery button clicks:
$('button.dayselect').click(function() {
var formData = $(this).attr("value");
$.ajax({
url: 'timetabledata.php',
type:'POST',
data: formData,
success: function(html)
{
$("#timetableinfo").html(html);
}
});
return false;
});
And the following is what I had for the timetabledata PHP file to show the new timetable/day:
<?php
require_once '../panel/includes/config.php';
$day = date($_REQUEST['day'], 'N');
for ($j = 0; $j <= 23; $j++) {
if ($j < 10) {
$time = "0{$j}:00";
} else {
$time = "{$j}:00";
}
$query = $dbh->prepare("SELECT * FROM events WHERE day=:day AND time=:time ORDER BY time ASC");
$query->execute(array(":day"=>$day, ":time"=>$time));
$queryData = $query->fetch(PDO::FETCH_ASSOC);
?>
<div class="col-md-2">
<div class="event-time-wrap">
<div class="event-time">
<p><?php echo $time; ?></p>
<p><?php echo $queryData['host'] ? $queryData['host'] : '-'; ?></p>
<?php
if ($queryData['name'] != "") {
if (filter_var($queryData['hotel'], FILTER_VALIDATE_URL)) {
?>
<a href="#" class="btn btn-gr eventlink">ENTER</a>
<?php
} else {
echo $queryData['name'];
}
}
?>
</div>
</div>
</div>
<?php
}
?>
It is not showing any data, but rather just the 24 blank boxes on each day I click on. When I refresh the page, it goes back to the current day's timetable.
Question Edit
The day value of 1, 2, 3 and so on is not being picked up, so it's not reading time correctly, which is causing blank values during the for loop.
The JQuery being used is the same setup I have on a different using a select dropdown and it works fine.
