Solved

calendar populated using XML

Posted on 2010-09-12
9
365 Views
Last Modified: 2012-05-10
Experts,

Not certain if this can be accomplished but I created a table to house a calendar. Each date as a tool tip feature when I mouse over the date the event for that date shows as a tool tip.

At present, I have to 'hard code' all the events into the table within the tooltip.show() function. I would really like to load these values in a flat file or xml file and pull these dates from here. I often have users who are not familiar with html updating the calendar. It would be easier for these users to update the calendar by inputting events in a separate xml flle rather than trying to fit the code withing the javascript/html constraints.

I do not want to use a flash/xml solution as I am trying to keep my site free of flash. I do not have PHP server running so I just need to see if it's possible to use only javascript/ajax/html to read content from XML.

Of course I am open to other suggestions.

Thanks!

Below is an example of my table.


<table id="calendar" cellspacing="0" cellpadding="0" summary="This month's calendar" border="1">

                <caption><a href="calendar.html">September</a> (Quick Reference) </caption>

                 <tr>

                  <th colspan="7"><a href="documents/YearAtAGlance2010.swf" target="_blank">Year at a Glance Calendar 2010-2011</a></th>

                 </tr>

                

                 <tr>

                    <th scope="col" abbr="Sunday" title="Sunday">S</th>

                    <th scope="col" abbr="Monday" title="Monday">M</th>

                    <th scope="col" abbr="Tuesday" title="Tuesday">T</th>

                    <th scope="col" abbr="Wednesday" title="Wednesday">W</th>

                    <th scope="col" abbr="Thursday" title="Thursday">T</th>

                    <th scope="col" abbr="Friday" title="Friday">F</th>

                    <th scope="col" abbr="Saturday" title="Saturday">S</th>

                 </tr>

                 <!-- date begin here -->

                 <tr>

                    <td>&nbsp;</td>

                    <td>&nbsp;</td>

                    <td>&nbsp;</td>

                

                    <td><span class="hotspot" onmouseover="tooltip.show('-Football - VAR KBHS v. Kinnick, 1900, Mike Petty Stadium<br />-KMS Principals Coffee<br />-LMS SAC Meeting<br />-ZES KN Home Visits');" onmouseout="tooltip.hide();">1</span> </td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-KES PTO Meeting<br />-KSES Open House<br />-ZES KN Home Visits');" onmouseout="tooltip.hide();">2</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-ECK 1st Grade Orientation<br />-ZES KN Home Visits<br />-Air Force Family Day<br />-KBHS: Green vs White Scrimmage 1730 @ Mike Petty Field');" onmouseout="tooltip.hide();">3</span></td>

                    <td> <span class="hotspot" onmouseover="tooltip.show('-Football: SAHS @ KDHS, 1900, RMS');" onmouseout="tooltip.hide();">4</span></td>

                 </tr>

                 <tr>

                    <td>5</td>

                    <td><span class="hotspot" onmouseover="tooltip.show('No School Labor Day');" onmouseout="tooltip.hide();">6</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-1st Day of Kindergarten<br />-KBHS SAC Meeting<br />-LMS Booster Club<br />-AEIS PTO Meeting, 1600<br />-BES PTO Meeting<br />-ECK Boo Hoo Coffee 0900');" onmouseout="tooltip.hide();">7</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-KDHS AVID Parent Meeting 1500<br />Football JV: KDHS @ KBHS Petty Field @ 1800<br />-KMS Open House<br />-ECK Faculty Meeting 0800<br />-Cross Country Meet@KBHS, 1545  ');" onmouseout="tooltip.hide();">8</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-KBHS Open House<br />-KDHS AVID Parent Meeting 1500<br />-RMS Boosters<br />-ECK Sure Start Open House<br />-SHES Open House<br />-ECK Faculty Meeting 0800-0840<br />-ZES Sure Start Home Visits Begin<br />-Volleyball - JV KDHS v. OCSI, KDHS,1700<br />-Volleyball - VAR KDHS v. OCSI, KDHS, 1830');" onmouseout="tooltip.hide();">9</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-BES Early Release<br />-KSES Early Release<br />-Volleyball - JV KDHS v. KBHS, KDHS, 1700<br />-Volleyball - VAR KDHS v. KBHS, KDHS, 1830');" onmouseout="tooltip.hide();">10</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-KDHS Patriotic Program 1900<br />Football - KBHS v. OAHS at OAHS<br />Football - KDHS v. DAHS, DAHS<br />Volleyball JV<br />Developmental Day, OCSI, 1200');" onmouseout="tooltip.hide();">11</span></td>

                

                 </tr>

                 <tr>

                    <td>12</td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-LMS Open House<br />-AEIS Open House 1600-1700<br />-BHPS SAC Meeting<br />-KES Open House<br />-KSES SAC Meeting<br />-KSES Principals Coffee<br />-ZES Sure Start Home Visits end<br />-Developmental Tennis, KBHS, 1500');" onmouseout="tooltip.hide();">13</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-KBHS SAC Meeting 1530<br />-Fall Photos - RMS<br />-SHES SAC Meeting<br />-Varsity Tennis, KBHS, 1500<br />-Volleyball - JV OCIS v. KBHS, OCSI, 1700<br />-Volleyball - VAR OCSI v. KBHS, OCSI, 1900');" onmouseout="tooltip.hide();">14</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-KDHS Open House<br />-KMS SAC Meeting 1400<br />-LMS SAC Meeting 1415<br />-Fall Photos - RMS<br />-KES SAC Meeting<br />-ECK CSI Meeting 1515<br />-SHES PTO Meeting<br />-ZES Open House 1500-1630<br />-Cross Country Meet@OCSI, 1545');" onmouseout="tooltip.hide();">15</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-Sure Start 1st Day<br />-KBHS PTSA Meeting 1530<br />-KBHS Open House 1630<br />-BES Open House<br />-ECK PTO General Membership Meeting, Open House<br />-KES CSI Meeting 0800<br />First OAC Meeting, DSO, 1300');" onmouseout="tooltip.hide();">16</span></td>

                

                    <td><span class="hotspot" onmouseover="tooltip.show('-1/2 Day Early Release All Schools - Mandatory Annual Training<br />-KBHS Back to School Dance<br />-ECK New Parent Coffee 0900<br />--Football - VAR Zama v. KDHS, Zama (tentative)');" onmouseout="tooltip.hide();">17</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-Oki-Am Manga Contest<br />-Football - VAR KBHS v. SAHS at SAHS<br />-Kadena Special Olympics Bowling Event');" onmouseout="tooltip.hide();">18</span></td>

                 </tr>

                 <tr>

                    <td>19</td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-Developmental Tennis, Risner, 1500 <br />-BHPS PTO Exec. Meeting 1515<br />-KSES SAC Meeting <br />-KES SAC meeting');" onmouseout="tooltip.hide();">20</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-KMS PTO Meeting 1630<br />-Fall Photos - BHPS, KDHS, KES<br />-SHES SAC Meeting<br />-Volleyball - JV KBHS v. KDHS, KBHS, 1700<br />-Volleyball - VAR KBHS v. KDHS, KBHS 1900<br />-Volleyball - Varsity Tennis @ Risner, 1500');" onmouseout="tooltip.hide();">21</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-KDHS Senior Portratis <br />-RMS SAC Meeting<br />-AEIS School Photos<br />-KDHS Senior Portraits<br />-BHPS SILT Meeting 0800<br />-ECK Open House/PTO Meeting<br />-ZES PTO Meeting 1800<br />-ZES Fall Photos <br />-Cross Country Meet - KDHS, 1545<br />-Football: KDHS @ KBHS location: Petty Field @ 1800 (6PM)');" onmouseout="tooltip.hide();">22</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-KDHS Fall Photos<br />-ECK SAC Meeting<br />-ZES Fall Photos');" onmouseout="tooltip.hide();">23</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-AEIS Parent Coffee<br />-ECK Parent Math Workshop 0930-1030<br />-Fall Photos - KSES <br />-Football - JV KBHS v. KDHS, RMS, 1630<br />-Volleyball - JV OCSI v. KDHS, OCSI, 1700<br />-Volleyball - VAR OCSI v. KDHS, OCSI, 1900');" onmouseout="tooltip.hide();">24</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-Volleyball - JV Developmental Day, KDHS, 0900-1100<br />-Football - OAHS v. KDHS, RMS, 1900<br />-Football - DAHS v. KBHS, Mike Petty Stadium, 1900<br />-BYE WEEK Location: ------------ Time: -----');" onmouseout="tooltip.hide();">25</span></td>

                 </tr>

                 <tr>

                    <td>26</td>

                

                    <td><span class="hotspot" onmouseover="tooltip.show('-Photos - BES, ECK, KES, KDHS, RMS, ZES <br />-BHPS SAC Meeting 1515 <br />-Developmental Tennis @KBHS, 1500');" onmouseout="tooltip.hide();">27</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-Photos - BES, ECK, KES, RMS, ZES<br />-AEIS SILT Meeting<br />-Volleyball JV KBHS v. OCSI, KBHS, 1700<br />-VAR KBHS v. OCSI, KBHS, 1830<br />-Varsity Tennis @ KBHS, 1500');" onmouseout="tooltip.hide();">28</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-Photos - KES, KDHS, KSES, KMS, RMS<br />-Cross Country Meet, hosted by KBHS, location: Futenma @ 1545 ');" onmouseout="tooltip.hide();">29</span></td>

                    <td><span class="hotspot" onmouseover="tooltip.show('-Photos - KMS, LMS, SHES<br />-Volleyball - JV KDHS v. KBHS, KDHS, 1700<br />-Volleyball - VAR KDHS v. KBHS, KDHS, 1830');" onmouseout="tooltip.hide();">30</span></td>

                    <td>&nbsp;</td>

                    <td>&nbsp;</td>

                 </tr>

                

                

                </table>

Open in new window

0
Comment
Question by:shogun5
  • 6
  • 3
9 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 33656761
Instead of an event, you might try using the title attribute:

<td><span class="hotspot" title="No School Labor Day">6</span></td>
0
 

Author Comment

by:shogun5
ID: 33658227
Badotz,

Can you explain further? When I remove the events my tooltip does not work any more. That said, what I would really like to do is place variable for content within the event, i.e.

 onmouseover="tooltip.show('No School Labor Day');" onmouseout="tooltip.hide();"

"No School Labor Day" into an xml file and point to it with something like cal6 for the 6th day on the calendar. That way all I have to do to is simply modify the xml file and the value within the single quotes will change. Doing so will allow me or other users to change the value for each date without having to modify the actual html script on the page.

Any suggestions?

Thanks!
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33658366
The TITLE attribute acts like a pop-up window when the mouse is over the element - I cannot say for which element(s) this will work though, sorry.

You can set the event on the <table> instead of each <span> and determine both the event source (the event itself) and target (the element that fired the event). A single event handler can then request the text from the server via ajax and display it (each element must have a unique id to identify the corresponding text).

Something like this:

<table id="calendar" cellspacing="0" cellpadding="0" summary="This month's calendar" border="1" onmouseover="cal_over_out();" onmouseout="cal_over_out();">
...
...
<!-- date begin here -->
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><span class="hotspot" id="w1c1">1</span> </td>
<td><span class="hotspot" id="w1c2">2</span></td>
<td><span class="hotspot" id="w1c3">3</span></td>
<td><span class="hotspot" id="w1c4">4</span></td>
...
...
</table>
<script type="text/javascript">



function cal_over_out(e) {

	var source;

	var target;

	var text = "";

	

	if (e) {

		source = e.source;

		target = e.target;

	}

	else {

		source = window.event;

		target = source.srcElement;

	}

	if (target.className === "hotspot") {

		if (source.type === "onmouseout") { // Not sure of this, might be "eventName" ?

			tooltip.hide();

			return false;

		}

		text = fetch_text(target.id); // Use Ajax to fetch text for this cell



		tooltip.show(text);

		

		return false;

	}

}



function getXmlHttp() {

	var x = [

		function() { return new XMLHttpRequest(); },

		function() { return new ActiveXObject("Msxml2.XMLHTTP"); },

		function() { return new ActiveXObject("Microsoft.XMLHTTP"); }

	];

	for (var i = 0; i < x.length; i += 1) {

		try { var f = x[i], r = f(); if (r !== null) { return r; } }

		catch(e) { continue; }

	}

	return null;

}



function fetch_text(id) {

	var http = new getXmlHttp();

	

	if (http !== null) {

		var url = "get_data.php"; // Change this to be your server-side page name

		var params = id;

		

		http.open("POST", url, false); // "true" = async request

		

		//Send the proper header information along with the request

		http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

		http.setRequestHeader("Content-length", params.length);

		http.setRequestHeader("Connection", "close");

		

		http.send(params);

		

		return http.responseText;

	}

}

</script>

Open in new window

0
 
LVL 29

Expert Comment

by:Badotz
ID: 33658373
Sorry, this:

if (source.type === "onmouseout") { // Not sure of this, might be "eventName" ?

should be this:

if (source.type === "onmouseout") { // Not sure of this, might be "eventType" ?
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:shogun5
ID: 33659928
Badotz:

Thank you. I have entered the code but of course without the source document no tooltip content will display.
That said, how to I incorporate the source xml document. What would that document look like?

Additionally, I see the following variable:

var url = "get_data.php"; // Change this to be your server-side page name

I am not running php server so will this still work?

Thanks in advance for your time with this.
0
 
LVL 29

Accepted Solution

by:
Badotz earned 500 total points
ID: 33662309
The text could be stored in a database (my choice).

If you decide to use XML, then everything can be done on the client. But I would use JSON instead of XML (JSON is native JavaScript, and is MUCH simpler to deal with).


<script type="text/javascript">



//

// I added the first four tooltips

// You would add the remainder using the same pattern

//

// The key I used is "week #/cell #", but you could use 

// the day of the month, or simply "1" to "31", or another

// scheme

//

// Just make sure each key is unique

//



var tooltips = {

	"w1c1":"-Football - VAR KBHS v. Kinnick, 1900, Mike Petty Stadium<br />-KMS Principals Coffee<br />-LMS SAC Meeting<br />-ZES KN Home Visits",

	"w1c2":"-KES PTO Meeting<br />-KSES Open House<br />-ZES KN Home Visits",

	"w1c3":"-ECK 1st Grade Orientation<br />-ZES KN Home Visits<br />-Air Force Family Day<br />-KBHS: Green vs White Scrimmage 1730 @ Mike Petty Field",

	"w1c4":"-Football: SAHS @ KDHS, 1900, RMS"

}



//



function fetch_text(id) {

	if (tooltips[id]) {

		return tooltips[id]; // Tooltip text

	}

	else {

		return ""; // No tooltip found

	}

}



</script>

Open in new window

0
 
LVL 29

Expert Comment

by:Badotz
ID: 33662316
Visit www.json.org for all things JSON.
0
 

Author Closing Comment

by:shogun5
ID: 33696686
Awesome! Thank you!
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33697634
No worries - glad to help.

BTW: You could populate the JSON object on-the-fly, i.e., if an entry is missing, hit the server via Ajax for that entry.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now