problem assigning function to <div>.onclick

D

duckkiller53

Could someone please help:

I am learning ajax, and I am trying to get one of my books
examples to work. The example takes a map file created with an image
file of squares, and a bunch of div's that have css id's for each
square. When you click on the square a popup box is supposed to
appear. Everything looks as it should be the div's onclick event's
are set to the function to display a popup, but when you try clicking
on one of the div's nothing happens. I'm confused because there is no
error thrown and I have tried a test ie:
document.getElementByID("body")[0].onclick = alert("this is a test");
and that works just fine!

Anyhelp would be greatly appreaciated.

Thanks

Dave.


**************Here is my javascript:****************

window.onload = initAll;
var xhr = false;
var dataArray = new Array();
var url = "students.xml"

function initAll() {
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { }
}
}

if (xhr) {
xhr.onreadystatechange = setDataArray;
xhr.open("GET", url, true);
xhr.send(null);
}
else {
alert("Sorry, but I couldn't create an XMLHttpRequest");
}

var allDivs = document.getElementsByTagName("div");
for (var i=0; i<allDivs.length; i++) {
allDivs.onclick = featureOneDiv;
}
}

function test() {
alert("the onclick logic is working");
}

function setDataArray() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (xhr.responseXML) {
var allData = xhr.responseXML.getElementsByTagName("student");

for (var i=0; i<allData.length; i++) {
var tempObj = new Object;
tempObj.firstName = getVal(allData,"firstName");
tempObj.lastName = getVal(allData,"lastName");
tempObj.seat = getVal(allData,"seat");
tempObj.lunchPeriod = getVal(allData,"lunchPeriod");
tempObj.readingGroup = getVal(allData,"readingGroup");
dataArray = tempObj;
}
}
}
else {
alert("There was a problem with the request " + xhr.status);
}
}

function getVal(theData,theTag) {
return theData.getElementsByTagName(theTag)[0].firstChild.nodeValue;
}
}

function featureOneDiv(evt) {
var allDivs = document.getElementsByTagName("div");
for (var i=0; i<allDivs.length; i++) {
allDivs.className = "";
}

var theDiv = (evt) ? evt.target : window.event.srcElement;
theDiv.className = "pickedDiv";
var theStudent = null;

for (var i=0; i<dataArray.length; i++) {
if (theDiv.id == dataArray.seat) {
theStudent = dataArray;
}
}
if (theStudent) {
var studentInfo = document.getElementById("detail");
var theMsg = "<span id='closeBox'>X</span> <h3>";
theMsg += theStudent.firstName + " " + theStudent.lastName;
theMsg += "</h3>Seat: " + theStudent.seat;
theMsg += "<br />Lunch Period: " + theStudent.lunchPeriod;
theMsg += "<br />Reading Group: " + theStudent.readingGroup;

studentInfo.innerHTML = theMsg;
studentInfo.style.top = (theDiv.offsetTop-5) + "px";
studentInfo.style.left = (theDiv.offsetLeft+35) + "px";
studentInfo.style.visibility = "visible";

document.getElementById("closeBox").onclick = function() {
document.getElementById("detail").style.visibility = "hidden";
}
}
}


*************HTML FILE***************

<html>
<head>
<title>Student Seating Chart</title>
<link href="script.css" rel="stylesheet" type="text/css" />
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="s01"></div>
<div id="s02"></div>
<div id="s03"></div>
<div id="s04"></div>
<div id="s05"></div>
<div id="s06"></div>
<div id="s07"></div>
<div id="s08"></div>
<div id="s09"></div>
<div id="s10"></div>
<div id="s11"></div>
<div id="s12"></div>
<div id="s13"></div>
<div id="s14"></div>
<div id="s15"></div>
<div id="s16"></div>
<div id="s17"></div>
<div id="s18"></div>
<div id="s19"></div>
<div id="s20"></div>
<div id="s21"></div>
<div id="s22"></div>
<div id="s23"></div>
<div id="s24"></div>
<div id="detail"></div>
</body>
</html>

**************** CSS FILE ************************

body {
font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

..pickedDiv {
z-index: 3;
background-color: #F00;
opacity: 0.20;
}

img {
margin-top: 10px;
margin-left: 5px;
}

#detail {
visibility: hidden;
position: absolute;
background-color: #FFF;
border: 1px solid gray;
z-index: 5;
width: 100px;
height: 75px;
overflow: hidden;
font-size: 0.6em;
padding: 5px;
}

#closeBox {
font-style: monaco, sans-serif;
position: absolute;
top: 1px;
left: 97px;
font-size: .6em;
border: 2px solid gray;
margin: 3px;
}
#s01 {
position:absolute;
left:19px;
top:23px;
width:50px;
height:50px;
}
#s02 {
position:absolute;
left:138px;
top:23px;
width:50px;
height:50px;
}
#s03 {
position:absolute;
left:256px;
top:23px;
width:50px;
height:50px;
}
#s04 {
position:absolute;
left:375px;
top:23px;
width:50px;
height:50px;
}
#s05 {
position:absolute;
left:493px;
top:23px;
width:50px;
height:50px;
}

#s06 {
position:absolute;
left:19px;
top:114px;
width:50px;
height:50px;
}
#s07 {
position:absolute;
left:138px;
top:117px;
width:50px;
height:50px;
}
#s08 {
position:absolute;
left:256px;
top:117px;
width:50px;
height:50px;
}
#s09 {
position:absolute;
left:375px;
top:117px;
width:50px;
height:50px;
}
#s10 {
position:absolute;
left:493px;
top:117px;
width:50px;
height:50px;
}
#s11 {
position:absolute;
left:19px;
top:207px;
width:50px;
height:50px;
}
#s12 {
position:absolute;
left:138px;
top:206px;
width:50px;
height:50px;
}
#s13 {
position:absolute;
left:256px;
top:206px;
width:50px;
height:50px;
}
#s14 {
position:absolute;
left:375px;
top:206px;
width:50px;
height:50px;
}
#s15 {
position:absolute;
left:493px;
top:205px;
width:50px;
height:50px;
}

#s16 {
position:absolute;
left:19px;
top:297px;
width:50px;
height:50px;
}
#s17 {
position:absolute;
left:138px;
top:297px;
width:50px;
height:50px;
}
#s18 {
position:absolute;
left:256px;
top:297px;
width:50px;
height:50px;
}
#s19 {
position:absolute;
left:375px;
top:297px;
width:50px;
height:50px;
}
#s20 {
position:absolute;
left:494px;
top:297px;
width:50px;
height:50px;
}


#s21 {
position:absolute;
left:19px;
top:389px;
width:50px;
height:50px;
}
#s22 {
position:absolute;
left:138px;
top:389px;
width:50px;
height:50px;
}
#s23 {
position:absolute;
left:256px;
top:388px;
width:50px;
height:50px;
}
#s24 {
position:absolute;
left:375px;
top:387px;
width:50px;
height:50px;
}
#s25 {
position:absolute;
left:494px;
top:388px;
width:50px;
height:50px;
}

**************XML FILE*****************

<?xml version="1.0"?>
<students xml:lang="EN">
<student>
<seat>s01</seat>
<firstName>Tom</firstName>
<lastName>Miller</lastName>
<readingGroup>1</readingGroup>
<lunchPeriod>early</lunchPeriod>
</student>
<student>
<seat>s02</seat>
<firstName>Sean</firstName>
<lastName>Albrecht</lastName>
<readingGroup>5</readingGroup>
<lunchPeriod>late</lunchPeriod>
</student>
<student>
<seat>s03</seat>
<firstName>Chris</firstName>
<lastName>Anderson</lastName>
<readingGroup>3</readingGroup>
<lunchPeriod>early</lunchPeriod>
</student>
<student>
<seat>s04</seat>
<firstName>Rachel</firstName>
<lastName>Lincoln</lastName>
<readingGroup>5</readingGroup>
<lunchPeriod>early</lunchPeriod>
</student>
<student>
<seat>s05</seat>
<firstName>Aaron</firstName>
<lastName>Simpson</lastName>
<readingGroup>4</readingGroup>
<lunchPeriod>late</lunchPeriod>
</student>
<student>
<seat>s06</seat>
<firstName>Jean</firstName>
<lastName>Chen</lastName>
<readingGroup>3</readingGroup>
<lunchPeriod>early</lunchPeriod>
</student>
<student>
<seat>s07</seat>
<firstName>Lee</firstName>
<lastName>Hunter</lastName>
<readingGroup>2</readingGroup>
<lunchPeriod>late</lunchPeriod>
</student>
<student>
<seat>s08</seat>
<firstName>Sam</firstName>
<lastName>Roberts</lastName>
<readingGroup>3</readingGroup>
<lunchPeriod>early</lunchPeriod>
</student>
<student>
<seat>s09</seat>
<firstName>Tracy</firstName>
<lastName>Franklin</lastName>
<readingGroup>5</readingGroup>
<lunchPeriod>late</lunchPeriod>
</student>
<student>
<seat>s10</seat>
<firstName>Cameron</firstName>
<lastName>Chen</lastName>
<readingGroup>4</readingGroup>
<lunchPeriod>early</lunchPeriod>
</student>
<student>
<seat>s11</seat>
<firstName>Dana</firstName>
<lastName>Jones</lastName>
<readingGroup>4</readingGroup>
<lunchPeriod>early</lunchPeriod>
</student>
<student>
<seat>s12</seat>
<firstName>Jamie</firstName>
<lastName>Carter</lastName>
<readingGroup>2</readingGroup>
<lunchPeriod>early</lunchPeriod>
</student>
<student>
<seat>s13</seat>
<firstName>Jeff</firstName>
<lastName>Donlan</lastName>
<readingGroup>2</readingGroup>
<lunchPeriod>late</lunchPeriod>
</student>
<student>
<seat>s14</seat>
<firstName>Kim</firstName>
<lastName>Hart</lastName>
<readingGroup>1</readingGroup>
<lunchPeriod>early</lunchPeriod>
</student>
<student>
<seat>s15</seat>
<firstName>Les</firstName>
<lastName>Flanders</lastName>
<readingGroup>3</readingGroup>
<lunchPeriod>early</lunchPeriod>
</student>
<student>
<seat>s16</seat>
<firstName>Kelly</firstName>
<lastName>Staples</lastName>
<readingGroup>3</readingGroup>
<lunchPeriod>late</lunchPeriod>
</student>
<student>
<seat>s17</seat>
<firstName>Bobbie</firstName>
<lastName>Harrison</lastName>
<readingGroup>4</readingGroup>
<lunchPeriod>early</lunchPeriod>
</student>
<student>
<seat>s25</seat>
<firstName>Lindsay</firstName>
<lastName>Ford</lastName>
<readingGroup>1</readingGroup>
<lunchPeriod>late</lunchPeriod>
</student>
<student>
<seat>s18</seat>
<firstName>Leslie</firstName>
<lastName>Adams</lastName>
<readingGroup>2</readingGroup>
<lunchPeriod>early</lunchPeriod>
</student>
<student>
<seat>s19</seat>
<firstName>Sean</firstName>
<lastName>McClintock</lastName>
<readingGroup>1</readingGroup>
<lunchPeriod>early</lunchPeriod>
</student>
<student>
<seat>s20</seat>
<firstName>Bruce</firstName>
<lastName>Jeffers</lastName>
<readingGroup>4</readingGroup>
<lunchPeriod>late</lunchPeriod>
</student>
<student>
<seat>s21</seat>
<firstName>Max</firstName>
<lastName>McCarthy</lastName>
<readingGroup>1</readingGroup>
<lunchPeriod>late</lunchPeriod>
</student>
<student>
<seat>s22</seat>
<firstName>Matt</firstName>
<lastName>Stevenson</lastName>
<readingGroup>2</readingGroup>
<lunchPeriod>late</lunchPeriod>
</student>
<student>
<seat>s23</seat>
<firstName>Joey</firstName>
<lastName>Hatch</lastName>
<readingGroup>5</readingGroup>
<lunchPeriod>late</lunchPeriod>
</student>
<student>
<seat>s24</seat>
<firstName>Sarah</firstName>
<lastName>Williams</lastName>
<readingGroup>4</readingGroup>
<lunchPeriod>late</lunchPeriod>
</student>
</students>
 
D

duckkiller53

Note: This is the line in 'initAll' that is supposed to assign the
function

allDivs.onclick = featureOneDiv;

the function featureOneDiv is the function that does the real work.
 
V

VK

Note: This is the line in 'initAll' that is supposed to assign the
function

allDivs.onclick = featureOneDiv;

the function featureOneDiv is the function that does the real work.
Click to expand...


Did you try synchronous XHR call:
xhr.open("GET", url, false);
just for an experiment?

Could you place a working demo somewhere online?
 
D

duckkiller53

I would be glad to place a working copy of the example someplace, The
code I pasted in is all the code to the actual web site example. Is
there a website that allows me to place a test site on the web for
others to see?


Dave.




Note: This is the line in 'initAll' that is supposed to assign the
function
Click to expand...
allDivs.onclick = featureOneDiv;
Click to expand...

the function featureOneDiv is the function that does the real work.
Click to expand...

Did you try synchronous XHR call:
 xhr.open("GET", url, false);
just for an experiment?

Could you place a working demo somewhere online?
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Please Help? 0
Trouble with css 4
Help with Visual Lightbox: Scripts 2
I am trying to detect Which image id="" was clicked ? 22
Justify-content not working 1
How can I get my menu inside of a menu to function properly? 1
Image shifts to the right when export the page to pdf 4
Need help with code on website (noob) 2

Members online

No members online now.
Total: 24 (members: 0, guests: 24)
Robots: 317

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,009
Latest member
GidgetGamb

Latest Threads

Top