Ajax with jQuery

Here is the code we are using for today’s discussion on using jQuery to add Ajax to a website. You can download a copy of everything required to do this project here.

Today’s example utilizes the PHP Calendar object I recently released along with a Javascript library called jQuery. We will generate a calendar that will be able to switch month and years using Ajax.

What is Ajax?

Ajax is a way to call back to the webserver without refreshing the entire page. This is done through Javascript. There is a very lengthy discussion I could have with you about this, but there are better resources out there about how it actually works. All you really need to know is that you can use it to call back to the webserver to do whatever you want to. It can be used to add an item to a shopping cart or update a certain part of the page to streamline a process.

On To The Code

I am going to assume you know how the calendar object works. If not please read the PHP Calendar Instructions Page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<?
// Import the PHP Calendar Object
require_once('object.calendar.php');
if( isset($_REQUEST['action']) ) {
	switch( $_REQUEST['action'] ) {
		case 'ajax_generate': {
			$month = $_REQUEST['month'];
			$year = $_REQUEST['year'];
			$calendar = new Calendar($month, $year);
			$next_month = $calendar->getNextMonthYear();
			$previous_month = $calendar->getPreviousMonthYear();
			$calendar->setNextMonthContent('<a href="javascript:ajaxChangeCalendar('.$next_month['month'].', '.$next_month['year'].')"> > </a>');
			$calendar->setPreviousMonthContent('<a href="javascript:ajaxChangeCalendar('.$previous_month['month'].', '.$previous_month['year'].')"> < </a>');
			$calendar->generate();
			exit();
		} break;
	}
}
?>
<html>
<head>
	<script type="text/javascript" src="jquery.js"></script>
</head>
 
<body>
 
	<div id="calendar_group">
		<?
		$month = 1;
		$year = 2009;
		$calendar = new Calendar($month, $year);
		$next_month = $calendar->getNextMonthYear();
		$previous_month = $calendar->getPreviousMonthYear();
		$calendar->setNextMonthContent('<a href="javascript:ajaxChangeCalendar('.$next_month['month'].', '.$next_month['year'].')"> > </a>');
		$calendar->setPreviousMonthContent('<a href="javascript:ajaxChangeCalendar('.$previous_month['month'].', '.$previous_month['year'].')"> < </a>');
		$calendar->generate();
		?>
	</div>
	<?
	$current_month = $calendar->getCurrentMonthYear();
	?>
	<a href="javascript:ajaxChangeCalendar(<?=$current_month['month']?>, <?=$current_month['year']?>)">Current Month</a>
	<br/><br/>
	<select name="move_to_month" id="move_to_month">
		<?
		for($i=1; $i<=12; $i++) {
			?><option value="<?=$i?>"><?=$i?></option><?
		}
		?>
	</select>
	<select name="move_to_year" id="move_to_year">
		<?
		for($i=1900; $i<=2020; $i++) {
			?><option value="<?=$i?>"><?=$i?></option><?
		}
		?>
	</select>
	<input type="button" value="Go To" onclick="ajaxChangeCalendar( document.getElementById('move_to_month').value, document.getElementById('move_to_year').value )" />
	<script type="text/javascript">
		function ajaxChangeCalendar( month, year ) {
			var redraw = $.ajax({
							type: "POST",
							async: false,
							url: "ajax_calendar.php",
							data: "action=ajax_generate&month=" + month + "&year="+year
						}).responseText;
			$("#calendar_group").html(redraw);
		}
	</script>
</body>
</html>

The first thing I am going to bring your attention to is including the jQuery library on line 22. So as you can see we are generating a calendar on lines 29-36. The Next and Previous Month Content. What we are going to put in there is a link that calls a Javascript function called ajaxChangeCalendar.You will also notice that we call this function on lines 42 and 59. Line 42 moves the calendar to the current month and year, while the button on line 59 uses the values from the dropdown menu to determine where to go.

Now for the meat and potatoes of Ajax, the ajaxChangeCalendar function. You will notice that we are utilizing jQuery’s Ajax functionality. We set the type to Post (It could easily be Get if you wanted to), async is set to false, set the URL and the data that should be put into POST. The $.ajax will do all the work for you. It reaches out and takes the text it received and puts it into the variable redraw.

We then take that text and use replace the HTML in the calendar_group div with the value of redraw.

That seems simple right? It really is. Now let’s talk about how we get the data that goes into redraw. This can be found on lines 4-18. You will notice that it looks exactly the same as the code that generated the calendar initially, except for the fact that the month and possibly year have changed. What is happening is that you are outputting the HTML code that will replace the HTML in the calendar_group div.

Also, notice the exit() being called on line 15. We do not want any more HTML to output after the table. Otherwise you will have the entire page put into the value of redraw and that will in turn redraw the entire page. That would defeat the purpose of Ajax in the first place.

Anyways, I hope this helps to explain how you can use jQuery to put Ajax on your site. This was a very simple example but you can do a whole lot more with Ajax if you put your mind to it. If you have any questions post a comment or submit it in the contact form.

January 31st, 2009 in PHP, Tutorials, jQuery | tags: , , , , | No Comments

Leave a Reply