Page 1 of 1

Update Calander using Ajax == SOLVED

Posted: Wed Aug 25, 2010 1:27 pm
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?

Re: Update Calander using Ajax

Posted: Wed Aug 25, 2010 2:23 pm
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.

Re: Update Calander using Ajax

Posted: Wed Aug 25, 2010 2:30 pm
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?

Re: Update Calander using Ajax

Posted: Wed Aug 25, 2010 8:49 pm
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.

Re: Update Calander using Ajax

Posted: Thu Aug 26, 2010 1:05 pm
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>

Re: Update Calander using Ajax

Posted: Thu Aug 26, 2010 1:55 pm
by bradbury
Nevermind I have Solved the problem :D
Ty califdon for the help