AfterLoad ??

[pamelafluente]

Ok I am trying to attach the handlers dynamically:

(within a JS file: )
-------------------------------------------------------

window.onload = addCellHandlers();

function addCellHandlers() {

var foundDivs = document.body.getElementsByTagName("div");
var divElement;
for ( var i = 0; i < foundDivs.length; i++ ) {
divElement = foundDivs[i];
if ( divElement.getAttribute("hasHandlers") == "True" ) {
divElement.onclick="cellClick(event,this)" ;
divElement.onmouseover = "mOver(this)" ;
divElement.onmouseout = "mOut(this)" ;
}
}
}
hmm this gets called, but does not seem to attach any handler.

I suspect that foundDivs is empty and I am probably invoking this in
the wrong way.

Is there some kind of afterLoad event ?
How do I correctly add handlers to my DIVs?

-P

[Laurent Bugnion]

Hi,

pa***********@libero.it wrote:

Ok I am trying to attach the handlers dynamically:

(within a JS file: )
-------------------------------------------------------

window.onload = addCellHandlers();

Should be window.onload = addCellHandlers;

What you want to do is assign a reference to a Function object to the
onload property of the Window object. The reference to the Function
object must be passed without the (). What you do is call the function,
and assign the result (which doesn't exist in that case) to the
window.onload property.

HTH,
Laurent

function addCellHandlers() {

var foundDivs = document.body.getElementsByTagName("div");
var divElement;
for ( var i = 0; i < foundDivs.length; i++ ) {
divElement = foundDivs[i];
if ( divElement.getAttribute("hasHandlers") == "True" ) {
divElement.onclick="cellClick(event,this)" ;
divElement.onmouseover = "mOver(this)" ;
divElement.onmouseout = "mOut(this)" ;
}
}
}
hmm this gets called, but does not seem to attach any handler.

I suspect that foundDivs is empty and I am probably invoking this in
the wrong way.

Is there some kind of afterLoad event ?
How do I correctly add handlers to my DIVs?

-P

--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch

[pamelafluente]

I just tried also with:

window.afterLoad = addCellHandlers();

it's the same. The function is invoked but foundDivs has always zero
lenght .
What is going on here?

function addCellHandlers() {
var foundDivs = document.body.getElementsByTagName("div");

-P

[pamelafluente]

Hi Laurent.
Just tried. Without "()" the function is not invoked.
The problem seems to be that the array foundDivs is empty. Why?

-P

Laurent Bugnion ha scritto:

Hi,

pa***********@libero.it wrote:

Ok I am trying to attach the handlers dynamically:

(within a JS file: )
-------------------------------------------------------

window.onload = addCellHandlers();

Should be window.onload = addCellHandlers;

What you want to do is assign a reference to a Function object to the
onload property of the Window object. The reference to the Function
object must be passed without the (). What you do is call the function,
and assign the result (which doesn't exist in that case) to the
window.onload property.

HTH,
Laurent

function addCellHandlers() {

var foundDivs = document.body.getElementsByTagName("div");
var divElement;
for ( var i = 0; i < foundDivs.length; i++ ) {
divElement = foundDivs[i];
if ( divElement.getAttribute("hasHandlers") == "True" ) {
divElement.onclick="cellClick(event,this)" ;
divElement.onmouseover = "mOver(this)" ;
divElement.onmouseout = "mOut(this)" ;
}
}
}
hmm this gets called, but does not seem to attach any handler.

I suspect that foundDivs is empty and I am probably invoking this in
the wrong way.

Is there some kind of afterLoad event ?
How do I correctly add handlers to my DIVs?

-P

--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch

[pamelafluente]

pa***********@libero.it ha scritto:

Hi Laurent.
Just tried. Without "()" the function is not invoked.
The problem seems to be that the array foundDivs is empty. Why?

No actually you are right !! Now it works.

It's strange that the function is called both with and without "()".
But, in the first case the foundDivs remains empty (??)
Now there must be some other problems because the handlers do
not get attacched to the div.

I suspect that:

divElement.onclick = "cellClick(event,this)" ;
divElement.onmouseover = "mOver(this)" ;
divElement.onmouseout = "mOut(this)" ;

is a wrong way to do that. What's wrong here?

-P

[Laurent Bugnion]

Hi,

pa***********@libero.it wrote:

Hi Laurent.
Just tried. Without "()" the function is not invoked.
The problem seems to be that the array foundDivs is empty. Why?

-P

I checked your code, and there are multiple problems.

- First, related to your other post in that thread, there is no
afterLoad event. onload is correct, it will be called after the document
has been parsed and interpreted. When onload is called, the DIVs are there.

- getElementsByTagName is in document, not document.body
-->
var foundDivs = document.getElementsByTagName("div");
alert( foundDivs.length );

- You must use
window.onload = addCellHandlers; // without ()

- Similarly, in your function addCellHandlers, you must also assign the
event handlers without () and it may not be a string.

For example:

divElement.onclick = cellClick;
divElement.onmouseover = mOver;
divElement.onmouseout = mOut;

As you'll probably notice, this doesn't allow passing any parameter.
Thankfully, JavaScript has closure, which allows you to refer to
externally defined variables from inside a function:

var thisLocal = this;
divElement.onclick = function() { mOver( thisLocal ) };

In that case I create an anonymous function, which I pass to the
divElement.onclick property. Note the use of closure: I assigne the
content of "this" to a local variable, defined outside of the anonymous
function. Then from inside the function, I can refer to that external
variable, because the context in which the function was defined is
accessible when the function is called. That's closure.

- Question: Did you define "hasHandlers" yourself in the server-side
code? It's not a standard attribute of DIV. That might cause validation
errors because it's not standard HTML, but it's not that big an issue.

HTH,
Laurent

>
Laurent Bugnion ha scritto:

>>Hi,

pa***********@libero.it wrote:

>>>Ok I am trying to attach the handlers dynamically:

(within a JS file: )
-------------------------------------------------------

window.onload = addCellHandlers();

Should be window.onload = addCellHandlers;

What you want to do is assign a reference to a Function object to the
onload property of the Window object. The reference to the Function
object must be passed without the (). What you do is call the function,
and assign the result (which doesn't exist in that case) to the
window.onload property.

HTH,
Laurent

>>>function addCellHandlers() {

var foundDivs = document.body.getElementsByTagName("div");
var divElement;
for ( var i = 0; i < foundDivs.length; i++ ) {
divElement = foundDivs[i];
if ( divElement.getAttribute("hasHandlers") == "True" ) {
divElement.onclick="cellClick(event,this)" ;
divElement.onmouseover = "mOver(this)" ;
divElement.onmouseout = "mOut(this)" ;
}
}
}
hmm this gets called, but does not seem to attach any handler.

I suspect that foundDivs is empty and I am probably invoking this in
the wrong way.

Is there some kind of afterLoad event ?
How do I correctly add handlers to my DIVs?

-P

--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch

--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch

[Ian Collins]

pa***********@libero.it wrote:

pa***********@libero.it ha scritto:

>>Hi Laurent.
Just tried. Without "()" the function is not invoked.
The problem seems to be that the array foundDivs is empty. Why?

No actually you are right !! Now it works.

It's strange that the function is called both with and without "()".
But, in the first case the foundDivs remains empty (??)

Because the function gets called when the script is interpreted (before
the body is loaded) and its result gets assigned to onload!

--
Ian Collins.

[pamelafluente]

Laurent Bugnion ha scritto:

Hi,

Perfect, so I changet it to:

window.onload = addCellHandlers;

function addCellHandlers() {

// var foundDivs = document.body.getElementsByTagName('div');
var aDivs = document.getElementsByTagName("DIV");
var divElement;
for ( var i = 0; i < aDivs.length; i++ ) {

divElement = aDivs[i];

if ( divElement.getAttribute("hasHandlers") == "True" ) {
divElement.onclick = cellClick; -not working
divElement.onmouseover = mOver; ->not working
divElement.onmouseout = mOut; ->not working
}
}
}

What I am not understanding is how do I pass the 2 parameters as in

cellClick(event,this) ?

>
As you'll probably notice, this doesn't allow passing any parameter.
Thankfully, JavaScript has closure, which allows you to refer to
externally defined variables from inside a function:

var thisLocal = this;
divElement.onclick = function() { mOver( thisLocal ) };

In that case I create an anonymous function, which I pass to the
divElement.onclick property. Note the use of closure: I assigne the
content of "this" to a local variable, defined outside of the anonymous
function. Then from inside the function, I can refer to that external
variable, because the context in which the function was defined is
accessible when the function is called. That's closure.

Hmmm ... Seems complicate: I have to digest that. Could you show in
particular how
do I adapt it to my case where I have actually 2 parameters: event,
this ?

"cellClick(event,this)"

Actually Ian suggested to remove them. But I do not know how to get
them from within the function.

>
- Question: Did you define "hasHandlers" yourself in the server-side
code? It's not a standard attribute of DIV. That might cause validation
errors because it's not standard HTML, but it's not that big an issue.

Right. Exactly.

Ian suggested to use a class in a precedent post. But I do not
understand his suggestion. I already have a class defined for styles
(see my reply).

Not all the DIVs which have a certain style have handlers attached.
Thank you Laurent

-P

Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch

[pamelafluente]

Ian Collins ha scritto:

pa***********@libero.it wrote:

pa***********@libero.it ha scritto:

>Hi Laurent.
Just tried. Without "()" the function is not invoked.
The problem seems to be that the array foundDivs is empty. Why?

No actually you are right !! Now it works.

It's strange that the function is called both with and without "()".
But, in the first case the foundDivs remains empty (??)

Because the function gets called when the script is interpreted (before
the body is loaded) and its result gets assigned to onload!

Enlighting (and unexpected) !! :)

>
--
Ian Collins.

[pamelafluente]

Laurent Bugnion ha scritto:

As you'll probably notice, this doesn't allow passing any parameter.
Thankfully, JavaScript has closure, which allows you to refer to
externally defined variables from inside a function:

var thisLocal = this;
divElement.onclick = function() { mOver( thisLocal ) };

In that case I create an anonymous function, which I pass to the
divElement.onclick property. Note the use of closure: I assigne the
content of "this" to a local variable, defined outside of the anonymous
function. Then from inside the function, I can refer to that external
variable, because the context in which the function was defined is
accessible when the function is called. That's closure.

I tried this:

----------

window.onload = addCellHandlers;

function addCellHandlers() {

// var foundDivs = document.body.getElementsByTagName('div');
var aDivs = document.getElementsByTagName("DIV");
var divElement;
for ( var i = 0; i < aDivs.length; i++ ) {

divElement = aDivs[i];

if ( divElement.getAttribute("hasHandlers") == "True" ) {
// divElement.onclick = cellClick;
// divElement.onmouseover = mOver;
// divElement.onmouseout = mOut;

var thisLocal = this;
var eventLocal = event;
divElement.onclick = function() { cellClick( eventLocal,
thisLocal ) };
divElement.onmouseover = function() { onmouseover(
thisLocal ) };
divElement.onmouseout = function() { onmouseout(
thisLocal ) };

}
}
}

----------

gives a run time error: "Object Expected"

divElement.onmouseover = function() { onmouseover( thisLocal ) };
I am not sure I understand this mechanism (??) :(

-P

Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch

[Richard Cornford]

pa***********@libero.it wrote:

Perfect, so I changet it to:

What is perfect?

window.onload = addCellHandlers;

function addCellHandlers() {

// var foundDivs = document.body.getElementsByTagName('div');
var aDivs = document.getElementsByTagName("DIV");
var divElement;
for ( var i = 0; i < aDivs.length; i++ ) {

divElement = aDivs[i];

if ( divElement.getAttribute("hasHandlers") == "True" ) {
divElement.onclick = cellClick; -not working
divElement.onmouseover = mOver; ->not working
divElement.onmouseout = mOut; ->not working
}
}
}

What I am not understanding is how do I pass the 2 parameters as in

cellClick(event,this) ?

<snip>

You don't. As the functions are assigned to properties of the element,
and called by the browser as methods of the element, the - this - value
is a reference to the element within the function when it is called. In
some browser the event object will be passed as the fist argument (and
only) argument to the method when it is called by the browser , and
when it is not the - event - Identifier will resolve as a reference to
a global event object. So you do:-

function cellClick(ev){
ev = ev || event; // Normalize the ev parameter so it refers to
// the event object if it has not been passed in.
this. <... // Use - this - to refer to the element.
}

- with:-

divElement.onclick = cellClick;

Richard.

[pamelafluente]

Richard Cornford ha scritto:

Thanks Richard

a global event object. So you do:-

function cellClick(ev){
ev = ev || event; // Normalize the ev parameter so it refers to
// the event object if it has not been passed in.
this. <... // Use - this - to refer to the element.
}

I am very Sorry Richard. I am very new to javascript. I am not sure to
understand your suggestion. Are you referring to a way to eliminate the
parameters, as Ian suggested, or are you suggesting how to pass them
when attaching the handlers.

Sorry again Richard . This is all new to me. I would need to see it
within my code to understand what you are referring to...

-P

>
divElement.onclick = cellClick;

Richard.

[Laurent Bugnion]

Pamela,

What I am not understanding is how do I pass the 2 parameters as in

cellClick(event,this) ?

What does "this" refer to in your expectation?

To use the event argument as well as a second argument, here is a
simplified example:

function bodyOnLoad()
{
var nDivRed = document.getElementById( "divRed" );
var strMessage = "Hello";

if ( nDivRed )
{
// The "evt" variable is set in Mozilla browsers when
// the event is fired.
nDivRed.onmousemove = function( evt )
{
displayMousePosition( strMessage, evt )
};
}
}

function displayMousePosition( strMessage, evt )
{
// In IE, the event is stored in a global window.event property
if ( window.event )
{
evt = window.event;
}

var nSpanStatus = document.getElementById( "spanStatus" );
if ( nSpanStatus )
{
nSpanStatus.firstChild.nodeValue = "Position: "
+ evt.clientX + ":" + evt.clientY
+ " / Message: " + strMessage;
}
}

It's a bit tricky to understand, I'll try to explain:

1) The onmousemove event (and the others too) is always called with a
parameter in Mozilla browsers, and with no parameter in IE. The
parameter is named "evt" in my anonymouse function. Because my
user-defined function displayMousePosition has two parameters, I can
pass evt to it as well as another (or two or three or more) parameter.

2) When the even is fired, the anonymous function is executed. The only
thing it does is call the displayMousePosition function. Because of
closure, it still remembers the value of strMessage. Additionally, in
Mozilla, evt is defined. In IE, evt is undefined, but it doesn't matter.

3) In displayMousePosition, we test to see if a global window.event
property exists. If yes, it means that evt is undefined, so we assign
window.event to evt (this simplifies the code later).

About closure: This is probably the trickiest concept in JavaScript.
Closure means that the function's context is saved together with the
function definition. So it means that variables visible in the same
scope as the function are accessible from inside the function, even if
the function is called in another context.

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch

[Richard Cornford]

pa***********@libero.it wrote:

Richard Cornford ha scritto:

<snip>

>a global event object. So you do:-

function cellClick(ev){
ev = ev || event; // Normalize the ev parameter so it refers to
// the event object if it has not been passed in.
this. <... // Use - this - to refer to the element.
}

I am very Sorry Richard. I am very new to javascript. I am not sure to
understand your suggestion. Are you referring to a way to eliminate the
parameters, as Ian suggested, or are you suggesting how to pass them
when attaching the handlers.

When the event parameter is passed (by non-IE style browsers) that is
done automatically, and the - this - value refers to the DIV in a
function that is called as a method of the DIV. Such a function must
expect the event object as an argument (but handle not getting it) and
does not need any mechanism other than - this - to refer to the DIV
element.

Sorry again Richard . This is all new to me. I would need to see it
within my code to understand what you are referring to...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
window.onload = function(){
var div;
if((div = document.getElementById('test'))){
div.onclick = cellClick;
}
}

function cellClick(ev){
ev = ev || event;
alert(
'Event type = '+ ev.type+
'\nEvent screenY = '+ ev.screenY +
'\n\nElement Tag Name = '+ this.tagName +
'\nElement ID = '+ this.id +
'\nElement offsetTop = '+ this.offsetTop
);
}

</script>
</head>
<body>
<div id="test" style="border:5px solid red;margin:2em;">
test div
</div>
</body>
</html>

Richard.

[Laurent Bugnion]

Hi,

Try this:

var thisLocal = this;
divElement.onclick = function( evt ) { cellClick( evt, thisLocal ) };
divElement.onmouseover = function() { doOnmouseover( thisLocal ) };
divElement.onmouseout = function() { doOnmouseout( thisLocal ) };

And then:

function cellClick( evt, thisLocal )
{
if ( window.event )
{
evt = window.event;
}

// ...

}

I renamed mouseover and mouseout to doOnmouseover and doOnmouseout to
avoid confusion with window.onmouseover

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch

[pamelafluente]

Richard, Laurent,

I am very embarassed to admit I do not understand how to convey your
theory suggestions into my actual code..

Could you please suggest ONLY the exact corrections I need to make to

function addCellHandlers() ?

Theorical discussion is not easy to grab for me if first I do not see
it applied to my specific problem and understand this specific case.
I make a summary providing full source code :

I have a JS file which contains:
---------------------------------------------

window.onload = addCellHandlers;

function addCellHandlers() {

// var foundDivs = document.body.getElementsByTagName('div');
var aDivs = document.getElementsByTagName("DIV");
var divElement;
for ( var i = 0; i < aDivs.length; i++ ) {

divElement = aDivs[i];

if ( divElement.getAttribute("hasHandlers") == "True" ) {

var thisLocal = this;
var eventLocal = event;
divElement.onclick = function() { cellClick( eventLocal,
thisLocal ) };
divElement.onmouseover = function() { onmouseover(
thisLocal ) };
divElement.onmouseout = function() { onmouseout(
thisLocal ) };

}
}
}
-------------------------------------

This is called within an HTML file which looks like this (this file may
contain thousands of those DIVs. I left only a couple of them ):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css" media="screen">
..c7bg{position:absolute;background:#008000;border-width:1px;border-style:ouÂ*tset;}

..c7fg{position:absolute;border-width:0;color:#ffffff;background:transparentÂ*;tex t-align:center;font-family:Tahoma;font-size:11px;font-weight:bold;}

..c8bg{position:absolute;background:#228b22;border-width:1px;border-style:ouÂ*tset;}

..c8fg{position:absolute;border-width:0;color:#ffffff;background:transparentÂ*;tex t-align:center;font-family:Tahoma;font-size:11px;font-weight:bold;}

..menuItemStyle{
background:#ddeeff;border-width:1px;border-style:inset;font-family:Arial;foÂ*nt-size:11px

}
</style>

<script language="javascript" src="Ajax_Javascript.js"></script>
</head>
<body>
<div id ="RG1,0,0" class=c7bg enabledActions="4,6"
onclick="cellClick(event,this)" onmouseover = "mOver(this)" onmouseout
= "mOut(this)" style="top:170px;left:20px;width:89px;height:30px; ">
<div class=c7fg style="top:7px;left:2px;"><table><tr><td width=83px
height=14px valign=middle>SHIPCOUNTRY</td></tr></table></div></div>
<div id ="RG1,0,1" class=c8bg enabledActions="4,2,6"
onclick="cellClick(event,this)" onmouseover = "mOver(this)" onmouseout
= "mOut(this)" style="top:170px;left:112px;width:89px;height:30px ;">
<div
style="position:absolute;top:2253px;font-family:Tahoma;font-size:11px;font-Â*weight:bold"><font

color="#c0c0c0">Report generated: <br>lunedì*²5 settembre 2006
18.17.59</font><br><a href="http://somesite/"><font
color="#c0c0c0">http://somesite/</font></a><p></p></div>
<form name="form1" method="get" action="ReportProcessor.aspx">
<input type="hidden" name="hiddenFieldName" id="hiddenFieldID"/>
</form>
<div id="menuActions" style="position:absolute; display:none">
<table >
<tr>
<td bgcolor="#eeaa66" style="width: 15px"</td>
<td id="menuItemContainer"></td>
</tr>
</table>
</div>
</body>
</html>

--------------------

Other function in the JS file are the following:

// JScript File: Ajax_Javascript.js

//http://groups.google.it/group/comp.lang.javascript/browse_frm/thread/b3b8fa7bad9223a4?hl=it
//Laurent Bugnion, GalaSoft

function setStatus( strMessage )
{
var statusInfo = document.getElementById("statusInfo");
// if (statusInfo.id != null) {
// statusInfo.firstChild.nodeValue = strMessage;
// }

// alert(strMessage);
window.status = strMessage;
}

var submitURL;
var oHttp = null;

function submitOnlyIfUrlActive() {

if ( window.XMLHttpRequest ) {
oHttp = new window.XMLHttpRequest();
}
else {
if (window.ActiveXObject ) {
oHttp = new window.ActiveXObject("Microsoft.XMLHTTP");
}
else {
setStatus("Unsupported Platform");
}
}
if ( !oHttp ) {
setStatus("Error");
}
setStatus( "Checking existence of Report Processor " + submitURL +
" ...");

oHttp.onreadystatechange = submitOnlyIfUrlActiveCallback;
oHttp.open("HEAD", submitURL, true ); // true = async, false = sync

oHttp.send( null );
}

function submitOnlyIfUrlActiveCallback() {

if ( oHttp.readyState == 4 ) {
if ( oHttp.status == 200 ) {
setStatus("Report Processor (" + submitURL + ") Found");
document.form1.submit();
}
else {
if (oHttp.status == 404) {
setStatus("Report Processor (" + submitURL + ") Not
Found");
}
else {
setStatus("Error: " + oHttp.status );
}
}
}
}

// JScript File: DynamicMenu.js

// onclick on the menuItem return coded info on the action
// and on the cell: MenuItem.id + "," + myCell.id

var menuActions;
var currentCell;
var mouseIsOnCellorMenu;
var previousStyle;

var UserActions=new Array();
UserActions[0]= "DRILL DOWN: include next dimension";
UserActions[1]= "DRILL DOWN this value" ;
UserActions[2]= "DRILL DOWN all values";
UserActions[3]= "DRILL DOWN parent value";

UserActions[4]= "ROLL UP: exclude next dimensions";
UserActions[5]= "ROLL UP this value";
UserActions[6]= "ROLL UP all values";
UserActions[7]= "ROLL UP parent value";

document.onmousedown = mMouseDownOnDoc;

function cellClick(event, myCell) {

currentCell = myCell;

if (myCell.id != null) {

var flags = myCell.getAttribute("enabledActions");
menuActions = document.getElementById("menuActions");
var separerToken = "-"
var actionCodes = flags.split(separerToken)

var menuItemContainer =
document.getElementById("menuItemContainer");
menuItemContainer.innerHTML = "";
for ( var i = 0; i < actionCodes.length; i++ ) {
var actionCode = parseInt(actionCodes[i])

menuItemContainer.innerHTML += "<div id=" + actionCodes[i]
+
" class=menuItemStyle" +
" onmouseover='mOverMenuItem(this)'
onmouseout='mOut(this)' onclick='mClick(this)'>" +
" &nbsp " + UserActions[actionCode] + "
&nbsp</div>"
}
if (event == null) event = window.event;
var scrollTop = document.body.scrollTop ?
document.body.scrollTop : document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft ?
document.body.scrollLeft : document.documentElement.scrollLeft;
menuActions.style.left = event.clientX + scrollLeft + 'px';
menuActions.style.top = event.clientY + scrollTop + 'px';
menuActions.style.display = 'block';
}
}

function mMouseDownOnDoc() {
if (!mouseIsOnCellorMenu) {
if (menuActions != null) {
menuActions.style.display = 'none';
}
}
}

function mOver(MyDiv) {

menuActions = document.getElementById("menuActions");
if (menuActions == null) {return; } //in case page still
loading

mouseIsOnCellorMenu = true;

if (currentCell != MyDiv) {
menuActions.style.display = 'none';
currentCell = MyDiv;
}

if (previousStyle == null) {
previousStyle = MyDiv.style.backgroundColor;
MyDiv.style.backgroundColor = "#ffff00";
}
}
function mOverMenuItem(MyDiv) {

mouseIsOnCellorMenu = true;

if (previousStyle == null) {
previousStyle = MyDiv.style.backgroundColor;
MyDiv.style.backgroundColor = "#ffee22";
}
}

function mOut(MyDiv) {

mouseIsOnCellorMenu = false;

if (previousStyle != null) {
MyDiv.style.backgroundColor = previousStyle;
previousStyle = null;
}
}

function mClick(menuItem) {

// alert("Clicked " + menuItem.id + "," + currentCell.id );

var hiddenField = document.getElementById("hiddenFieldID");
hiddenField.value = menuItem.id + "," + currentCell.id;
submitURL = document.form1.action;
submitOnlyIfUrlActive();
}
Thank you very much.

[pamelafluente]

And clearly the HTML reflects the situation before Ian's suggestion to
use dynamic handlers.
After that the DIVs look like (see for instance hasHandlers="True" ):
<div id ="RG1,76,0" class="c3bg" enabledActions="4-5-6"
hasHandlers="True"
style="top:1813px;left:20px;width:88px;height:295p x;">
<div class=c3fg style="top:2px;left:2px;"><table><tr><td width=82px
height=289px valign=middleUSA </td></tr></table></div>
</div>

-P

[pamelafluente]

Laurent Bugnion ha scritto:

Hi,

Try this:

var thisLocal = this;
divElement.onclick = function( evt ) { cellClick( evt, thisLocal ) };
divElement.onmouseover = function() { doOnmouseover( thisLocal ) };
divElement.onmouseout = function() { doOnmouseout( thisLocal ) };

OK I am almost there. Here is the revised code (myCell is what we
called thisLocal ):

//CELL handlers
window.onload = addCellHandlers;

function addCellHandlers() {

var aDivs = document.getElementsByTagName("div");
var divElement;
for ( var i = 0; i < aDivs.length; i++ ) {

divElement = aDivs[i];

if ( divElement.getAttribute("hasHandlers") == "True" ) {

var myCell = this;
var evt = event;

divElement.onclick = function() { cellClick( evt, myCell )
};
divElement.onmouseover = function() { doOnmouseover( myCell
) };
divElement.onmouseout = function() { doOnmouseout( myCell )
};
}
}
}

function doOnmouseover(myCell) {

menuActions = document.getElementById("menuActions");

if (menuActions == null) {return; }
//in case page still loading

mouseIsOnCellorMenu = true;

if (currentCell != myCell) {
menuActions.style.display = 'none';
currentCell = myCell;
}

if (previousStyle == null) {
previousStyle = myCell.style.backgroundColor;
myCell.style.backgroundColor = "#ffff00";
}
}
function doOnmouseout(myCell) {

mouseIsOnCellorMenu = false;

if (previousStyle != null) {
myCell.style.backgroundColor = previousStyle;
previousStyle = null;
}
}

when the mouse over this DIV

<div id ="RG1,76,0" class="c3bg" enabledActions="4-5-6"
hasHandlers="True"
style="top:1813px;left:20px;width:88px;height:295p x;">
<div class=c3fg style="top:2px;left:2px;"><table><tr><td width=82px
height=289px valign=middle>EXXX USA</td></tr></table></div>
</div>
I get a runtime error on this line:

previousStyle = myCell.style.backgroundColor;

of the function doOnmouseover(myCell).

"myCell.style is Null or is not an Object"
There seems to be a mix up in the sender MyCell...

-P

--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch

[Laurent Bugnion]

Hi,

pa***********@libero.it wrote:

<snip>

I get a runtime error on this line:

previousStyle = myCell.style.backgroundColor;

of the function doOnmouseover(myCell).

"myCell.style is Null or is not an Object"
There seems to be a mix up in the sender MyCell...

That's why I asked you what "this" is supposed to represent ;-)

At the moment where you assign "this" to "myCell", "this" represents the
function itself, and it doesn't have a style property, which is why you
get the error.

To solve this, you must not pass "this" to the function, but rather the
divElement itself:

if ( divElement.getAttribute("hasHandlers") == "True" )
{
divElement.onclick = function( evt ) { cellClick( evt, divElement ) };
divElement.onmouseover = function() { doOnmouseover( divElement ) };
divElement.onmouseout = function() { doOnmouseout( divElement ) };
}

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch

[pamelafluente]

Richard Cornford ha scritto:

>
function cellClick(ev){
ev = ev || event; // Normalize the ev parameter so it refers to

hmmm let me understand. Is

evt = evt || event;

the same as:

if (evt == null) evt = window.event;
or

if ( window.event ) {
evt = window.event;
}
or they are different things ?

-P

// the event object if it has not been passed in.
this. <... // Use - this - to refer to the element.
}

- with:-

divElement.onclick = cellClick;

Richard.

[pamelafluente]

Laurent Bugnion ha scritto:

To solve this, you must not pass "this" to the function, but rather the
divElement itself:

if ( divElement.getAttribute("hasHandlers") == "True" )
{
divElement.onclick = function( evt ) { cellClick( evt, divElement ) };
divElement.onmouseover = function() { doOnmouseover( divElement ) };
divElement.onmouseout = function() { doOnmouseout( divElement ) };
}

I did this:

window.onload = addCellHandlers;

function addCellHandlers() {

var aDivs = document.getElementsByTagName("div");
var divElement;
for ( var i = 0; i < aDivs.length; i++ ) {

divElement = aDivs[i];

if ( divElement.getAttribute("hasHandlers") == "True" ) {

var myCell = this;
var evt = event;

divElement.onclick = function(evt) { cellClick( evt,
divElement ) };
divElement.onmouseover = function() { doOnmouseover(
divElement ) };
divElement.onmouseout = function() { doOnmouseout(
divElement ) };
}
}
}
This way the handlers do NOT get attached anymore to the DIVs. When the
mouse hover the cell nothing happen anymore (?).
Also why function(evt) has the argument and the following dont ? I am
not getting that.

-P

--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch

[Duncan Booth]

pa***********@libero.it wrote:

hmmm let me understand. Is

evt = evt || event;

the same as:

if (evt == null) evt = window.event;
or

if ( window.event ) {
evt = window.event;
}
or they are different things ?

The first of those.

"a || b" has the value "a" if "a" treated as a boolean is true, otherwise
it has the value "b".
"a && b" has the value "b" if "a" treated as a boolean is true, otherwise
it has the value "a".

The values undefined, null, +0, -0, NaN, "", and false as booleans
are all false. Other values are true.

[pamelafluente]

I have done some testing.
Actually it seems I have to correct myself.

What happens is weird. When I hover the mouse on

<div id ="RG1,76,0"

the items that "responds" is another:

<div id="statusInfo">HELLO&nbsp;</div>

infact when the mouse hovers <div id ="RG1,76,0" the other element
(statusInfo) change it's background.

There must be some mix up of elements (?)

-P

here is the Demo file: ----------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Interactive Report Demo</title>

<style type="text/css" media="screen">

..c1bg{position:absolute;background:#F0FFF0;border-width:1px;border-style:outset;}
..c1fg{position:absolute;border-width:0;color:#000000;background:transparent;text-align:left;font-family:Tahoma;font-size:11px;font-weight:bold;}
..c3bg{position:absolute;background:#FFFFF0;border-width:1px;border-style:outset;}
..c3fg{position:absolute;border-width:0;color:#008000;background:transparent;text-align:left;font-family:Tahoma;font-size:11px;font-weight:bold;}

</style>

</head>
<body>

<script language="javascript" src="Ajax_Javascript.js"></script>

<div id ="RG1,76,0" class="c3bg" enabledActions="4-5-6"
hasHandlers="True"
style="top:113px;left:20px;width:88px;height:295px ;">
<div class=c3fg style="top:2px;left:2px;"><table><tr><td width=82px
height=289px valign=middle>USA</td></tr></table></div>
</div>

<div id="menuActions" style="position:absolute; display:none">
<table >
<tr>
<td bgcolor="#eeaa66" style="width: 15px"</td>
<td id="menuItemContainer"></td>
</tr>
</table>
</div>
<div id="statusInfo">HELLO&nbsp;</div>
</body>
</html>

[pamelafluente]

Laurent Bugnion ha scritto:
Ok it seems that, after a lot of blind attempts, I got it finally it to
work.

Don't ask me "why" it works, because I have no idea !!!!!

BUT, there must be some problem with FF. Infact while all the other
events works fine, it seems that the onClick is not working with
Firefox.

When the handlers were NOT attached *dinamically* it worked.

With MSIE it *works* fine.

With FF OnClick does not seem to respond.

Any idea on the reason and how to fix it ?
Here is the current code:
//CELL handlers

function doOnclick(event, myCell) {

if (event == null) event = window.event;

currentCell = myCell;

if (myCell.id != null) {

var flags = myCell.getAttribute("enabledActions");
if (flags == null) {return} ;
menuActions = document.getElementById("menuActions");
var separerToken = "-"
var actionCodes = flags.split(separerToken)

var menuItemContainer =
document.getElementById("menuItemContainer");
menuItemContainer.innerHTML = "";
for ( var i = 0; i < actionCodes.length; i++ ) {
var actionCode = parseInt(actionCodes[i])

menuItemContainer.innerHTML += "<div id=" + actionCodes[i]
+
" class=menuItemStyle" +
" onmouseover='mOverMenuItem(this)'
onmouseout='mMouseout(this)' onclick='mClick(this)'>" +
" &nbsp " + UserActions[actionCode] + "
&nbsp</div>"
}

var scrollTop = document.body.scrollTop ?
document.body.scrollTop : document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft ?
document.body.scrollLeft : document.documentElement.scrollLeft;
menuActions.style.left = event.clientX + scrollLeft + 'px';
menuActions.style.top = event.clientY + scrollTop + 'px';
menuActions.style.display = 'block';
}
}

function doOnmouseover(myCell) {

menuActions = document.getElementById("menuActions");

if (menuActions == null) {return; }
//in case page still loading

mouseIsOnCellorMenu = true;

if (currentCell != myCell) {
menuActions.style.display = 'none';
currentCell = myCell;
}

if (previousStyle == null) {
previousStyle = myCell.style.backgroundColor;
myCell.style.backgroundColor = "#ffff00";
}
}
function doOnmouseout(myCell) {

mouseIsOnCellorMenu = false;

if (previousStyle != null) {
myCell.style.backgroundColor = previousStyle;
previousStyle = null;
}
}

window.onload = addCellHandlers;

function addCellHandlers() {

var aDivs = document.getElementsByTagName("div");
var divElement;
for ( var i = 0; i < aDivs.length; i++ ) {

divElement = aDivs[i];

if ( divElement.getAttribute("hasHandlers") == "True" ) {

divElement.onclick = function() { doOnclick(event, this) };

divElement.onmouseover = function() { doOnmouseover(this)
};
divElement.onmouseout = function() { doOnmouseout(this) };
}
}
}
------------------------------------

Thanks

[pamelafluente]

Ok finally dinamic handlers work with FF too.
Laurent was definitely right about the event argument in Function() [
he is always right :)) ].
Actually, I do not have the slightest idea why this is working and why
only for Firefox it is necessary to pass that event argument in such a
way.
I leave explaining this to Laurent, or anyone willing to enlight us
about that ... To me all this mechanism seems quite misterious at this
"beginner" time...
javascript will never finish to surprise me ....

PS
Sorry web.dev, I got mixed up. I meant this thread.

[web.dev]

pa***********@libero.it wrote:

With FF OnClick does not seem to respond.

Check below.

function doOnclick(event, myCell) {

if (event == null) event = window.event;

[...]

}

Remove the above line.

[snip]

>
function addCellHandlers() {

[...]

divElement.onclick = function() { doOnclick(event, this) };

[...]

}

Instead, do the following instead:

divElement.onclick = function(event) {
if(event == null) event = window.event;

doOnclick(event, this); };
We had to make the above modifications so that it will work with FF.
The reasoning is that FF will send the event argument to your function,
however your function is not taking in that argument, so when doOnclick
is invoked, event is null. That's why we'll add the event parameter to
your function here.

[pamelafluente]

web.dev ha scritto:

pa***********@libero.it wrote:

With FF OnClick does not seem to respond.

Check below.

function doOnclick(event, myCell) {

if (event == null) event = window.event;

[...]

}

Remove the above line.

[snip]

function addCellHandlers() {

[...]

divElement.onclick = function() { doOnclick(event, this) };

[...]

}

Instead, do the following instead:

divElement.onclick = function(event) {
if(event == null) event = window.event;

doOnclick(event, this); };

Exactly. Only one thing. In my case it seems i do not need...

divElement.onclick = function(event) {
if(event == null) event = window.event; <=== ... THIS !
doOnclick(event, this); };

while I did keep...

if (event == null) event = window.event; <=== ... THIS !

in the doOnclick handler.

Is this an error? (This way works fine to me with both browsers )

-P

[Laurent Bugnion]

Hi,

pa***********@libero.it wrote:

Ok finally dinamic handlers work with FF too.
Laurent was definitely right about the event argument in Function() [
he is always right :)) ].

You should tell that to my wife. And my kids. And my parents. And my
boss. And... oh well.

Actually, I do not have the slightest idea why this is working and why
only for Firefox it is necessary to pass that event argument in such a
way.

I'll try. The reason is that event handling is different in IE and in
Mozilla browsers.

- In IE, when an event is fired, the browser saves information about the
event in a global property named "event". To avoid confusion, I like to
refer to it with "window.event", but since it's global you can also
refer to it with "event". After storing this object, IE calls the
corresponding event handler *without any parameter*.

- In Mozilla (Netscape, Firefox...), when an event is fired, the browser
calls the corresponding event handler *with exactly one parameter*,
which is a reference to the object containing the information about the
event. This object is not stored globally.

Luckily, the object passed to the event handler is fairly compatible
between browsers, so it suffices to get a reference to that object, and
then the code can be the same for both browsers.

This is what we do here:

function eventHandler( evt )
{
// In Mozilla browsers, the parameter "evt" exists, and is a
// reference to the object I describe above.

// In IE browsers, however, evt is undefined, and we have to refer to
// the globally stored object

// There are different ways to do that:

if ( window.event )
{
// There is a global "event" object, so this is probably IE
// and evt is probably undefined. --Copy window.event to evt
// so that the code later is simplified
evt = window.event;
}

// Another way
// This means "if evt is null (or undefined), then store window.event
// in evt. If it is not null (or undefined), keep evt.
evt = evt || window.event;

// etc...

}

I leave explaining this to Laurent, or anyone willing to enlight us
about that ... To me all this mechanism seems quite misterious at this
"beginner" time...
javascript will never finish to surprise me ....

It's full of surprise, that's true.

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch

[pamelafluente]

Laurent Bugnion ha scritto:

Hi,

pa***********@libero.it wrote:

Ok finally dinamic handlers work with FF too.
Laurent was definitely right about the event argument in Function() [
he is always right :)) ].

You should tell that to my wife. And my kids. And my parents. And my
boss. And... oh well.

:)) I could write a recommendation letter, if you want, but I do not
know how authoritative and influential is gonna be :))
Thanks all for all the nice help :)

-P

>
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch