Update Calander using Ajax == SOLVED

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
User avatar
bradbury
Forum Commoner
Posts: 40
Joined: Wed Aug 25, 2010 11:21 am
Location: Eugene, OR

Update Calander using Ajax == SOLVED

Post by bradbury »

I am currently working on a php calendar that easily implement into my website, which is going well except I cannot seem to get the navigation buttons to work properly with ajax.

Code: Select all

<?php
$month = date('n');
$year = date('Y');
$day = date('j');
$daysInMonth = date("t", mktime(0,0,0, $month,1,$year));
$firstDay = date("w", mktime(0,0,0,$month,1,$year));
$tempDays = $firstDay + $daysInMonth;
$weeksInMonth = ceil($tempDays/7);

if($month==1){
$m="January";
}
elseif($month==2){
$m="February";
}
elseif($month==3){
$m="March";
}
elseif($month==4){
$m="April";
}
elseif($month==5){
$m="May";
}
elseif($month==6){
$m="June";
}
elseif($month==7){
$m="July";
}
elseif($month==8){
$m="August";
}
elseif($month==9){
$m="September";
}
elseif($month==10){
$m="October";
}
elseif($month==11){
$m="November";
}
elseif($month==12){
$m="December";
}


?>
<div id="tcal">
<table class="ctrl"> 
	<tbody>
		<tr>
			<td><a href="" onclick="http.open('get', 'calendar.php); document.getElementById("tcal").innerHTML = http.responseText; "<img src="img/prev_year.gif"> </td>
			<td><img src="img/prev_mon.gif"> </td>
			<th><?php echo $m ?> <?php echo $year ?></th> 
			<td><img src="img/next_mon.gif"></td>
			<td><img src="img/next_year.gif"></td>
		</tr>
	</tbody>
</table>
this is the main coding for the php section (there is a lot more code that deals with the dates and all that business but I decided not to include it since it doesnt pertain to the actual issue at hand.
I have the "next month icon" as an image and onclick I am trying to use the http.open command to update the variable $month by 1 and have the calender display asynchronously update.

<td><a href="" onclick="http.open('get', 'index.php); document.getElementById("tcal").innerHTML = http.responseText; "<img src="img/prev_year.gif"> </td>

What am I doing wrong? and how can I get this to work?
Last edited by bradbury on Thu Aug 26, 2010 1:56 pm, edited 2 times in total.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Update Calander using Ajax

Post by califdon »

Your Ajax coding approach is different than I am accustomed to using, but it looks like it should work, but you seem to be directing the Ajax call to index.php, which I doubt is the script that will return the html code to display in the calendar. Normally you would have a dedicated script that accomplishes that. I'm afraid I'm short on time right now, but you might want to post the code from your server script that produces the html code.
User avatar
bradbury
Forum Commoner
Posts: 40
Joined: Wed Aug 25, 2010 11:21 am
Location: Eugene, OR

Re: Update Calander using Ajax

Post by bradbury »

sorry the coding was wrong. Instead of saying index.php it should be calendar.php and that was the code that includes the ajax call. Is there away to make the http.open call change the variable on click? If not is there another way that I can update the variable without creating another script to just change the variable?
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Update Calander using Ajax

Post by califdon »

bradbury wrote:sorry the coding was wrong. Instead of saying index.php it should be calendar.php and that was the code that includes the ajax call. Is there away to make the http.open call change the variable on click? If not is there another way that I can update the variable without creating another script to just change the variable?
If you are asking "can you use Ajax without having a server script", the answer is No. the whole point of Ajax is to call a script on the server and send data back, rather than sending a new page back.

Your calendar.php script doesn't include the Ajax call. The call to open the script (the Ajax call) is in your main script. calendar.php should do whatever it has to do to assemble the data, including all the html tags, into a string and echo that string back to the calling page in the browser, which then inserts that into the <div>.

Again, if you want help with your calendar.php code, you'll have to show us that code.
User avatar
bradbury
Forum Commoner
Posts: 40
Joined: Wed Aug 25, 2010 11:21 am
Location: Eugene, OR

Re: Update Calander using Ajax

Post by bradbury »

ty for the response and I understand all that I was just wondering if i could pass the variables which I figured out was much easier than what I was trying to do. I decided to use $_SESSION and it worked out fine the only problem is that now when I click the prev_month button I can go back a month and the new page loads but when I try to go back another month page remains static and no month change is made. I will post the new updated code and if anyone has any ideas about how I could get this button to work properly.
cal.php

Code: Select all

<html>
<head><title>Calender Test</title>
	<link rel="stylesheet" href="calendar2.css">
	<script type="text/javascript">
var xmlhttp;
//If, the activexobject is available, we must be using IE.
if (window.ActiveXObject){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
//Else, we can use the native Javascript handler.
xmlhttp = new XMLHttpRequest();
}
function makerequest(serverPage, objID) {
var obj = document.getElementById(objID);
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
</script>
</head>
<body onload="makerequest('current.php','tcal')">
<div id="tcal"></div>
</body>
</html>
CURRENT.php

Code: Select all

<?php
	session_start();
	$_SESSION['month'] = date('n');
	$year = date('Y');
	$day = date('j');
	$daysInMonth = date("t", mktime(0,0,0, $month,1,$year));
	$firstDay = date("w", mktime(0,0,0,$month,1,$year));
	$tempDays = $firstDay + $daysInMonth;
	$weeksInMonth = ceil($tempDays/7);

if($_SESSION['month']==1){
$m="January";
}
elseif($_SESSION['month']==2){
$m="February";
}
elseif($_SESSION['month']==3){
$m="March";
}
elseif($_SESSION['month']==4){
$m="April";
}
elseif($_SESSION['month']==5){
$m="May";
}
elseif($_SESSION['month']==6){
$m="June";
}
elseif($_SESSION['month']==7){
$m="July";
}
elseif($_SESSION['month']==8){
$m="August";
}
elseif($_SESSION['month']==9){
$m="September";
}
elseif($_SESSION['month']==10){
$m="October";
}
elseif($_SESSION['month']==11){
$m="November";
}
elseif($_SESSION['month']==12){
$m="December";
}


?>

<table class="ctrl"> 
	<tbody>
		<tr>
			<td><a href="prev_month.php" onclick="makerequest('prev_month.php','tcal'); return false;"<img src="img/prev_year.gif"> </td>
			<td><img src="img/prev_mon.gif"> </td>
			<th id="menu"><?php echo $m; ?></th>
			<td><img src="img/next_mon.gif"></td>
			<td><img src="img/next_year.gif"></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr class="wd">
			<th>Su</th>
			<th>Mo</th>
			<th>Tu</th>
			<th>We</th>
			<th>Th</th>
			<th>Fr</th>
			<th>Sa</th>
		</tr>
		<tr>
			<?php
			if($firstDay==0) {			
				for($i=1; $i <= $daysInMonth;){
					if($i==$day) {
						echo "<td class=\"today\">" . $i . "</td>";
						$i++;
					}
					if($i==7 || $i==14 || $i==21 || $i==28) {
						echo "<td class=\"weekend\">" . $i . "</td>";
						echo "</tr>";
						$i++;
					}
					if($i==1 || $i==8 || $i==15 || $i==22 || $i==29) {
						echo "<tr>";
						echo "<td class=\"weekend\">" . $i . "</td>";
						$i++;
					}
					echo "<td>" . $i . "</td>";
					$i++;
				}
			}
			elseif($firstDay==1) {
				echo "<td></td>";
				for($i=1; $i <= $daysInMonth;){
					if($i==$day) {
						echo "<td class=\"today\">" . $i . "</td>";
						$i++;
					}
					if($i==6 || $i==13 || $i==20 || $i==27) {
						echo "<td class=\"weekend\">" . $i . "</td>";
						echo "</tr>";
						$i++;
					}
					if($i==7 || $i==14 || $i==21|| $i==28) {
						echo "<tr>";
						echo "<td class=\"weekend\">" . $i . "</td>";
						$i++;
					}
					if($i > $daysInMonth) {
						exit();
					}
					echo "<td>" . $i . "</td>";
					$i++;
				}
			}
			elseif($firstDay==2) {
				echo "<td></td>";
				echo "<td></td>";
				for($i=1; $i <= $daysInMonth;){
					if($i==$day) {
						echo "<td class=\"today\">" . $i . "</td>";
						$i++;
					}
					if($i==5 || $i==12 || $i== 19 || $i==26) {
						echo "<td class=\"weekend\">" . $i . "</td>";
						echo "</tr>";
						$i++;
					}
					if($i==6 || $i==13 || $i==20 || $i==27) {
						echo "<tr>";
						echo "<td class=\"weekend\">" . $i . "</td>";
						$i++;
					}
					if($i >= $daysInMonth) {
						exit();
					}
					echo "<td>" . $i . "</td>";
					$i++;
				}
			}
			elseif($firstDay==3) {
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				for($i=1; $i <= $daysInMonth;){
					if($i==$day) {
						echo "<td class=\"today\">" . $i . "</td>";
						$i++;
					}
				if($i==4 || $i==11 || $i==18 || $i==25) {
					echo "<td class=\"weekend\">" . $i . "</td>";
					echo "</tr>";
					$i++;
				}
				if($i==5 || $i==12 || $i==19 || $i==26) {
					echo "<tr>";
					echo "<td class=\"weekend\">" . $i . "</td>";
					$i++;
				}
				echo "<td>" . $i . "</td>";
					$i++;
				}
			}
			elseif($firstDay==4) {
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				for($i=1; $i <= $daysInMonth;){
					if($i==$day) {
						echo "<td class=\"today\">" . $i . "</td>";
						$i++;
					}
					if($i==3 || $i==10 || $i==17 || $i==24 || $i==31) {
						echo "<td class=\"weekend\">" . $i . "</td>";
						echo "</tr>";
						$i++;
					}
					if($i==4 || $i==11 || $i==18|| $i==25) {
						echo "<tr>";
						echo "<td class=\"weekend\">" . $i . "</td>";
						$i++;
					}
					if($i >= $daysInMonth) {
						exit();
					}
					echo "<td>" . $i . "</td>";
					$i++;
				}
			}
			elseif($firstDay==5) {
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				for($i=1; $i <= $daysInMonth;){
					if($i==$day) {
						echo "<td class=\"today\">" . $i . "</td>";
						$i++;
					}
					if($i==2 || $i==9 || $i==16 || $i==23 || $i==30) {
						echo "<td class=\"weekend\">" . $i . "</td>";
						echo "</tr>";
						$i++;
					}
					if($i==3 || $i==10 || $i==17 || $i==24 || $i==31) {
						echo "<tr>";
						echo "<td class=\"weekend\">" . $i . "</td>";
						$i++;
					}
					if($i >= 32){
						echo "<td>";
						echo "</td>";
						exit();
					}
					echo "<td>" . $i . "</td>";
					$i++;
				}
			}
			elseif($firstDay==6) {
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				for($i=1; $i <= $daysInMonth;){
					if($i==$day) {
						echo "<td class=\"today\">" . $i . "</td>";
						$i++;
					}
					if($i==1 || $i==8 || $i==15 || $i==22 || $i==29) {
						echo "<td class=\"weekend\">" . $i . "</td>";
						echo "</tr>";
						$i++;
					}
					if($i==2 || $i==9 || $i==16 || $i==23 || $i==30) {
						echo "<tr>";
						echo "<td class=\"weekend\">" . $i . "</td>";
						$i++;
					}
					echo "<td>" . $i . "</td>";
					$i++;
				} 
			}
?>
	</tbody>
</table>
prev_month.php

Code: Select all

<?php
session_start();
$month = $_SESSION['month'];
$_SESSION['month'] = $month--;
$year = date('Y');
$day = date('j');
$daysInMonth = date("t", mktime(0,0,0, $month,1,$year));
$firstDay = date("w", mktime(0,0,0,$month,1,$year));
$tempDays = $firstDay + $daysInMonth;
$weeksInMonth = ceil($tempDays/7);

if($month==1){
$m="January";
}
elseif($month==2){
$m="February";
}
elseif($month==3){
$m="March";
}
elseif($month==4){
$m="April";
}
elseif($month==5){
$m="May";
}
elseif($month==6){
$m="June";
}
elseif($month==7){
$m="July";
}
elseif($month==8){
$m="August";
}
elseif($month==9){
$m="September";
}
elseif($month==10){
$m="October";
}
elseif($month==11){
$m="November";
}
elseif($month==12){
$m="December";
}


?>
<div id="tcal">
<table class="ctrl"> 
	<tbody>
		<tr>
			<td><a href="" onclick="makerequest('prev_month.php','tcal'); return false;"<img src="img/prev_year.gif"> </td>
			<td><img src="img/prev_mon.gif"> </td>
			<th id="menu"><?php echo $m; ?></th>
			<td><img src="img/next_mon.gif"></td>
			<td><img src="img/next_year.gif"></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr class="wd">
			<th>Su</th>
			<th>Mo</th>
			<th>Tu</th>
			<th>We</th>
			<th>Th</th>
			<th>Fr</th>
			<th>Sa</th>
		</tr>
		<tr>
			<?php
			if($firstDay==0) {			
				for($i=1; $i <= $daysInMonth;){
					if($i==$day) {
						echo "<td class=\"today\">" . $i . "</td>";
						$i++;
					}
					if($i==7 || $i==14 || $i==21 || $i==28) {
						echo "<td class=\"weekend\">" . $i . "</td>";
						echo "</tr>";
						$i++;
					}
					if($i==1 || $i==8 || $i==15 || $i==22 || $i==29) {
						echo "<tr>";
						echo "<td class=\"weekend\">" . $i . "</td>";
						$i++;
					}
					echo "<td>" . $i . "</td>";
					$i++;
				}
			}
			elseif($firstDay==1) {
				echo "<td></td>";
				for($i=1; $i <= $daysInMonth;){
					if($i==$day) {
						echo "<td class=\"today\">" . $i . "</td>";
						$i++;
					}
					if($i==6 || $i==13 || $i==20 || $i==27) {
						echo "<td class=\"weekend\">" . $i . "</td>";
						echo "</tr>";
						$i++;
					}
					if($i==7 || $i==14 || $i==21|| $i==28) {
						echo "<tr>";
						echo "<td class=\"weekend\">" . $i . "</td>";
						$i++;
					}
					if($i > $daysInMonth) {
						exit();
					}
					echo "<td>" . $i . "</td>";
					$i++;
				}
			}
			elseif($firstDay==2) {
				echo "<td></td>";
				echo "<td></td>";
				for($i=1; $i <= $daysInMonth;){
					if($i==$day) {
						echo "<td class=\"today\">" . $i . "</td>";
						$i++;
					}
					if($i==5 || $i==12 || $i== 19 || $i==26) {
						echo "<td class=\"weekend\">" . $i . "</td>";
						echo "</tr>";
						$i++;
					}
					if($i==6 || $i==13 || $i==20 || $i==27) {
						echo "<tr>";
						echo "<td class=\"weekend\">" . $i . "</td>";
						$i++;
					}
					if($i >= $daysInMonth) {
						exit();
					}
					echo "<td>" . $i . "</td>";
					$i++;
				}
			}
			elseif($firstDay==3) {
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				for($i=1; $i <= $daysInMonth;){
					if($i==$day) {
						echo "<td class=\"today\">" . $i . "</td>";
						$i++;
					}
				if($i==4 || $i==11 || $i==18 || $i==25) {
					echo "<td class=\"weekend\">" . $i . "</td>";
					echo "</tr>";
					$i++;
				}
				if($i==5 || $i==12 || $i==19 || $i==26) {
					echo "<tr>";
					echo "<td class=\"weekend\">" . $i . "</td>";
					$i++;
				}
				echo "<td>" . $i . "</td>";
					$i++;
				}
			}
			elseif($firstDay==4) {
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				for($i=1; $i <= $daysInMonth;){
					if($i==$day) {
						echo "<td class=\"today\">" . $i . "</td>";
						$i++;
					}
					if($i==3 || $i==10 || $i==17 || $i==24 || $i==31) {
						echo "<td class=\"weekend\">" . $i . "</td>";
						echo "</tr>";
						$i++;
					}
					if($i==4 || $i==11 || $i==18|| $i==25) {
						echo "<tr>";
						echo "<td class=\"weekend\">" . $i . "</td>";
						$i++;
					}
					if($i >= $daysInMonth) {
						exit();
					}
					echo "<td>" . $i . "</td>";
					$i++;
				}
			}
			elseif($firstDay==5) {
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				for($i=1; $i <= $daysInMonth;){
					if($i==$day) {
						echo "<td class=\"today\">" . $i . "</td>";
						$i++;
					}
					if($i==2 || $i==9 || $i==16 || $i==23 || $i==30) {
						echo "<td class=\"weekend\">" . $i . "</td>";
						echo "</tr>";
						$i++;
					}
					if($i==3 || $i==10 || $i==17 || $i==24 || $i==31) {
						echo "<tr>";
						echo "<td class=\"weekend\">" . $i . "</td>";
						$i++;
					}
					if($i >= 32){
						echo "<td>";
						echo "</td>";
						exit();
					}
					echo "<td>" . $i . "</td>";
					$i++;
				}
			}
			elseif($firstDay==6) {
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				echo "<td></td>";
				for($i=1; $i <= $daysInMonth;){
					if($i==$day) {
						echo "<td class=\"today\">" . $i . "</td>";
						$i++;
					}
					if($i==1 || $i==8 || $i==15 || $i==22 || $i==29) {
						echo "<td class=\"weekend\">" . $i . "</td>";
						echo "</tr>";
						$i++;
					}
					if($i==2 || $i==9 || $i==16 || $i==23 || $i==30) {
						echo "<tr>";
						echo "<td class=\"weekend\">" . $i . "</td>";
						$i++;
					}
					echo "<td>" . $i . "</td>";
					$i++;
				} 
			}
?>
	</tbody>
</table>
User avatar
bradbury
Forum Commoner
Posts: 40
Joined: Wed Aug 25, 2010 11:21 am
Location: Eugene, OR

Re: Update Calander using Ajax

Post by bradbury »

Nevermind I have Solved the problem :D
Ty califdon for the help
Post Reply