AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of Mike Rudolph
Mike Rudolph
Flag for United States of America asked on

calendar populated using XML

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

XMLAJAXJavaScript
Avatar of undefined
Last Comment
Badotz
8/22/2022 - Mon
Badotz
Instead of an event, you might try using the title attribute:

<td><span class="hotspot" title="No School Labor Day">6</span></td>
Mike Rudolph
ASKER
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!
Badotz
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

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Badotz
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" ?
Mike Rudolph
ASKER
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.
ASKER CERTIFIED SOLUTION
Badotz
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Badotz
Visit www.json.org for all things JSON.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Mike Rudolph
ASKER
Awesome! Thank you!
Badotz
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.
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent