Ajax with Graceful Degradation

Strider64 · October 24, 2014, 12:13pm

I decided to put this here instead of the Ajax/JavaScript Category, for I feel the problem lies more in PHP. Anyways, I have developed a online calendar that works pretty darn good and would like to add Ajax to the mix. This way the page doesn’t have to refresh to see the next month. However, I also want it so that if someone disables JavaScript that it will still work, hence the Graceful Degradation. If I can solve this for the Calendar then I will be able to implement this to other PHP applications.

Some of the code might be hard to understand that I show, but what I am mainly concerned about is the PHP-Ajax-JQuery (JavaScript) portion.

In the main page (index.php) I have this:
[php]/* This makes sures that the input is a number */
$page = filter_input(INPUT_GET, ‘page’, FILTER_VALIDATE_INT);
if (!$page) {
$page = 0;
}

//$page = filter_input(INPUT_POST, ‘page’, FILTER_VALIDATE_INT);
$setMonth = new CalendarControls($page);
$currentMonth = $setMonth->returnDate;

if ($user) {
$userName = $user->username;
} else {
$userName = NULL;
}

$month = new MyCalendar($currentMonth, $userName);
[/php]

and this
[php]

<?php echo $month->outputForm; ?>

<?php echo $setMonth->returnControls; ?>

[/php]
In a Class I have this form my controls:
[php]<?php

class CalendarControls extends MyCalendar {

public $returnDate;
public $displayControls;
public $returnControls;
protected static $todaysDate;
protected static $page;
protected static $varPage;
protected static $next;
protected static $previous;

public function __Construct($page) {
$this->returnDate = $this->todaysDate($page);
$this->returnControls = $this->calButtons();
}

protected function todaysDate($page) {

self::$todaysDate = date('F Y'); // Today's Month && Year:
self::$page = isset($page) ? $page : NULL;

self::$varPage = isset(self::$page) ? self::$page : 0;

self::$previous = isset(self::$page) ? self::$page - 1 : -1;
self::$next = isset(self::$page) ? self::$page + 1 : 1;

return $_SESSION['calendarDay'] = parent::currentMonthPosition(self::$todaysDate, self::$varPage);

}

protected function calButtons() {
$this->displayControls = ‘

’ . PHP_EOL;
$this->displayControls .= ’ ’ . PHP_EOL;
$this->displayControls .= ’ ’ . PHP_EOL;
$this->displayControls .= ‘

’ . PHP_EOL;

return $this->displayControls;

}

}[/php]

The only reason I’m showing this is that this is how it changes using straight PHP using the anchor tag.

Here’s my jQuery (JavaScript) file:
[php]$(function() {
var $forward = $(’.pic-slide-right’),
$reverse = $(’.pic-slide-left’),
page = 0;

$forward.on(‘click’, function(e) {
e.preventDefault();
page += 1;

var params = { page : page }; // set parameters:
var sendPage = jQuery.param( params ); // Set parameters to object format:

savePage(sendPage);

});

$reverse.on(‘click’, function(e) {
e.preventDefault();
page -= 1;

var params = { page : page }; // set parameters:
var sendPage = jQuery.param( params ); // Set parameters to object format:
savePage(sendPage);

});

$page = filter_input(INPUT_POST, ‘page’, FILTER_SANITIZE_SPECIAL_CHARS);

$setMonth = new CalendarControls($page);
$currentMonth = $setMonth->returnDate;

echo $currentMonth;[/php]
I have no problem sending the JQuery variable to PHP via Ajax when it is in a separate php file; however, when I try to send it to the index.php file it doesn’t work as expected. I know the problem is that PHP since it’s server-side loads before the client-side JQuery, but I know there has to be a way to have JavaScript with Graceful Degradation also. I’m at wits end trying to figure this out :-\ Any help will be greatly appreciated.

Thanks John

Strider64 · October 24, 2014, 8:18pm

Well after a few hours of brainstorming I finally figured it out.

Here’s the solution (I haven’t optimize the code yet) in case anyone wonders on how to do it:

index.php
[php]/* This makes sures that the input is a number */
$page = filter_input(INPUT_GET, ‘page’, FILTER_VALIDATE_INT);
if (!$page) {
$page = 0;
}

$setMonth = new CalendarControls($page);
$currentMonth = $setMonth->returnDate;

if ($user) {
$userName = $user->username;
} else {
$userName = NULL;
}

$month = new MyCalendar($currentMonth, $userName);
$displayMonth = $month->outputForm;[/php]

still the index.php
[php]

<?php echo $displayMonth; ?>

<?php echo $setMonth->returnControls; ?>

[/php]

calendarControlsJS.js file
[php]$(function() {
var $forward = $(’.pic-slide-right’),
$reverse = $(’.pic-slide-left’),
page = 0,
$displayCalendar = ‘

’,
$controls = $(’.controlBox’);

$(’.phpCalendar’).remove(); // Remove PHP Calendar:

$controls.before($displayCalendar);

sendPage(0); // Show Current Month:

$forward.on(‘click’, function(e) {
e.preventDefault();
page += 1; // Increase page for future month(s):
sendPage(page);
});

$reverse.on(‘click’, function(e) {
e.preventDefault();
page -= 1; // Decrease page for previous month(s):
sendPage(page);
});

function sendPage(sendPage) {
$.ajax({
type:“get”,
url:“currentMonth.php”,
data: { page: sendPage },
success:function(info) {
$(’.jQueryCalendar’).html(info);

  }
});

}
}); // End of Doc Ready Function:
[/php]

currentMonth.php file
[php]<?php
require ‘lib/includes/utilities.inc.php’;
if ($user) {
$userName = $user->username;
} else {
$userName = NULL;
}
$page = filter_input(INPUT_GET, ‘page’, FILTER_SANITIZE_SPECIAL_CHARS);

$setMonth = new CalendarControls($page);
$currentMonth = $setMonth->returnDate;

$month = new MyCalendar($currentMonth, $userName);
$displayMonth = $month->outputForm;

echo $displayMonth;[/php]

Right now it isn’t the most elegant, but it works. I will be sprucing it up over the next couple of days. An that is how you have it where it will work with or without JQuery (JavaScript). ;D