473,387 Members | 1,624 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > ajax calendar -- help

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Ajax calendar -- help

cassbiz
202 100+
I downloaded this calendar off the web and am trying have it show twice, once as calendar.php and the second time as calendar1.php

I need the visitor to be able to select a beginning date and an ending date. Here is the primary page that I have

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Your Title</title>
  6. <link rel="stylesheet" type="text/css" href="calendar_style.css">
  7. <script type="text/javascript">
  8. var req;
  9.  
  10. function navigate(month,year) {
  11.         var url = "calendar.php?month="+month+"&year="+year;
  12.         if(window.XMLHttpRequest) {
  13.                 req = new XMLHttpRequest();
  14.         } else if(window.ActiveXObject) {
  15.                 req = new ActiveXObject("Microsoft.XMLHTTP");
  16.         }
  17.         req.open("GET", url, true);
  18.         req.onreadystatechange = callback;
  19.         req.send(null);
  20. }
  21.  
  22. function callback() {
  23.         if(req.readyState == 4) {
  24.                 if(req.status == 200) {
  25.                         response = req.responseText;
  26.                         document.getElementById("calendar").innerHTML = response;
  27.                 } else {
  28.                         alert("There was a problem retrieving the data:\n" + req.statusText);
  29.                 }
  30.         }
  31. }
  32. </script>
  33. <script type="text/javascript">
  34. var req;
  35.  
  36. function navigate1(month,year) {
  37.         var url = "calendar1.php?month="+month+"&year="+year;
  38.         if(window.XMLHttpRequest) {
  39.                 req = new XMLHttpRequest();
  40.         } else if(window.ActiveXObject) {
  41.                 req = new ActiveXObject("Microsoft.XMLHTTP");
  42.         }
  43.         req.open("GET", url, true);
  44.         req.onreadystatechange = callback;
  45.         req.send(null);
  46. }
  47.  
  48. function callback1() {
  49.         if(req.readyState == 4) {
  50.                 if(req.status == 200) {
  51.                         response = req.responseText;
  52.                         document.getElementById("calendar1").innerHTML = response;
  53.                 } else {
  54.                         alert("There was a problem retrieving the data:\n" + req.statusText);
  55.                 }
  56.         }
  57. }
  58. </script>
  59. <script type="text/javascript">
  60. function init()
  61.  
  62. {
  63. navigate("","");
  64. navigate1("","");
  65. }
  66. //-->
  67. </script>
  68. </head>
  69. <body onLoad="init()">
  70. <div id="calendar" style="margin-top: 20px;margin-bottom: 20px"></div>
  71.  
  72. </body>
  73. </html>
  74.  
And here is the AJAX Calendar

Expand|Select|Wrap|Line Numbers
  1. <?
  2.  
  3. $output = '';
  4.  
  5. if($_GET[month] == '' && $$_GET[year] == '') { 
  6.     $time = time();
  7.     $month = date('n',$time);
  8.     $year = date('Y',$time);
  9. }
  10.  
  11. $date = getdate(mktime(0,0,0,$month,1,$year));
  12. $today = getdate();
  13. $hours = $today[hours];
  14. $mins = $today[minutes];
  15. $secs = $today[seconds];
  16.  
  17. if(strlen($hours)<2) $hours="0".$hours;
  18. if(strlen($mins)<2) $mins="0".$mins;
  19. if(strlen($secs)<2) $secs="0".$secs;
  20.  
  21. $days=date("t",mktime(0,0,0,$month,1,$year));
  22. $start = $date[wday]+1;
  23. $name = $date[month];
  24. $year2 = $date[year];
  25. $offset = $days + $start - 1;
  26.  
  27. if($month==12) { 
  28.     $next=1; 
  29.     $nexty=$year + 1; 
  30. } else { 
  31.     $next=$month + 1; 
  32.     $nexty=$year; 
  33. }
  34.  
  35. if($month==1) { 
  36.     $prev=12; 
  37.     $prevy=$year - 1; 
  38. } else { 
  39.     $prev=$month - 1; 
  40.     $prevy=$year; 
  41. }
  42.  
  43. if($offset <= 28) $weeks=28; 
  44. elseif($offset > 35) $weeks = 42; 
  45. else $weeks = 35; 
  46.  
  47. $output = "<table class='daytable' cellpadding='3' cellspacing='1' align='center'>
  48. <tr>
  49.     <td colspan='7'>
  50.         <table border='0' width='100%'>
  51.         <tr>
  52.             <td valign='middle'>
  53.                 <a href='javascript:navigate($prev,$prevy)'><img src='left.gif' border='0'></a><a href='javascript:navigate(\"\",\"\")'><img src='center.gif' hspace='3' border='0'></a><a href='javascript:navigate($next,$nexty)'><img src='right.gif' border='0'></a>
  54.             </td>
  55.             <td align='right'>
  56.                 <div id='heading'>$name $year2</div>
  57.             </td>
  58.         </tr>
  59.         </table>
  60.     </td>
  61. </tr>
  62. <tr>
  63.     <td class='dayhead'>Sun</td>
  64.     <td class='dayhead'>Mon</td>
  65.     <td class='dayhead'>Tue</td>
  66.     <td class='dayhead'>Wed</td>
  67.     <td class='dayhead'>Thu</td>
  68.     <td class='dayhead'>Fri</td>
  69.     <td class='dayhead'>Sat</td>
  70. </tr>";
  71.  
  72. $col=1;
  73. $cur=1;
  74. $next=0;
  75.  
  76. for($i=1;$i<=$weeks;$i++) { 
  77.     if($next==3) $next=0;
  78.     if($col==1) $output.="<tr class='dayrow'>"; 
  79.  
  80.     $output.="<td valign='top' class='days' onMouseOver=\"this.style.backgroundColor='#EEEEEE'\" onMouseOut=\"this.style.backgroundColor='#FFFFFF'\">";
  81.  
  82.     if($i <= ($days+($start-1)) && $i >= $start) {
  83.         $output.="<div";
  84.  
  85.         if(($cur==$today[mday]) && ($name==$today[month])) $output.=" style='color:#FF0000'";
  86.         $output.="><b>$cur</b>";
  87.  
  88.         $output.="</div></td>";
  89.         $cur++; 
  90.         $col++; 
  91.     } else { 
  92.         $output.="&nbsp;</td>"; 
  93.         $col++; 
  94.     }  
  95.  
  96.     if($col==8) { 
  97.         $output.="</tr>"; 
  98.         $col=1; 
  99.     }
  100. }
  101.  
  102. $output.="</table>";
  103.  
  104. echo $output;
  105.  
  106. ?>
  107.  
All I did is name calendar.php to calendar1.php and copied and changed the function.

somehow or another I am lost in what I did and appreciate any help to get both calendars to display at the same time and they will both have different outputs.
An arrival time and a departure time.

Thanks in Advance
Jan 2 '07 #1
12 3383
cassbiz
202 100+
the page is located at http://www.reserveitnow.us/calendar1/ajax_calendar.php
Jan 2 '07 #2
b1randon
171 Expert 100+
the page is located at http://www.reserveitnow.us/calendar1/ajax_calendar.php
Using more than 1 XMLRequest is a drag. To be compatible all around you need to do only
Jan 2 '07 #3
b1randon
171 Expert 100+
the page is located at http://www.reserveitnow.us/calendar1/ajax_calendar.php
Using more than 1 XMLRequest is a drag. To be compatible all around you need to do only 1 request per request object then destroy the old one and make a new. It is stupid, I know, but that's where ajax is at. So it looks like you have only 1 request object ("var req"); That can be the source of your problem. You'll need req1 and req2. Also, be sure you call the constructor every time you're going to send a new request. Good luck!
Jan 2 '07 #4
cassbiz
202 100+
I changed the var req; to var req1; and still no changes in the functionality.

Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript'>
  2. var req;
  3.  
  4. function navigate(month,year) {
  5.         var url = "calendar.php?month="+month+"&year="+year;
  6.         if(window.XMLHttpRequest) {
  7.                 req = new XMLHttpRequest();
  8.         } else if(window.ActiveXObject) {
  9.                 req = new ActiveXObject("Microsoft.XMLHTTP");
  10.         }
  11.         req.open("GET", url, true);
  12.         req.onreadystatechange = callback;
  13.         req.send(null);
  14. }
  15.  
  16. function callback() {
  17.         if(req.readyState == 4) {
  18.                 if(req.status == 200) {
  19.                         response = req.responseText;
  20.                         document.getElementById("calendar").innerHTML = response;
  21.                 } else {
  22.                         alert("There was a problem retrieving the data:\n" + req.statusText);
  23.                 }
  24.         }
  25. }
  26. </script>
  27. <script type='text/javascript'>
  28. var req1;
  29.  
  30. function navigate1(month,year) {
  31.         var url = "calendar1.php?month="+month+"&year="+year;
  32.         if(window.XMLHttpRequest) {
  33.                 req1 = new XMLHttpRequest();
  34.         } else if(window.ActiveXObject) {
  35.                 req 1= new ActiveXObject("Microsoft.XMLHTTP");
  36.         }
  37.         req1.open("GET", url, true);
  38.         req1.onreadystatechange = callback;
  39.         req1.send(null);
  40. }
  41.  
  42. function callback1() {
  43.         if(req1.readyState == 4) {
  44.                 if(req1.status == 200) {
  45.                         response = req1.responseText;
  46.                         document.getElementById("calendar1").innerHTML = response;
  47.                 } else {
  48.                         alert("There was a problem retrieving the data:\n" + req1.statusText);
  49.                 }
  50.         }
  51. }
  52. </script>
  53. <script type="text/javascript">
  54. function init()
  55.  
  56. {
  57. navigate("","");
  58. navigate1("","");
  59. }
  60. //-->
  61. </script>
  62. </head>
  63. <body onLoad="init()">
  64.  

It isn't even opening a second instance of the calendar. That is also one of the problems
Jan 2 '07 #5
b1randon
171 Expert 100+
I changed the var req; to var req1; and still no changes in the functionality.

Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript'>
  2. var req;
  3.  
  4. function navigate(month,year) {
  5.         var url = "calendar.php?month="+month+"&year="+year;
  6.         if(window.XMLHttpRequest) {
  7.                 req = new XMLHttpRequest();
  8.         } else if(window.ActiveXObject) {
  9.                 req = new ActiveXObject("Microsoft.XMLHTTP");
  10.         }
  11.         req.open("GET", url, true);
  12.         req.onreadystatechange = callback;
  13.         req.send(null);
  14. }
  15.  
  16. function callback() {
  17.         if(req.readyState == 4) {
  18.                 if(req.status == 200) {
  19.                         response = req.responseText;
  20.                         document.getElementById("calendar").innerHTML = response;
  21.                 } else {
  22.                         alert("There was a problem retrieving the data:\n" + req.statusText);
  23.                 }
  24.         }
  25. }
  26. </script>
  27. <script type='text/javascript'>
  28. var req1;
  29.  
  30. function navigate1(month,year) {
  31.         var url = "calendar1.php?month="+month+"&year="+year;
  32.         if(window.XMLHttpRequest) {
  33.                 req1 = new XMLHttpRequest();
  34.         } else if(window.ActiveXObject) {
  35.                 req 1= new ActiveXObject("Microsoft.XMLHTTP");
  36.         }
  37.         req1.open("GET", url, true);
  38.         req1.onreadystatechange = callback;
  39.         req1.send(null);
  40. }
  41.  
  42. function callback1() {
  43.         if(req1.readyState == 4) {
  44.                 if(req1.status == 200) {
  45.                         response = req1.responseText;
  46.                         document.getElementById("calendar1").innerHTML = response;
  47.                 } else {
  48.                         alert("There was a problem retrieving the data:\n" + req1.statusText);
  49.                 }
  50.         }
  51. }
  52. </script>
  53. <script type="text/javascript">
  54. function init()
  55.  
  56. {
  57. navigate("","");
  58. navigate1("","");
  59. }
  60. //-->
  61. </script>
  62. </head>
  63. <body onLoad="init()">
  64.  

It isn't even opening a second instance of the calendar. That is also one of the problems
I always end up doing something like this to be sure my ajax is wired right:
Expand|Select|Wrap|Line Numbers
  1. function callback1() {
  2.         if(req1.readyState == 4) {
  3.                 alert("got a response");
  4.                 if(req1.status == 200) {
  5.                         response = req1.responseText;
  6.                         alert ("response was: " + response.Text);
  7.                         document.getElementById("calendar1").innerHTML = response;
  8.                 } else {
  9.                         alert("There was a problem retrieving the data:\n" + req1.statusText);
  10.                 }
  11.         }
  12. }
  13.  
See if you are getting those alert messages back properly. I don't have access to php right now or I'd fire it up and see what was going on first hand.
Jan 3 '07 #6
ronverdonk
4,258 Expert 4TB
In your first post you had the following code (part of it)[php]function callback1() {
if(req.readyState == 4) {
if(req.status == 200) {
response = req.responseText;
document.getElementById("calendar1").innerHTML = response;
} else {
alert("There was a problem retrieving the data:\n" + req.statusText);
}
}
}
</script>
<script type="text/javascript">
function init()

{
navigate("","");
navigate1("","");
}
//-->
</script>
</head>
<body onLoad="init()">
<div id="calendar" style="margin-top: 20px;margin-bottom: 20px"></div>

</body>
</html>[/php]
In your JS statement you address document.getElementById("calendar1").
In your HTML you have defined the div as <div id="calendar" style="margin-top: 20px;margin-bottom: 20px"></div>\

Looks like the two id's are not identical.

Ronald :cool:
Jan 3 '07 #7
cassbiz
202 100+
OK, here is what I have going.

b1randon, I put in the 'alert("response was: " + response.Text);' and am receiving the message that it is 'undefined'.

Ronald, I changed the div id to include both calendar and calendar1

Am I barking up the wrong tree trying to go this route? Or is there something blatant that I am missing?

The page is located at here
Jan 4 '07 #8
ronverdonk
4,258 Expert 4TB
What is this doing?[html]I put in the 'alert("response was: " + response.Text);'[/html]. If the response data was sent back to JS as plain text, there is no response.Text, just response. So your alert should be[html]alert("response was: " + response);[/html]
Ronald :cool:
Jan 4 '07 #9
cassbiz
202 100+
Ronald, I followed the example from b1randon in regards to the response.

I did get it figured out (at least the javascript/AJAX) part. There were two errors. In the function navigate1 it was calling callback() not callback1() and then I changed the body OnLoad from init() to navigate("","");navigate1("","") and dropped the function init() alltogether.

Thank you again. The little tips led me in the right direction. This is a great forum!

:)

Here is the correct code in the event that someone would like to use it in the future.

ajax_calendar.php
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
  2. <html>
  3. <head>
  4. <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
  5. <title>Your Title</title>
  6. <link rel='stylesheet' type='text/css' href='calendar_style.css'>
  7. <script type='text/javascript'>
  8. var req;
  9.  
  10. function navigate(month,year) {
  11.         var url = "calendar.php?month="+month+"&year="+year;
  12.         if(window.XMLHttpRequest) {
  13.                 req = new XMLHttpRequest();
  14.         } else if(window.ActiveXObject) {
  15.                 req = new ActiveXObject("Microsoft.XMLHTTP");
  16.         }
  17.         req.open("GET", url, true);
  18.         req.onreadystatechange = callback;
  19.         req.send(null);
  20. }
  21.  
  22. function callback() {
  23.         if(req.readyState == 4) {
  24.                 if(req.status == 200) {
  25.                         response = req.responseText;
  26.                         document.getElementById("calendar").innerHTML = response;
  27.                 } else {
  28.                         alert("There was a problem retrieving the data:\n" + req.statusText);
  29.                 }
  30.         }
  31. }
  32. </script>
  33. <script type='text/javascript'>
  34. var req1;
  35.  
  36. function navigate1(month,year) {
  37.         var url = "calendar1.php?month="+month+"&year="+year;
  38.         if(window.XMLHttpRequest) {
  39.                 req1 = new XMLHttpRequest();
  40.         } else if(window.ActiveXObject) {
  41.                 req1 = new ActiveXObject("Microsoft.XMLHTTP");
  42.         }
  43.         req1.open("GET", url, true);
  44.         req1.onreadystatechange = callback1;
  45.         req1.send(null);
  46. }
  47.  
  48. function callback1() {
  49.         if(req1.readyState == 4) {
  50.                 if(req1.status == 200) {
  51.                         response = req1.responseText;
  52.                         document.getElementById("calendar1").innerHTML = response;
  53.                 } else {
  54.                         alert("There was a problem retrieving the data:\n" + req1.statusText);
  55.                 }
  56.         }
  57. }
  58. </script>
  59. </head>
  60. <body onLoad='navigate("","");navigate1("","")'>
  61. <div id='calendar' style='margin-top: 20px;margin-bottom: 20px'></div>
  62. <div id='calendar1' style='margin-top: 100px;margin-bottom: 20px'></div>
  63. </body>
  64. </html>
  65.  
calendar.php
Expand|Select|Wrap|Line Numbers
  1. <?
  2.  
  3. $output = '';
  4.  
  5. if($_GET[month] == '' && $$_GET[year] == '') { 
  6.     $time = time();
  7.     $month = date('n',$time);
  8.     $year = date('Y',$time);
  9. }
  10.  
  11. $date = getdate(mktime(0,0,0,$month,1,$year));
  12. $today = getdate();
  13. $hours = $today[hours];
  14. $mins = $today[minutes];
  15. $secs = $today[seconds];
  16.  
  17. if(strlen($hours)<2) $hours="0".$hours;
  18. if(strlen($mins)<2) $mins="0".$mins;
  19. if(strlen($secs)<2) $secs="0".$secs;
  20.  
  21. $days=date("t",mktime(0,0,0,$month,1,$year));
  22. $start = $date[wday]+1;
  23. $name = $date[month];
  24. $year2 = $date[year];
  25. $offset = $days + $start - 1;
  26.  
  27. if($month==12) { 
  28.     $next=1; 
  29.     $nexty=$year + 1; 
  30. } else { 
  31.     $next=$month + 1; 
  32.     $nexty=$year; 
  33. }
  34.  
  35. if($month==1) { 
  36.     $prev=12; 
  37.     $prevy=$year - 1; 
  38. } else { 
  39.     $prev=$month - 1; 
  40.     $prevy=$year; 
  41. }
  42.  
  43. if($offset <= 28) $weeks=28; 
  44. elseif($offset > 35) $weeks = 42; 
  45. else $weeks = 35; 
  46.  
  47. $output = "<table class='daytable' cellpadding='3' cellspacing='1' align='center'>
  48. <tr>
  49.     <td colspan='7'>
  50.         <table border='0' width='100%'>
  51.         <tr>
  52.             <td valign='middle'>
  53.                 <a href='javascript:navigate($prev,$prevy)'><img src='left.gif' border='0'></a><a href='javascript:navigate(\"\",\"\")'><img src='center.gif' hspace='3' border='0'></a><a href='javascript:navigate($next,$nexty)'><img src='right.gif' border='0'></a>
  54.             </td>
  55.             <td align='right'>
  56.                 <div id='heading'>$name $year2</div>
  57.             </td>
  58.         </tr>
  59.         </table>
  60.     </td>
  61. </tr>
  62. <tr>
  63.     <td class='dayhead'>Sun</td>
  64.     <td class='dayhead'>Mon</td>
  65.     <td class='dayhead'>Tue</td>
  66.     <td class='dayhead'>Wed</td>
  67.     <td class='dayhead'>Thu</td>
  68.     <td class='dayhead'>Fri</td>
  69.     <td class='dayhead'>Sat</td>
  70. </tr>";
  71.  
  72. $col=1;
  73. $cur=1;
  74. $next=0;
  75.  
  76. for($i=1;$i<=$weeks;$i++) { 
  77.     if($next==3) $next=0;
  78.     if($col==1) $output.="<tr class='dayrow'>"; 
  79.  
  80.     $output.="<td valign='top' class='days' onMouseOver=\"this.style.backgroundColor='#EEEEEE'\" onMouseOut=\"this.style.backgroundColor='#FFFFFF'\">";
  81.  
  82.     if($i <= ($days+($start-1)) && $i >= $start) {
  83.         $output.="<div";
  84.  
  85.         if(($cur==$today[mday]) && ($name==$today[month])) $output.=" style='color:#FF0000'";
  86.         $output.="><b>$cur</b>";
  87.  
  88.         $output.="</div></td>";
  89.         $cur++; 
  90.         $col++; 
  91.     } else { 
  92.         $output.="&nbsp;</td>"; 
  93.         $col++; 
  94.     }  
  95.  
  96.     if($col==8) { 
  97.         $output.="</tr>"; 
  98.         $col=1; 
  99.     }
  100. }
  101.  
  102. $output.="</table>";
  103.  
  104. echo $output;
  105.  
  106. ?>
  107.  
calendar1.php
Expand|Select|Wrap|Line Numbers
  1. <?
  2.  
  3. $output = '';
  4.  
  5. if($_GET[month] == '' && $$_GET[year] == '') { 
  6.     $time = time();
  7.     $month = date('n',$time);
  8.     $year = date('Y',$time);
  9. }
  10.  
  11. $date = getdate(mktime(0,0,0,$month,1,$year));
  12. $today = getdate();
  13. $hours = $today[hours];
  14. $mins = $today[minutes];
  15. $secs = $today[seconds];
  16.  
  17. if(strlen($hours)<2) $hours="0".$hours;
  18. if(strlen($mins)<2) $mins="0".$mins;
  19. if(strlen($secs)<2) $secs="0".$secs;
  20.  
  21. $days=date("t",mktime(0,0,0,$month,1,$year));
  22. $start = $date[wday]+1;
  23. $name = $date[month];
  24. $year2 = $date[year];
  25. $offset = $days + $start - 1;
  26.  
  27. if($month==12) { 
  28.     $next=1; 
  29.     $nexty=$year + 1; 
  30. } else { 
  31.     $next=$month + 1; 
  32.     $nexty=$year; 
  33. }
  34.  
  35. if($month==1) { 
  36.     $prev=12; 
  37.     $prevy=$year - 1; 
  38. } else { 
  39.     $prev=$month - 1; 
  40.     $prevy=$year; 
  41. }
  42.  
  43. if($offset <= 28) $weeks=28; 
  44. elseif($offset > 35) $weeks = 42; 
  45. else $weeks = 35; 
  46.  
  47. $output = "<table class='daytable' cellpadding='3' cellspacing='1' align='center'>
  48. <tr>
  49.     <td colspan='7'>
  50.         <table border='0' width='100%'>
  51.         <tr>
  52.             <td valign='middle'>
  53.                 <a href='javascript:navigate1($prev,$prevy)'><img src='left.gif' border='0'></a><a href='javascript:navigate1(\"\",\"\")'><img src='center.gif' hspace='3' border='0'></a><a href='javascript:navigate1($next,$nexty)'><img src='right.gif' border='0'></a>
  54.             </td>
  55.             <td align='right'>
  56.                 <div id='heading'>c1 $name $year2</div>
  57.             </td>
  58.         </tr>
  59.         </table>
  60.     </td>
  61. </tr>
  62. <tr>
  63.     <td class='dayhead'>Sun</td>
  64.     <td class='dayhead'>Mon</td>
  65.     <td class='dayhead'>Tue</td>
  66.     <td class='dayhead'>Wed</td>
  67.     <td class='dayhead'>Thu</td>
  68.     <td class='dayhead'>Fri</td>
  69.     <td class='dayhead'>Sat</td>
  70. </tr>";
  71.  
  72. $col=1;
  73. $cur=1;
  74. $next=0;
  75.  
  76. for($i=1;$i<=$weeks;$i++) { 
  77.     if($next==3) $next=0;
  78.     if($col==1) $output.="<tr class='dayrow'>"; 
  79.  
  80.     $output.="<td valign='top' class='days' onMouseOver=\"this.style.backgroundColor='#EEEEEE'\" onMouseOut=\"this.style.backgroundColor='#FFFFFF'\">";
  81.  
  82.     if($i <= ($days+($start-1)) && $i >= $start) {
  83.         $output.="<div";
  84.  
  85.         if(($cur==$today[mday]) && ($name==$today[month])) $output.=" style='color:#FF0000'";
  86.         $output.="><b>$cur</b>";
  87.  
  88.         $output.="</div></td>";
  89.         $cur++; 
  90.         $col++; 
  91.     } else { 
  92.         $output.="&nbsp;</td>"; 
  93.         $col++; 
  94.     }  
  95.  
  96.     if($col==8) { 
  97.         $output.="</tr>"; 
  98.         $col=1; 
  99.     }
  100. }
  101.  
  102. $output.="</table>";
  103.  
  104. echo $output;
  105.  
  106. ?>
  107.  
Jan 4 '07 #10
b1randon
171 Expert 100+
Ronald, I followed the example from b1randon in regards to the response.

I did get it figured out (at least the javascript/AJAX) part. There were two errors. In the function navigate1 it was calling callback() not callback1() and then I changed the body OnLoad from init() to navigate("","");navigate1("","") and dropped the function init() alltogether.

Thank you again. The little tips led me in the right direction. This is a great forum!

:)

Here is the correct code in the event that someone would like to use it in the future.

ajax_calendar.php
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
  2. <html>
  3. <head>
  4. <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
  5. <title>Your Title</title>
  6. <link rel='stylesheet' type='text/css' href='calendar_style.css'>
  7. <script type='text/javascript'>
  8. var req;
  9.  
  10. function navigate(month,year) {
  11.         var url = "calendar.php?month="+month+"&year="+year;
  12.         if(window.XMLHttpRequest) {
  13.                 req = new XMLHttpRequest();
  14.         } else if(window.ActiveXObject) {
  15.                 req = new ActiveXObject("Microsoft.XMLHTTP");
  16.         }
  17.         req.open("GET", url, true);
  18.         req.onreadystatechange = callback;
  19.         req.send(null);
  20. }
  21.  
  22. function callback() {
  23.         if(req.readyState == 4) {
  24.                 if(req.status == 200) {
  25.                         response = req.responseText;
  26.                         document.getElementById("calendar").innerHTML = response;
  27.                 } else {
  28.                         alert("There was a problem retrieving the data:\n" + req.statusText);
  29.                 }
  30.         }
  31. }
  32. </script>
  33. <script type='text/javascript'>
  34. var req1;
  35.  
  36. function navigate1(month,year) {
  37.         var url = "calendar1.php?month="+month+"&year="+year;
  38.         if(window.XMLHttpRequest) {
  39.                 req1 = new XMLHttpRequest();
  40.         } else if(window.ActiveXObject) {
  41.                 req1 = new ActiveXObject("Microsoft.XMLHTTP");
  42.         }
  43.         req1.open("GET", url, true);
  44.         req1.onreadystatechange = callback1;
  45.         req1.send(null);
  46. }
  47.  
  48. function callback1() {
  49.         if(req1.readyState == 4) {
  50.                 if(req1.status == 200) {
  51.                         response = req1.responseText;
  52.                         document.getElementById("calendar1").innerHTML = response;
  53.                 } else {
  54.                         alert("There was a problem retrieving the data:\n" + req1.statusText);
  55.                 }
  56.         }
  57. }
  58. </script>
  59. </head>
  60. <body onLoad='navigate("","");navigate1("","")'>
  61. <div id='calendar' style='margin-top: 20px;margin-bottom: 20px'></div>
  62. <div id='calendar1' style='margin-top: 100px;margin-bottom: 20px'></div>
  63. </body>
  64. </html>
  65.  
calendar.php
Expand|Select|Wrap|Line Numbers
  1. <?
  2.  
  3. $output = '';
  4.  
  5. if($_GET[month] == '' && $$_GET[year] == '') { 
  6.     $time = time();
  7.     $month = date('n',$time);
  8.     $year = date('Y',$time);
  9. }
  10.  
  11. $date = getdate(mktime(0,0,0,$month,1,$year));
  12. $today = getdate();
  13. $hours = $today[hours];
  14. $mins = $today[minutes];
  15. $secs = $today[seconds];
  16.  
  17. if(strlen($hours)<2) $hours="0".$hours;
  18. if(strlen($mins)<2) $mins="0".$mins;
  19. if(strlen($secs)<2) $secs="0".$secs;
  20.  
  21. $days=date("t",mktime(0,0,0,$month,1,$year));
  22. $start = $date[wday]+1;
  23. $name = $date[month];
  24. $year2 = $date[year];
  25. $offset = $days + $start - 1;
  26.  
  27. if($month==12) { 
  28.     $next=1; 
  29.     $nexty=$year + 1; 
  30. } else { 
  31.     $next=$month + 1; 
  32.     $nexty=$year; 
  33. }
  34.  
  35. if($month==1) { 
  36.     $prev=12; 
  37.     $prevy=$year - 1; 
  38. } else { 
  39.     $prev=$month - 1; 
  40.     $prevy=$year; 
  41. }
  42.  
  43. if($offset <= 28) $weeks=28; 
  44. elseif($offset > 35) $weeks = 42; 
  45. else $weeks = 35; 
  46.  
  47. $output = "<table class='daytable' cellpadding='3' cellspacing='1' align='center'>
  48. <tr>
  49.     <td colspan='7'>
  50.         <table border='0' width='100%'>
  51.         <tr>
  52.             <td valign='middle'>
  53.                 <a href='javascript:navigate($prev,$prevy)'><img src='left.gif' border='0'></a><a href='javascript:navigate(\"\",\"\")'><img src='center.gif' hspace='3' border='0'></a><a href='javascript:navigate($next,$nexty)'><img src='right.gif' border='0'></a>
  54.             </td>
  55.             <td align='right'>
  56.                 <div id='heading'>$name $year2</div>
  57.             </td>
  58.         </tr>
  59.         </table>
  60.     </td>
  61. </tr>
  62. <tr>
  63.     <td class='dayhead'>Sun</td>
  64.     <td class='dayhead'>Mon</td>
  65.     <td class='dayhead'>Tue</td>
  66.     <td class='dayhead'>Wed</td>
  67.     <td class='dayhead'>Thu</td>
  68.     <td class='dayhead'>Fri</td>
  69.     <td class='dayhead'>Sat</td>
  70. </tr>";
  71.  
  72. $col=1;
  73. $cur=1;
  74. $next=0;
  75.  
  76. for($i=1;$i<=$weeks;$i++) { 
  77.     if($next==3) $next=0;
  78.     if($col==1) $output.="<tr class='dayrow'>"; 
  79.  
  80.     $output.="<td valign='top' class='days' onMouseOver=\"this.style.backgroundColor='#EEEEEE'\" onMouseOut=\"this.style.backgroundColor='#FFFFFF'\">";
  81.  
  82.     if($i <= ($days+($start-1)) && $i >= $start) {
  83.         $output.="<div";
  84.  
  85.         if(($cur==$today[mday]) && ($name==$today[month])) $output.=" style='color:#FF0000'";
  86.         $output.="><b>$cur</b>";
  87.  
  88.         $output.="</div></td>";
  89.         $cur++; 
  90.         $col++; 
  91.     } else { 
  92.         $output.="&nbsp;</td>"; 
  93.         $col++; 
  94.     }  
  95.  
  96.     if($col==8) { 
  97.         $output.="</tr>"; 
  98.         $col=1; 
  99.     }
  100. }
  101.  
  102. $output.="</table>";
  103.  
  104. echo $output;
  105.  
  106. ?>
  107.  
calendar1.php
Expand|Select|Wrap|Line Numbers
  1. <?
  2.  
  3. $output = '';
  4.  
  5. if($_GET[month] == '' && $$_GET[year] == '') { 
  6.     $time = time();
  7.     $month = date('n',$time);
  8.     $year = date('Y',$time);
  9. }
  10.  
  11. $date = getdate(mktime(0,0,0,$month,1,$year));
  12. $today = getdate();
  13. $hours = $today[hours];
  14. $mins = $today[minutes];
  15. $secs = $today[seconds];
  16.  
  17. if(strlen($hours)<2) $hours="0".$hours;
  18. if(strlen($mins)<2) $mins="0".$mins;
  19. if(strlen($secs)<2) $secs="0".$secs;
  20.  
  21. $days=date("t",mktime(0,0,0,$month,1,$year));
  22. $start = $date[wday]+1;
  23. $name = $date[month];
  24. $year2 = $date[year];
  25. $offset = $days + $start - 1;
  26.  
  27. if($month==12) { 
  28.     $next=1; 
  29.     $nexty=$year + 1; 
  30. } else { 
  31.     $next=$month + 1; 
  32.     $nexty=$year; 
  33. }
  34.  
  35. if($month==1) { 
  36.     $prev=12; 
  37.     $prevy=$year - 1; 
  38. } else { 
  39.     $prev=$month - 1; 
  40.     $prevy=$year; 
  41. }
  42.  
  43. if($offset <= 28) $weeks=28; 
  44. elseif($offset > 35) $weeks = 42; 
  45. else $weeks = 35; 
  46.  
  47. $output = "<table class='daytable' cellpadding='3' cellspacing='1' align='center'>
  48. <tr>
  49.     <td colspan='7'>
  50.         <table border='0' width='100%'>
  51.         <tr>
  52.             <td valign='middle'>
  53.                 <a href='javascript:navigate1($prev,$prevy)'><img src='left.gif' border='0'></a><a href='javascript:navigate1(\"\",\"\")'><img src='center.gif' hspace='3' border='0'></a><a href='javascript:navigate1($next,$nexty)'><img src='right.gif' border='0'></a>
  54.             </td>
  55.             <td align='right'>
  56.                 <div id='heading'>c1 $name $year2</div>
  57.             </td>
  58.         </tr>
  59.         </table>
  60.     </td>
  61. </tr>
  62. <tr>
  63.     <td class='dayhead'>Sun</td>
  64.     <td class='dayhead'>Mon</td>
  65.     <td class='dayhead'>Tue</td>
  66.     <td class='dayhead'>Wed</td>
  67.     <td class='dayhead'>Thu</td>
  68.     <td class='dayhead'>Fri</td>
  69.     <td class='dayhead'>Sat</td>
  70. </tr>";
  71.  
  72. $col=1;
  73. $cur=1;
  74. $next=0;
  75.  
  76. for($i=1;$i<=$weeks;$i++) { 
  77.     if($next==3) $next=0;
  78.     if($col==1) $output.="<tr class='dayrow'>"; 
  79.  
  80.     $output.="<td valign='top' class='days' onMouseOver=\"this.style.backgroundColor='#EEEEEE'\" onMouseOut=\"this.style.backgroundColor='#FFFFFF'\">";
  81.  
  82.     if($i <= ($days+($start-1)) && $i >= $start) {
  83.         $output.="<div";
  84.  
  85.         if(($cur==$today[mday]) && ($name==$today[month])) $output.=" style='color:#FF0000'";
  86.         $output.="><b>$cur</b>";
  87.  
  88.         $output.="</div></td>";
  89.         $cur++; 
  90.         $col++; 
  91.     } else { 
  92.         $output.="&nbsp;</td>"; 
  93.         $col++; 
  94.     }  
  95.  
  96.     if($col==8) { 
  97.         $output.="</tr>"; 
  98.         $col=1; 
  99.     }
  100. }
  101.  
  102. $output.="</table>";
  103.  
  104. echo $output;
  105.  
  106. ?>
  107.  
Glad that I could be of service. Thanks for posting the solution. Congrats too, multiple XMLRequest objects can be tricky.
Jan 4 '07 #11
cassbiz
202 100+
No Problem,

Now comes the fun part of querying the DB and setting up the output characteristics.
Jan 5 '07 #12
Hey, I have question. It seems that navigation in header is not working properly (month) . When I click for March 2007, from February 2007 it shows December 1999..Where is the problem? Thnx
Feb 24 '07 #13

Sign in to post your reply or Sign up for a free account.

Similar topics

4
Ajax page broken without reason
by: Seguros Catatumbo | last post by:
Hi guys, i am having some weird issue with an ajax page. I am designing a simple ajax calendar, because the one over yahoo is about 200kb long, and mine is 9kb and really simple. I am using...
Javascript
1
Ajallerix : AJAX, simple, fast Web image gallery demo ; at Novell
by: www.web20developers.com | last post by:
http://www.web20developers.com http://www.web20developers.com/index.php?option=com_content&task=view... Ajallerix : AJAX, simple, fast Web image gallery demo ; at Novell AJAX -...
Javascript
2
AJAX - Sys.WebForms.PageRequestManagerParserErrorException
by: jobs | last post by:
I've got a masterpage with a custom control that has a calendar. when dates on the calendar are selected, it sets a session variable. that calender is on every page via the master page. In the home...
ASP.NET
3
Ajax doesn't work with calendar control
by: =?Utf-8?B?UGFycm90?= | last post by:
I applied the following Ajax code in my web page which has a calendar control to keep my page from completely reloading everytime something was changed. <atlas:ScriptManager ID="ScriptManager1"...
ASP.NET
1
Javascript/Ajax problem in FF
by: JohnnieTech | last post by:
I am using some javascript/ajax to load content into a main div. The problem I am running into is that it will work in IE but not in FF. In FF I don't get any sort of load at all. I have a 1...
Javascript
2
Ajax control toolkit not working
by: =?Utf-8?B?Q2VzYXI=?= | last post by:
I have the ASP.NET 2.0 AJAX Extensions 1.0 installed (v1.0.61025). As to the web.config file, I'm using the one created using the ASP.NET AJAX-Enabled website ... This error is due to that I'm...
ASP.NET
4
Ajax or just javascript
by: ton | last post by:
Hi, I wander what to do. I'm developing a webapplication. One of the parts is to show records from a database. To modifiy a value, text of relational link or date I would like to use Ajax where...
ASP.NET
1
Newbie: AJAX not working
by: Mark B | last post by:
This is my first try at using AJAX. I want the calendars to be enabled if the user checks CheckBox1. It works OK for a normal all page refresh but once I introduced the AJAX code it stopped...
ASP.NET
1
Unable to change set with AJAX calendar extender/selectedvalue property
by: bellgodz | last post by:
Hello, I have a text box on an .aspx page that an AJAX calendar extender is tied to. When this page is loaded the text box in question is populated with a date from a selected record. I've tried...
Javascript
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!