I want to create a calendar with php which can be scrolled on the server side. Yesterday I received a good advice on how to implement this with Ajax (my attempts failed). While the answer looks very promising and correct, I do not get it to work. Possibly it is something as simple as a wrong path, but my tries around paths did not work out. And unfortunately, I have no idea how to debug this.
Problem is, clicking the button to update the data (scroll the calendar) does not provide any reaction. However, the initial calendar view is rendered.
file structure:
index.php
booking1.php
presentation (folder)
booking2.php
cal.php
home.php
The client side code as shown in Safari (at the end of the upper section you will find the button for calendar scrolling and at the button the respective script)
<span id="calendar">
<section class="container">
<div class="row">
<div class="col">
<div class="card">
<div class="card_body">
<div class="calendar_month">
<span class="calendar_month_title">
<button onclick="prevMonth()">< Sep</button>
Oct
</span>
// ....
</section>
<script scr="assets/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
var defaultMonth = 10;
var defaultYear = 2021;
var currentMonth = defaultMonth;
var currentYear = defaultYear;
function updateCal() {
$('#calendar').load('presentation/cal.php?month=' currentMonth '&year=' currentYear);
}
function nextMonth() {
currentMonth = 1;
if (currentMonth == 13) {
currentMonth = 1;
currentYear = 1;
}
updateCal();
}
function prevMonth() {
currentMonth -= 1;
if (currentMonth == 0) {
currentMonth = 12;
currentYear -= 1;
}
updateCal();
}
</script>
</body>This is the presentation/cal.php file
<?php
$defaultMonth = date("m");
$defaultYear = date("Y");
$month = isset($_GET['month']) ? $_GET['month'] : $defaultMonth;
if (strlen($month) === 1 ) {
$month = '$month' . strval($month);
}
$year = isset($_GET['year']) ? $_GET['year'] : $defaultYear;
$requestedDate = new DateTime(strval($year) . '-' . strval($month) . '-01');
echo '<section >';
echo '<div >';
echo '<div class = "col">';
echo '<div class = "card"><div >';
getCalendar($requestedDate, true, true, false);
echo '</div></div>';
echo '</div>';
echo '</section>';
The booking1.php from the home directory (the calendar.php hosts the getCalendar() function)
<?php
define('HOME_DIR',__DIR__);
require_once __DIR__.'/calendar/calendar.php';
include __DIR__.'/presentation/header.php';
include __DIR__.'/presentation/booking.php';
And presentation/booking2.php
<section class="container" id="tbd">
<?php
echo '<span id="calendar">';
include __DIR__.'/cal.php';
echo '</span>';
?>
</section>
<script scr="assets/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
var defaultMonth = <?php echo date("n") ?>;
var defaultYear = <?php echo date("Y") ?>;
var currentMonth = defaultMonth;
var currentYear = defaultYear;
function updateCal() {
$('#calendar').load('presentation/cal.php?month=' currentMonth '&year=' currentYear);
}
function nextMonth() {
currentMonth = 1;
if(currentMonth == 13) {
currentMonth = 1;
currentYear = 1;
}
updateCal();
}
function prevMonth() {
currentMonth -= 1;
if(currentMonth == 0) {
currentMonth = 12;
currentYear -= 1;
}
updateCal();
}
</script>
</body>
Any idea, why the button click provides no reaction? And how would I debug this? This is actually only a small, private side project, and I haven't managed to get Eclipse working with MySQL in such way that I can use Eclipse for debugging. This is why I print variables etc for debugging reasons. But if the page has been successfully rendered and only updating a section fails, this method no longer works (on my level of (non-)expertise)
CodePudding user response：
You should use your browser for debugging. In Chrome/Firefox (haven't used Safari), right click and Inspect. Then the Console tab will show any javascript error, and you can also do console.log() from your code to debug any variables, and the Network tab will show you the requests, so you can see if the ajax request is being executed, if it throws error, or what is the data sent and the data recieved.
I would also suggest rewriting code from scratch if possible and improve architecture.
Also:
- From
presentation/booking2.php, you are doing.load('presentation/cal.php')but not sure if you need to put the directory here since you're already inside it, because it might try to go topresentation/presentation/cal.php, but again, this you'll see with Browser developer tools in Console and Network - Don't use a
span, but adiv, for the container, it's better use of html tags - Make sure you're only generating the calendar from one place so you don't repeat code and end up with weird things, I mean, if you have a function that will return your calendar code, you should use that function both the first time when rendering the html, and also in the ajax calls, or better yet, always load the calendar by ajax
- I would recommend writing from scratch a simple page that behaves as you wish, where you properly achieve the effect of loading a block from ajax, and "navigating" it using buttons, then when that works, you can migrate the rest of the code into it and test it step by step in case something breaks so you know when/what caused it and be able to go back and rectify
Example of loading the calendar initially by ajax
Check https://learn.jquery.com/using-jquery-core/document-ready/
Note: You're using a quite old version of jQuery but anyways the example should work.
At the end of your <script> tag, add:
<script>
//...
$( document ).ready(function() {
console.log( "loading initial calendar" );
updateCal();
});
//...
</script>