You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@struts.apache.org by gd...@cmhc-schl.gc.ca on 2005/04/27 22:11:39 UTC
[OT] DOM & JavaScript
Greetings,
Once again I call on my trusted community for insight !
I'm adding a row to a table dynamically. All is working well except for
one thing the Mouse events.
Here is the code for adding a row to the table.
There is more code that adds the cells to the table (not shown).
...
// Only add a row when changing the last row of the table
if ("s"+(rowWithData) == selectId) {
var row = table.insertRow(lastRowInTable);
var className = "rowNormal";
if (lastRowInTable % 2 == 0) {
className = "rowAlternate";
}
row.className = className;
row.setAttribute("onmouseover", "this.className = 'hilite';");
row.setAttribute("onmouseout", "this.className = '" + className +
"'");
...
}
Here is the JSP code that creates the table row (at least one row is in
the page), here the mouse events are working:
<tr valign="top" onMouseOver="this.className = 'hilite'" onMouseOut=
"this.className = '<c:out value='${rowClass}'/>'" class="<c:out value=
'${rowClass}'/>">
If I add an alert that dumps the innerHTML of the table after the
row/cells are added and I compare the two rows...
They are the same.
Why are the mouse events added dynamically not recongnized ?
BTW, using IE 6.0.2900.2180.xpsp_sp2_rtm.040803-2158
TIA,
Glenn
Re: [OT] DOM & JavaScript
Posted by gd...@cmhc-schl.gc.ca.
I also gave this a try without any succcess.
Thanks for your time and patience Frank !
(see my reply to Laurent).
- Glenn
"Frank W. Zammetti" <fz...@omnytex.com>
28/04/2005 09:10 AM
Please respond to
"Struts Users Mailing List" <us...@struts.apache.org>
To
"Struts Users Mailing List" <us...@struts.apache.org>
cc
"Struts Users Mailing List" <us...@struts.apache.org>
Subject
Re: [OT] DOM & JavaScript
Classification
How about trying one last thing... how about instead of using the row
reference you get back from insertRow(), instead do a getElementById() to
get a new reference and try setting the handlers on that.
I'm grabbing at straws here admittedly, but it might be worth a try. I've
seenstranger things :)
Incidentally, I found some code I wrote doing the same thing and although
I'm not using setAttribute (I think your right by the way about that being
the more standard-compliant way to do this) it does work. That doesn't
much help of course :) My code is virtually identical to yours too, in
fact it IS identical in the part that actually creates the table.
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
On Thu, April 28, 2005 8:12 am, gdeschen@cmhc-schl.gc.ca said:
> Okay Frank I gave it a shot and still nothing.
> I believe that the setAttribute is the proper way according to the DOM
> API.
> The other way may be supported depending on the browser.
>
> But in the end it is still not working.
> I'm thinking of an alternate solution, since the page is complete except
> for the damn mouse handlers.
> It would be a drag if I have to drop this feature since the web
> application has it in all of the pages... but this is the first dynamic
> page.
> I'm wondering if creating a global handler for mouse events would help.
>
> - Glenn
>
>
>
>
> "Frank W. Zammetti" <fz...@omnytex.com>
> 27/04/2005 05:13 PM
> Please respond to
> "Struts Users Mailing List" <us...@struts.apache.org>
>
>
> To
> Struts Users Mailing List <us...@struts.apache.org>
> cc
>
> Subject
> Re: [OT] DOM & JavaScript
> Classification
>
>
>
>
>
>
>
>
> Interesting indeed... How about trying this... change the two lines that
> dynamically add the mouse handlers to:
>
> row.onMouseOver = "this.className = 'hilite';";
> row.onMouseOut = "this.className = 'rowNormal';";
>
> I'm not 100% sure what the capitalization should be of the property your
> setting (i.e., row.onMouseOver vs. row.onmouseover vs. something else),
> but give that a shot... any time I've done dynamic table creation I
> don't remember ever using setAttribute() at all, I think I've written
> code like the above.
>
> Frank
>
> gdeschen@cmhc-schl.gc.ca wrote:
>> Curiously... the mouse events are all in lowercase when they are shown
> in
>> the dump.
>> <TBODY>
>> <TR>
>> <TD class=tableHeader colSpan=2>Effective Date</TD>
>> <TD class=tableHeader width=200>CWW Schedule Type</TD>
>> <TD class=tableHeader id=calendarAnchor align=middle
> width=74>Delete</TD>
>> <TD width=136></TD></TR>
>>
>> - - - - - This is from the JSP - - - - - - -
>> <TR class=rowNormal onmouseover="this.className = 'hilite'"
>> onmouseout="this.className = 'rowNormal'" valign="top">
>> <TD id=c00 width=154>03 January 2004 </TD>
>> <TD id=c01 width=16><A onclick="lineId='c00';
>> calendar.showCalendar('calendarAnchor', '2005-04-27'); return false;"
>> href="#"><IMG height=16 src="/hronline/images/calendar.jpg" width=16
>> border=0> </A></TD>
>> <TD id=c02><SELECT class=dropdowns2 id=s0
>> onchange="addTableRow('historyTable','s0')"
>> name=historyItems[0].scheduleTypeId><OPTION value=00></OPTION> <OPTION
>> value=01 selected>1 Week Cycle</OPTION> <OPTION value=02>2 Week
>> Cycle</OPTION> <OPTION value=03>3 Week Cycle</OPTION> <OPTION
value=04>4
>
>> Week Cycle</OPTION> <OPTION value=05>Regular Week
>> Schedule</OPTION></SELECT> </TD>
>> <TD id=c03 align=middle><INPUT type=checkbox value=on
>> name=historyItems[0].delete> </TD>
>> <TD class=rowNormal id=c04><INPUT class=dropdowns2 id=d00
>> style="VISIBILITY: hidden" size=1 value=2004-01-03
>> name=historyItems[0].startDate> </TD></TR>
>>
>> - - - - - - - This is the row added dynamically - - - - - - -
>> <TR class=rowNormal onmouseover="this.className = 'hilite'"
>> onmouseout="this.className = 'rowNormal'" valign="top">
>> <TD id=c40></TD>
>> <TD id=c41><A onclick="lineId='c40';
>> calendar.showCalendar('calendarAnchor', '2005-04-27'); return false;"
>> href="
>
http://nati02:5001/hronline/secure/WEB-INF/personal/timeAndAttendance/cWWHistory.jsp#
> "><IMG
>> height=16 src="http://nati02:5001/hronline/images/calendar.jpg"
width=16
>
>> border=0> </A></TD>
>> <TD id=c42><SELECT class=dropdowns2 id=s4
>> onchange="addTableRow('historyTable','s4')"
>> name=historyItems[4].scheduleTypeId><OPTION value=00 selected></OPTION>
>> <OPTION value=01>1 Week Cycle</OPTION> <OPTION value=02>2 Week
>> Cycle</OPTION> <OPTION value=03>3 Week Cycle</OPTION> <OPTION
value=04>4
>
>> Week Cycle</OPTION> <OPTION value=05>Regular Week
>> Schedule</OPTION></SELECT> </TD>
>> <TD align=middle><INPUT type=checkbox value=on
>> name=historyItems[4].delete> </TD>
>> <TD class=rowNormal id=c44><INPUT class=dropdowns2 id=d40
>> style="VISIBILITY: hidden" size=1 value=2004-01-03
>> name=historyItems[4].startDate> </TD></TR></TBODY>
>>
>> - Glenn
>>
>>
>>
>>
>> "Frank W. Zammetti" <fz...@omnytex.com>
>> 27/04/2005 04:27 PM
>> Please respond to
>> "Struts Users Mailing List" <us...@struts.apache.org>
>>
>>
>> To
>> Struts Users Mailing List <us...@struts.apache.org>
>> cc
>>
>> Subject
>> Re: [OT] DOM & JavaScript
>> Classification
>>
>>
>>
>>
>>
>>
>>
>>
>> Hmm... I notice that the JSP code is referencing onMouseOver, while
your
>
>> Javascript is trying to set the attribute onmouseover... I wonder if
the
>
>> capitalization difference is an issue? Certainly, if setAttribute()
>> takes case into consideration that would do it. You said the lines
were
>
>> identical when you looked, but could it be you glossed over the
>> difference in capitalization? (I may have too).
>>
>> Frank
>>
>> gdeschen@cmhc-schl.gc.ca wrote:
>>
>>>Greetings,
>>>
>>>Once again I call on my trusted community for insight !
>>>I'm adding a row to a table dynamically. All is working well except for
>>>one thing the Mouse events.
>>>
>>>Here is the code for adding a row to the table.
>>>There is more code that adds the cells to the table (not shown).
>>>...
>>>// Only add a row when changing the last row of the table
>>>if ("s"+(rowWithData) == selectId) {
>>> var row = table.insertRow(lastRowInTable);
>>> var className = "rowNormal";
>>>
>>> if (lastRowInTable % 2 == 0) {
>>> className = "rowAlternate";
>>> }
>>> row.className = className;
>>> row.setAttribute("onmouseover", "this.className = 'hilite';");
>>> row.setAttribute("onmouseout", "this.className = '" + className
>>
>> +
>>
>>>"'");
>>>...
>>>}
>>>
>>>
>>>Here is the JSP code that creates the table row (at least one row is in
>>>the page), here the mouse events are working:
>>><tr valign="top" onMouseOver="this.className = 'hilite'" onMouseOut=
>>>"this.className = '<c:out value='${rowClass}'/>'" class="<c:out value=
>>>'${rowClass}'/>">
>>>
>>>If I add an alert that dumps the innerHTML of the table after the
>>>row/cells are added and I compare the two rows...
>>>They are the same.
>>>Why are the mouse events added dynamically not recongnized ?
>>>
>>>BTW, using IE 6.0.2900.2180.xpsp_sp2_rtm.040803-2158
>>>
>>>TIA,
>>>Glenn
>>>
>>
>>
>
> --
> Frank W. Zammetti
> Founder and Chief Software Architect
> Omnytex Technologies
> http://www.omnytex.com
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] DOM & JavaScript
Posted by "Frank W. Zammetti" <fz...@omnytex.com>.
How about trying one last thing... how about instead of using the row
reference you get back from insertRow(), instead do a getElementById() to
get a new reference and try setting the handlers on that.
I'm grabbing at straws here admittedly, but it might be worth a try. I've
seenstranger things :)
Incidentally, I found some code I wrote doing the same thing and although
I'm not using setAttribute (I think your right by the way about that being
the more standard-compliant way to do this) it does work. That doesn't
much help of course :) My code is virtually identical to yours too, in
fact it IS identical in the part that actually creates the table.
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
On Thu, April 28, 2005 8:12 am, gdeschen@cmhc-schl.gc.ca said:
> Okay Frank I gave it a shot and still nothing.
> I believe that the setAttribute is the proper way according to the DOM
> API.
> The other way may be supported depending on the browser.
>
> But in the end it is still not working.
> I'm thinking of an alternate solution, since the page is complete except
> for the damn mouse handlers.
> It would be a drag if I have to drop this feature since the web
> application has it in all of the pages... but this is the first dynamic
> page.
> I'm wondering if creating a global handler for mouse events would help.
>
> - Glenn
>
>
>
>
> "Frank W. Zammetti" <fz...@omnytex.com>
> 27/04/2005 05:13 PM
> Please respond to
> "Struts Users Mailing List" <us...@struts.apache.org>
>
>
> To
> Struts Users Mailing List <us...@struts.apache.org>
> cc
>
> Subject
> Re: [OT] DOM & JavaScript
> Classification
>
>
>
>
>
>
>
>
> Interesting indeed... How about trying this... change the two lines that
> dynamically add the mouse handlers to:
>
> row.onMouseOver = "this.className = 'hilite';";
> row.onMouseOut = "this.className = 'rowNormal';";
>
> I'm not 100% sure what the capitalization should be of the property your
> setting (i.e., row.onMouseOver vs. row.onmouseover vs. something else),
> but give that a shot... any time I've done dynamic table creation I
> don't remember ever using setAttribute() at all, I think I've written
> code like the above.
>
> Frank
>
> gdeschen@cmhc-schl.gc.ca wrote:
>> Curiously... the mouse events are all in lowercase when they are shown
> in
>> the dump.
>> <TBODY>
>> <TR>
>> <TD class=tableHeader colSpan=2>Effective Date</TD>
>> <TD class=tableHeader width=200>CWW Schedule Type</TD>
>> <TD class=tableHeader id=calendarAnchor align=middle
> width=74>Delete</TD>
>> <TD width=136></TD></TR>
>>
>> - - - - - This is from the JSP - - - - - - -
>> <TR class=rowNormal onmouseover="this.className = 'hilite'"
>> onmouseout="this.className = 'rowNormal'" valign="top">
>> <TD id=c00 width=154>03 January 2004 </TD>
>> <TD id=c01 width=16><A onclick="lineId='c00';
>> calendar.showCalendar('calendarAnchor', '2005-04-27'); return false;"
>> href="#"><IMG height=16 src="/hronline/images/calendar.jpg" width=16
>> border=0> </A></TD>
>> <TD id=c02><SELECT class=dropdowns2 id=s0
>> onchange="addTableRow('historyTable','s0')"
>> name=historyItems[0].scheduleTypeId><OPTION value=00></OPTION> <OPTION
>> value=01 selected>1 Week Cycle</OPTION> <OPTION value=02>2 Week
>> Cycle</OPTION> <OPTION value=03>3 Week Cycle</OPTION> <OPTION value=04>4
>
>> Week Cycle</OPTION> <OPTION value=05>Regular Week
>> Schedule</OPTION></SELECT> </TD>
>> <TD id=c03 align=middle><INPUT type=checkbox value=on
>> name=historyItems[0].delete> </TD>
>> <TD class=rowNormal id=c04><INPUT class=dropdowns2 id=d00
>> style="VISIBILITY: hidden" size=1 value=2004-01-03
>> name=historyItems[0].startDate> </TD></TR>
>>
>> - - - - - - - This is the row added dynamically - - - - - - -
>> <TR class=rowNormal onmouseover="this.className = 'hilite'"
>> onmouseout="this.className = 'rowNormal'" valign="top">
>> <TD id=c40></TD>
>> <TD id=c41><A onclick="lineId='c40';
>> calendar.showCalendar('calendarAnchor', '2005-04-27'); return false;"
>> href="
> http://nati02:5001/hronline/secure/WEB-INF/personal/timeAndAttendance/cWWHistory.jsp#
> "><IMG
>> height=16 src="http://nati02:5001/hronline/images/calendar.jpg" width=16
>
>> border=0> </A></TD>
>> <TD id=c42><SELECT class=dropdowns2 id=s4
>> onchange="addTableRow('historyTable','s4')"
>> name=historyItems[4].scheduleTypeId><OPTION value=00 selected></OPTION>
>> <OPTION value=01>1 Week Cycle</OPTION> <OPTION value=02>2 Week
>> Cycle</OPTION> <OPTION value=03>3 Week Cycle</OPTION> <OPTION value=04>4
>
>> Week Cycle</OPTION> <OPTION value=05>Regular Week
>> Schedule</OPTION></SELECT> </TD>
>> <TD align=middle><INPUT type=checkbox value=on
>> name=historyItems[4].delete> </TD>
>> <TD class=rowNormal id=c44><INPUT class=dropdowns2 id=d40
>> style="VISIBILITY: hidden" size=1 value=2004-01-03
>> name=historyItems[4].startDate> </TD></TR></TBODY>
>>
>> - Glenn
>>
>>
>>
>>
>> "Frank W. Zammetti" <fz...@omnytex.com>
>> 27/04/2005 04:27 PM
>> Please respond to
>> "Struts Users Mailing List" <us...@struts.apache.org>
>>
>>
>> To
>> Struts Users Mailing List <us...@struts.apache.org>
>> cc
>>
>> Subject
>> Re: [OT] DOM & JavaScript
>> Classification
>>
>>
>>
>>
>>
>>
>>
>>
>> Hmm... I notice that the JSP code is referencing onMouseOver, while your
>
>> Javascript is trying to set the attribute onmouseover... I wonder if the
>
>> capitalization difference is an issue? Certainly, if setAttribute()
>> takes case into consideration that would do it. You said the lines were
>
>> identical when you looked, but could it be you glossed over the
>> difference in capitalization? (I may have too).
>>
>> Frank
>>
>> gdeschen@cmhc-schl.gc.ca wrote:
>>
>>>Greetings,
>>>
>>>Once again I call on my trusted community for insight !
>>>I'm adding a row to a table dynamically. All is working well except for
>>>one thing the Mouse events.
>>>
>>>Here is the code for adding a row to the table.
>>>There is more code that adds the cells to the table (not shown).
>>>...
>>>// Only add a row when changing the last row of the table
>>>if ("s"+(rowWithData) == selectId) {
>>> var row = table.insertRow(lastRowInTable);
>>> var className = "rowNormal";
>>>
>>> if (lastRowInTable % 2 == 0) {
>>> className = "rowAlternate";
>>> }
>>> row.className = className;
>>> row.setAttribute("onmouseover", "this.className = 'hilite';");
>>> row.setAttribute("onmouseout", "this.className = '" + className
>>
>> +
>>
>>>"'");
>>>...
>>>}
>>>
>>>
>>>Here is the JSP code that creates the table row (at least one row is in
>>>the page), here the mouse events are working:
>>><tr valign="top" onMouseOver="this.className = 'hilite'" onMouseOut=
>>>"this.className = '<c:out value='${rowClass}'/>'" class="<c:out value=
>>>'${rowClass}'/>">
>>>
>>>If I add an alert that dumps the innerHTML of the table after the
>>>row/cells are added and I compare the two rows...
>>>They are the same.
>>>Why are the mouse events added dynamically not recongnized ?
>>>
>>>BTW, using IE 6.0.2900.2180.xpsp_sp2_rtm.040803-2158
>>>
>>>TIA,
>>>Glenn
>>>
>>
>>
>
> --
> Frank W. Zammetti
> Founder and Chief Software Architect
> Omnytex Technologies
> http://www.omnytex.com
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] DOM & JavaScript
Posted by gd...@cmhc-schl.gc.ca.
Okay Frank I gave it a shot and still nothing.
I believe that the setAttribute is the proper way according to the DOM
API.
The other way may be supported depending on the browser.
But in the end it is still not working.
I'm thinking of an alternate solution, since the page is complete except
for the damn mouse handlers.
It would be a drag if I have to drop this feature since the web
application has it in all of the pages... but this is the first dynamic
page.
I'm wondering if creating a global handler for mouse events would help.
- Glenn
"Frank W. Zammetti" <fz...@omnytex.com>
27/04/2005 05:13 PM
Please respond to
"Struts Users Mailing List" <us...@struts.apache.org>
To
Struts Users Mailing List <us...@struts.apache.org>
cc
Subject
Re: [OT] DOM & JavaScript
Classification
Interesting indeed... How about trying this... change the two lines that
dynamically add the mouse handlers to:
row.onMouseOver = "this.className = 'hilite';";
row.onMouseOut = "this.className = 'rowNormal';";
I'm not 100% sure what the capitalization should be of the property your
setting (i.e., row.onMouseOver vs. row.onmouseover vs. something else),
but give that a shot... any time I've done dynamic table creation I
don't remember ever using setAttribute() at all, I think I've written
code like the above.
Frank
gdeschen@cmhc-schl.gc.ca wrote:
> Curiously... the mouse events are all in lowercase when they are shown
in
> the dump.
> <TBODY>
> <TR>
> <TD class=tableHeader colSpan=2>Effective Date</TD>
> <TD class=tableHeader width=200>CWW Schedule Type</TD>
> <TD class=tableHeader id=calendarAnchor align=middle
width=74>Delete</TD>
> <TD width=136></TD></TR>
>
> - - - - - This is from the JSP - - - - - - -
> <TR class=rowNormal onmouseover="this.className = 'hilite'"
> onmouseout="this.className = 'rowNormal'" valign="top">
> <TD id=c00 width=154>03 January 2004 </TD>
> <TD id=c01 width=16><A onclick="lineId='c00';
> calendar.showCalendar('calendarAnchor', '2005-04-27'); return false;"
> href="#"><IMG height=16 src="/hronline/images/calendar.jpg" width=16
> border=0> </A></TD>
> <TD id=c02><SELECT class=dropdowns2 id=s0
> onchange="addTableRow('historyTable','s0')"
> name=historyItems[0].scheduleTypeId><OPTION value=00></OPTION> <OPTION
> value=01 selected>1 Week Cycle</OPTION> <OPTION value=02>2 Week
> Cycle</OPTION> <OPTION value=03>3 Week Cycle</OPTION> <OPTION value=04>4
> Week Cycle</OPTION> <OPTION value=05>Regular Week
> Schedule</OPTION></SELECT> </TD>
> <TD id=c03 align=middle><INPUT type=checkbox value=on
> name=historyItems[0].delete> </TD>
> <TD class=rowNormal id=c04><INPUT class=dropdowns2 id=d00
> style="VISIBILITY: hidden" size=1 value=2004-01-03
> name=historyItems[0].startDate> </TD></TR>
>
> - - - - - - - This is the row added dynamically - - - - - - -
> <TR class=rowNormal onmouseover="this.className = 'hilite'"
> onmouseout="this.className = 'rowNormal'" valign="top">
> <TD id=c40></TD>
> <TD id=c41><A onclick="lineId='c40';
> calendar.showCalendar('calendarAnchor', '2005-04-27'); return false;"
> href="
http://nati02:5001/hronline/secure/WEB-INF/personal/timeAndAttendance/cWWHistory.jsp#
"><IMG
> height=16 src="http://nati02:5001/hronline/images/calendar.jpg" width=16
> border=0> </A></TD>
> <TD id=c42><SELECT class=dropdowns2 id=s4
> onchange="addTableRow('historyTable','s4')"
> name=historyItems[4].scheduleTypeId><OPTION value=00 selected></OPTION>
> <OPTION value=01>1 Week Cycle</OPTION> <OPTION value=02>2 Week
> Cycle</OPTION> <OPTION value=03>3 Week Cycle</OPTION> <OPTION value=04>4
> Week Cycle</OPTION> <OPTION value=05>Regular Week
> Schedule</OPTION></SELECT> </TD>
> <TD align=middle><INPUT type=checkbox value=on
> name=historyItems[4].delete> </TD>
> <TD class=rowNormal id=c44><INPUT class=dropdowns2 id=d40
> style="VISIBILITY: hidden" size=1 value=2004-01-03
> name=historyItems[4].startDate> </TD></TR></TBODY>
>
> - Glenn
>
>
>
>
> "Frank W. Zammetti" <fz...@omnytex.com>
> 27/04/2005 04:27 PM
> Please respond to
> "Struts Users Mailing List" <us...@struts.apache.org>
>
>
> To
> Struts Users Mailing List <us...@struts.apache.org>
> cc
>
> Subject
> Re: [OT] DOM & JavaScript
> Classification
>
>
>
>
>
>
>
>
> Hmm... I notice that the JSP code is referencing onMouseOver, while your
> Javascript is trying to set the attribute onmouseover... I wonder if the
> capitalization difference is an issue? Certainly, if setAttribute()
> takes case into consideration that would do it. You said the lines were
> identical when you looked, but could it be you glossed over the
> difference in capitalization? (I may have too).
>
> Frank
>
> gdeschen@cmhc-schl.gc.ca wrote:
>
>>Greetings,
>>
>>Once again I call on my trusted community for insight !
>>I'm adding a row to a table dynamically. All is working well except for
>>one thing the Mouse events.
>>
>>Here is the code for adding a row to the table.
>>There is more code that adds the cells to the table (not shown).
>>...
>>// Only add a row when changing the last row of the table
>>if ("s"+(rowWithData) == selectId) {
>> var row = table.insertRow(lastRowInTable);
>> var className = "rowNormal";
>>
>> if (lastRowInTable % 2 == 0) {
>> className = "rowAlternate";
>> }
>> row.className = className;
>> row.setAttribute("onmouseover", "this.className = 'hilite';");
>> row.setAttribute("onmouseout", "this.className = '" + className
>
> +
>
>>"'");
>>...
>>}
>>
>>
>>Here is the JSP code that creates the table row (at least one row is in
>>the page), here the mouse events are working:
>><tr valign="top" onMouseOver="this.className = 'hilite'" onMouseOut=
>>"this.className = '<c:out value='${rowClass}'/>'" class="<c:out value=
>>'${rowClass}'/>">
>>
>>If I add an alert that dumps the innerHTML of the table after the
>>row/cells are added and I compare the two rows...
>>They are the same.
>>Why are the mouse events added dynamically not recongnized ?
>>
>>BTW, using IE 6.0.2900.2180.xpsp_sp2_rtm.040803-2158
>>
>>TIA,
>>Glenn
>>
>
>
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] DOM & JavaScript
Posted by "Frank W. Zammetti" <fz...@omnytex.com>.
Interesting indeed... How about trying this... change the two lines that
dynamically add the mouse handlers to:
row.onMouseOver = "this.className = 'hilite';";
row.onMouseOut = "this.className = 'rowNormal';";
I'm not 100% sure what the capitalization should be of the property your
setting (i.e., row.onMouseOver vs. row.onmouseover vs. something else),
but give that a shot... any time I've done dynamic table creation I
don't remember ever using setAttribute() at all, I think I've written
code like the above.
Frank
gdeschen@cmhc-schl.gc.ca wrote:
> Curiously... the mouse events are all in lowercase when they are shown in
> the dump.
> <TBODY>
> <TR>
> <TD class=tableHeader colSpan=2>Effective Date</TD>
> <TD class=tableHeader width=200>CWW Schedule Type</TD>
> <TD class=tableHeader id=calendarAnchor align=middle width=74>Delete</TD>
> <TD width=136></TD></TR>
>
> - - - - - This is from the JSP - - - - - - -
> <TR class=rowNormal onmouseover="this.className = 'hilite'"
> onmouseout="this.className = 'rowNormal'" valign="top">
> <TD id=c00 width=154>03 January 2004 </TD>
> <TD id=c01 width=16><A onclick="lineId='c00';
> calendar.showCalendar('calendarAnchor', '2005-04-27'); return false;"
> href="#"><IMG height=16 src="/hronline/images/calendar.jpg" width=16
> border=0> </A></TD>
> <TD id=c02><SELECT class=dropdowns2 id=s0
> onchange="addTableRow('historyTable','s0')"
> name=historyItems[0].scheduleTypeId><OPTION value=00></OPTION> <OPTION
> value=01 selected>1 Week Cycle</OPTION> <OPTION value=02>2 Week
> Cycle</OPTION> <OPTION value=03>3 Week Cycle</OPTION> <OPTION value=04>4
> Week Cycle</OPTION> <OPTION value=05>Regular Week
> Schedule</OPTION></SELECT> </TD>
> <TD id=c03 align=middle><INPUT type=checkbox value=on
> name=historyItems[0].delete> </TD>
> <TD class=rowNormal id=c04><INPUT class=dropdowns2 id=d00
> style="VISIBILITY: hidden" size=1 value=2004-01-03
> name=historyItems[0].startDate> </TD></TR>
>
> - - - - - - - This is the row added dynamically - - - - - - -
> <TR class=rowNormal onmouseover="this.className = 'hilite'"
> onmouseout="this.className = 'rowNormal'" valign="top">
> <TD id=c40></TD>
> <TD id=c41><A onclick="lineId='c40';
> calendar.showCalendar('calendarAnchor', '2005-04-27'); return false;"
> href="http://nati02:5001/hronline/secure/WEB-INF/personal/timeAndAttendance/cWWHistory.jsp#"><IMG
> height=16 src="http://nati02:5001/hronline/images/calendar.jpg" width=16
> border=0> </A></TD>
> <TD id=c42><SELECT class=dropdowns2 id=s4
> onchange="addTableRow('historyTable','s4')"
> name=historyItems[4].scheduleTypeId><OPTION value=00 selected></OPTION>
> <OPTION value=01>1 Week Cycle</OPTION> <OPTION value=02>2 Week
> Cycle</OPTION> <OPTION value=03>3 Week Cycle</OPTION> <OPTION value=04>4
> Week Cycle</OPTION> <OPTION value=05>Regular Week
> Schedule</OPTION></SELECT> </TD>
> <TD align=middle><INPUT type=checkbox value=on
> name=historyItems[4].delete> </TD>
> <TD class=rowNormal id=c44><INPUT class=dropdowns2 id=d40
> style="VISIBILITY: hidden" size=1 value=2004-01-03
> name=historyItems[4].startDate> </TD></TR></TBODY>
>
> - Glenn
>
>
>
>
> "Frank W. Zammetti" <fz...@omnytex.com>
> 27/04/2005 04:27 PM
> Please respond to
> "Struts Users Mailing List" <us...@struts.apache.org>
>
>
> To
> Struts Users Mailing List <us...@struts.apache.org>
> cc
>
> Subject
> Re: [OT] DOM & JavaScript
> Classification
>
>
>
>
>
>
>
>
> Hmm... I notice that the JSP code is referencing onMouseOver, while your
> Javascript is trying to set the attribute onmouseover... I wonder if the
> capitalization difference is an issue? Certainly, if setAttribute()
> takes case into consideration that would do it. You said the lines were
> identical when you looked, but could it be you glossed over the
> difference in capitalization? (I may have too).
>
> Frank
>
> gdeschen@cmhc-schl.gc.ca wrote:
>
>>Greetings,
>>
>>Once again I call on my trusted community for insight !
>>I'm adding a row to a table dynamically. All is working well except for
>>one thing the Mouse events.
>>
>>Here is the code for adding a row to the table.
>>There is more code that adds the cells to the table (not shown).
>>...
>>// Only add a row when changing the last row of the table
>>if ("s"+(rowWithData) == selectId) {
>> var row = table.insertRow(lastRowInTable);
>> var className = "rowNormal";
>>
>> if (lastRowInTable % 2 == 0) {
>> className = "rowAlternate";
>> }
>> row.className = className;
>> row.setAttribute("onmouseover", "this.className = 'hilite';");
>> row.setAttribute("onmouseout", "this.className = '" + className
>
> +
>
>>"'");
>>...
>>}
>>
>>
>>Here is the JSP code that creates the table row (at least one row is in
>>the page), here the mouse events are working:
>><tr valign="top" onMouseOver="this.className = 'hilite'" onMouseOut=
>>"this.className = '<c:out value='${rowClass}'/>'" class="<c:out value=
>>'${rowClass}'/>">
>>
>>If I add an alert that dumps the innerHTML of the table after the
>>row/cells are added and I compare the two rows...
>>They are the same.
>>Why are the mouse events added dynamically not recongnized ?
>>
>>BTW, using IE 6.0.2900.2180.xpsp_sp2_rtm.040803-2158
>>
>>TIA,
>>Glenn
>>
>
>
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] DOM & JavaScript
Posted by gd...@cmhc-schl.gc.ca.
Curiously... the mouse events are all in lowercase when they are shown in
the dump.
<TBODY>
<TR>
<TD class=tableHeader colSpan=2>Effective Date</TD>
<TD class=tableHeader width=200>CWW Schedule Type</TD>
<TD class=tableHeader id=calendarAnchor align=middle width=74>Delete</TD>
<TD width=136></TD></TR>
- - - - - This is from the JSP - - - - - - -
<TR class=rowNormal onmouseover="this.className = 'hilite'"
onmouseout="this.className = 'rowNormal'" valign="top">
<TD id=c00 width=154>03 January 2004 </TD>
<TD id=c01 width=16><A onclick="lineId='c00';
calendar.showCalendar('calendarAnchor', '2005-04-27'); return false;"
href="#"><IMG height=16 src="/hronline/images/calendar.jpg" width=16
border=0> </A></TD>
<TD id=c02><SELECT class=dropdowns2 id=s0
onchange="addTableRow('historyTable','s0')"
name=historyItems[0].scheduleTypeId><OPTION value=00></OPTION> <OPTION
value=01 selected>1 Week Cycle</OPTION> <OPTION value=02>2 Week
Cycle</OPTION> <OPTION value=03>3 Week Cycle</OPTION> <OPTION value=04>4
Week Cycle</OPTION> <OPTION value=05>Regular Week
Schedule</OPTION></SELECT> </TD>
<TD id=c03 align=middle><INPUT type=checkbox value=on
name=historyItems[0].delete> </TD>
<TD class=rowNormal id=c04><INPUT class=dropdowns2 id=d00
style="VISIBILITY: hidden" size=1 value=2004-01-03
name=historyItems[0].startDate> </TD></TR>
- - - - - - - This is the row added dynamically - - - - - - -
<TR class=rowNormal onmouseover="this.className = 'hilite'"
onmouseout="this.className = 'rowNormal'" valign="top">
<TD id=c40></TD>
<TD id=c41><A onclick="lineId='c40';
calendar.showCalendar('calendarAnchor', '2005-04-27'); return false;"
href="http://nati02:5001/hronline/secure/WEB-INF/personal/timeAndAttendance/cWWHistory.jsp#"><IMG
height=16 src="http://nati02:5001/hronline/images/calendar.jpg" width=16
border=0> </A></TD>
<TD id=c42><SELECT class=dropdowns2 id=s4
onchange="addTableRow('historyTable','s4')"
name=historyItems[4].scheduleTypeId><OPTION value=00 selected></OPTION>
<OPTION value=01>1 Week Cycle</OPTION> <OPTION value=02>2 Week
Cycle</OPTION> <OPTION value=03>3 Week Cycle</OPTION> <OPTION value=04>4
Week Cycle</OPTION> <OPTION value=05>Regular Week
Schedule</OPTION></SELECT> </TD>
<TD align=middle><INPUT type=checkbox value=on
name=historyItems[4].delete> </TD>
<TD class=rowNormal id=c44><INPUT class=dropdowns2 id=d40
style="VISIBILITY: hidden" size=1 value=2004-01-03
name=historyItems[4].startDate> </TD></TR></TBODY>
- Glenn
"Frank W. Zammetti" <fz...@omnytex.com>
27/04/2005 04:27 PM
Please respond to
"Struts Users Mailing List" <us...@struts.apache.org>
To
Struts Users Mailing List <us...@struts.apache.org>
cc
Subject
Re: [OT] DOM & JavaScript
Classification
Hmm... I notice that the JSP code is referencing onMouseOver, while your
Javascript is trying to set the attribute onmouseover... I wonder if the
capitalization difference is an issue? Certainly, if setAttribute()
takes case into consideration that would do it. You said the lines were
identical when you looked, but could it be you glossed over the
difference in capitalization? (I may have too).
Frank
gdeschen@cmhc-schl.gc.ca wrote:
> Greetings,
>
> Once again I call on my trusted community for insight !
> I'm adding a row to a table dynamically. All is working well except for
> one thing the Mouse events.
>
> Here is the code for adding a row to the table.
> There is more code that adds the cells to the table (not shown).
> ...
> // Only add a row when changing the last row of the table
> if ("s"+(rowWithData) == selectId) {
> var row = table.insertRow(lastRowInTable);
> var className = "rowNormal";
>
> if (lastRowInTable % 2 == 0) {
> className = "rowAlternate";
> }
> row.className = className;
> row.setAttribute("onmouseover", "this.className = 'hilite';");
> row.setAttribute("onmouseout", "this.className = '" + className
+
> "'");
> ...
> }
>
>
> Here is the JSP code that creates the table row (at least one row is in
> the page), here the mouse events are working:
> <tr valign="top" onMouseOver="this.className = 'hilite'" onMouseOut=
> "this.className = '<c:out value='${rowClass}'/>'" class="<c:out value=
> '${rowClass}'/>">
>
> If I add an alert that dumps the innerHTML of the table after the
> row/cells are added and I compare the two rows...
> They are the same.
> Why are the mouse events added dynamically not recongnized ?
>
> BTW, using IE 6.0.2900.2180.xpsp_sp2_rtm.040803-2158
>
> TIA,
> Glenn
>
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] DOM & JavaScript
Posted by "Frank W. Zammetti" <fz...@omnytex.com>.
Hmm... I notice that the JSP code is referencing onMouseOver, while your
Javascript is trying to set the attribute onmouseover... I wonder if the
capitalization difference is an issue? Certainly, if setAttribute()
takes case into consideration that would do it. You said the lines were
identical when you looked, but could it be you glossed over the
difference in capitalization? (I may have too).
Frank
gdeschen@cmhc-schl.gc.ca wrote:
> Greetings,
>
> Once again I call on my trusted community for insight !
> I'm adding a row to a table dynamically. All is working well except for
> one thing the Mouse events.
>
> Here is the code for adding a row to the table.
> There is more code that adds the cells to the table (not shown).
> ...
> // Only add a row when changing the last row of the table
> if ("s"+(rowWithData) == selectId) {
> var row = table.insertRow(lastRowInTable);
> var className = "rowNormal";
>
> if (lastRowInTable % 2 == 0) {
> className = "rowAlternate";
> }
> row.className = className;
> row.setAttribute("onmouseover", "this.className = 'hilite';");
> row.setAttribute("onmouseout", "this.className = '" + className +
> "'");
> ...
> }
>
>
> Here is the JSP code that creates the table row (at least one row is in
> the page), here the mouse events are working:
> <tr valign="top" onMouseOver="this.className = 'hilite'" onMouseOut=
> "this.className = '<c:out value='${rowClass}'/>'" class="<c:out value=
> '${rowClass}'/>">
>
> If I add an alert that dumps the innerHTML of the table after the
> row/cells are added and I compare the two rows...
> They are the same.
> Why are the mouse events added dynamically not recongnized ?
>
> BTW, using IE 6.0.2900.2180.xpsp_sp2_rtm.040803-2158
>
> TIA,
> Glenn
>
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] DOM & JavaScript
Posted by gd...@cmhc-schl.gc.ca.
Well thanks again !
I did remember that thread and did not have the time to follow its lengthy
trail.
- Glenn
"Frank W. Zammetti" <fz...@omnytex.com>
28/04/2005 12:54 PM
Please respond to
"Struts Users Mailing List" <us...@struts.apache.org>
To
"Struts Users Mailing List" <us...@struts.apache.org>
cc
"Struts Users Mailing List" <us...@struts.apache.org>
Subject
Re: [OT] DOM & JavaScript
Classification
Actually, I'm not entirely sure :) I can't remember ever using an
anonymous function in JS myself frankly, but I remembered a sample that
Martin posted a week or so ago during our discussion on Ajax, and it just
kind of clicked!
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
On Thu, April 28, 2005 12:51 pm, gdeschen@cmhc-schl.gc.ca said:
> Excellent Frank, thanks a million !!!
> What was your inspiration for this ?
>
> - Glenn
>
>
>
>
> "Frank W. Zammetti" <fz...@omnytex.com>
> 28/04/2005 10:47 AM
> Please respond to
> "Struts Users Mailing List" <us...@struts.apache.org>
>
>
> To
> "Struts Users Mailing List" <us...@struts.apache.org>
> cc
> "Struts Users Mailing List" <us...@struts.apache.org>
> Subject
> Re: [OT] DOM & JavaScript
> Classification
>
>
>
>
>
>
>
>
> Ah, got it! You can use an anonymous function... The suggestion of
> setting a common handler is fine except that you will have to use
> getElementById to get a reference to the element to change... using an
> anonymous function you have access to the this keyword, so it's cleaner.
> Here's a complete working page (at least in IE)...
>
> <html>
> <head>
> <title>Test</title>
> <style>
> .hilite { background-color:#ff0000; }
> .normal { background-color:#ffffff; }
> </style>
> <script>
> function createTable(table) {
> row = table.insertRow();
> row.setAttribute("className", "normal");
> row.onmouseover = function() { this.className='hilite'; }
> row.onmouseout = function() { this.className='normal'; }
> cell = row.insertCell();
> cell.innerHTML = "new1";
> cell = row.insertCell();
> cell.innerHTML = "new2";
> }
> </script>
> <head>
> <body>
> <table id="theTable" border="1">
> <tr onMouseOver="this.className='hilite';"
> onMouseOut="this.className='normal';">
> <td>dummy1</td><td>dummy2</td>
> </tr>
> </table>
> <input type="button" onClick="createTable(theTable);" value="Add Row">
> </body></html>
>
> --
> Frank W. Zammetti
> Founder and Chief Software Architect
> Omnytex Technologies
> http://www.omnytex.com
>
> On Thu, April 28, 2005 9:58 am, gdeschen@cmhc-schl.gc.ca said:
>> Merci Laurent !
>>
>> Okay so then when you say that it must be functions..
>> I presume that the HTML with coded attributes such as onMouseOver and
>> onMouseOut... in IE the browser parses the data and internally creates
>> functions to handle the mouse events.
>> So when I try to dynamically modify the DOM for IE... I must recreate
> the
>> mouse handlers.
>> Would this be a valid way of describing the situation?
>>
>> I must now understand the element hierarchy along with the event firing
>> sequence...
>> Since I'd like to hilite the row... now it is hiliting the cell of a
>> row... :(
>>
>> - Glenn
>>
>>
>>
>> Laurent <lg...@free.fr>
>> 28/04/2005 09:11 AM
>> Please respond to
>> "Struts Users Mailing List" <us...@struts.apache.org>
>>
>>
>> To
>> Struts Users Mailing List <us...@struts.apache.org>
>> cc
>>
>> Subject
>> Re: [OT] DOM & JavaScript
>> Classification
>>
>>
>>
>>
>>
>>
>>
>>
>> gdeschen@cmhc-schl.gc.ca wrote:
>>> // Only add a row when changing the last row of the table
>>> if ("s"+(rowWithData) == selectId) {
>>> var row = table.insertRow(lastRowInTable);
>>> var className = "rowNormal";
>>>
>>> if (lastRowInTable % 2 == 0) {
>>> className = "rowAlternate";
>>> }
>>> row.className = className;
>>> row.setAttribute("onmouseover", "this.className = 'hilite';");
>>> row.setAttribute("onmouseout", "this.className = '" +
className
>> +
>>> "'");
>>
>>
>> That's not how it works (not in IE at least). The event attributes'
>> values should be event listeners (i.e. functions), not strings of
>> javascript code.
>>
>> Try this:
>>
>> function changeClassName(e) {
>> if (!e) e=window.event;
>> getEventTarget(e).setAttribute("class", "hilite"); // DOM-compliant
>> getEventTarget(e).setAttribute("className", "hilite"); // MSIE
>> }
>>
>> row.onmouseover = changeClassName; // without quotes nor parentheses
>>
>> function getEventTarget(e) {
>> if (e.srcElement) return e.srcElement;
>> else return e.currentTarget;
>> }
>>
>> Note: the code above aims to be cross-browser, as IE behaves completely
>> differently from any other browser.
>>
>> BTW, all event attributes are *lower case*: onmouseover, onmouseout
(not
>> onMouseOver...)
>>
>> Hope this helps.
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
>> For additional commands, e-mail: user-help@struts.apache.org
>>
>>
>>
>>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] DOM & JavaScript
Posted by "Frank W. Zammetti" <fz...@omnytex.com>.
Actually, I'm not entirely sure :) I can't remember ever using an
anonymous function in JS myself frankly, but I remembered a sample that
Martin posted a week or so ago during our discussion on Ajax, and it just
kind of clicked!
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
On Thu, April 28, 2005 12:51 pm, gdeschen@cmhc-schl.gc.ca said:
> Excellent Frank, thanks a million !!!
> What was your inspiration for this ?
>
> - Glenn
>
>
>
>
> "Frank W. Zammetti" <fz...@omnytex.com>
> 28/04/2005 10:47 AM
> Please respond to
> "Struts Users Mailing List" <us...@struts.apache.org>
>
>
> To
> "Struts Users Mailing List" <us...@struts.apache.org>
> cc
> "Struts Users Mailing List" <us...@struts.apache.org>
> Subject
> Re: [OT] DOM & JavaScript
> Classification
>
>
>
>
>
>
>
>
> Ah, got it! You can use an anonymous function... The suggestion of
> setting a common handler is fine except that you will have to use
> getElementById to get a reference to the element to change... using an
> anonymous function you have access to the this keyword, so it's cleaner.
> Here's a complete working page (at least in IE)...
>
> <html>
> <head>
> <title>Test</title>
> <style>
> .hilite { background-color:#ff0000; }
> .normal { background-color:#ffffff; }
> </style>
> <script>
> function createTable(table) {
> row = table.insertRow();
> row.setAttribute("className", "normal");
> row.onmouseover = function() { this.className='hilite'; }
> row.onmouseout = function() { this.className='normal'; }
> cell = row.insertCell();
> cell.innerHTML = "new1";
> cell = row.insertCell();
> cell.innerHTML = "new2";
> }
> </script>
> <head>
> <body>
> <table id="theTable" border="1">
> <tr onMouseOver="this.className='hilite';"
> onMouseOut="this.className='normal';">
> <td>dummy1</td><td>dummy2</td>
> </tr>
> </table>
> <input type="button" onClick="createTable(theTable);" value="Add Row">
> </body></html>
>
> --
> Frank W. Zammetti
> Founder and Chief Software Architect
> Omnytex Technologies
> http://www.omnytex.com
>
> On Thu, April 28, 2005 9:58 am, gdeschen@cmhc-schl.gc.ca said:
>> Merci Laurent !
>>
>> Okay so then when you say that it must be functions..
>> I presume that the HTML with coded attributes such as onMouseOver and
>> onMouseOut... in IE the browser parses the data and internally creates
>> functions to handle the mouse events.
>> So when I try to dynamically modify the DOM for IE... I must recreate
> the
>> mouse handlers.
>> Would this be a valid way of describing the situation?
>>
>> I must now understand the element hierarchy along with the event firing
>> sequence...
>> Since I'd like to hilite the row... now it is hiliting the cell of a
>> row... :(
>>
>> - Glenn
>>
>>
>>
>> Laurent <lg...@free.fr>
>> 28/04/2005 09:11 AM
>> Please respond to
>> "Struts Users Mailing List" <us...@struts.apache.org>
>>
>>
>> To
>> Struts Users Mailing List <us...@struts.apache.org>
>> cc
>>
>> Subject
>> Re: [OT] DOM & JavaScript
>> Classification
>>
>>
>>
>>
>>
>>
>>
>>
>> gdeschen@cmhc-schl.gc.ca wrote:
>>> // Only add a row when changing the last row of the table
>>> if ("s"+(rowWithData) == selectId) {
>>> var row = table.insertRow(lastRowInTable);
>>> var className = "rowNormal";
>>>
>>> if (lastRowInTable % 2 == 0) {
>>> className = "rowAlternate";
>>> }
>>> row.className = className;
>>> row.setAttribute("onmouseover", "this.className = 'hilite';");
>>> row.setAttribute("onmouseout", "this.className = '" + className
>> +
>>> "'");
>>
>>
>> That's not how it works (not in IE at least). The event attributes'
>> values should be event listeners (i.e. functions), not strings of
>> javascript code.
>>
>> Try this:
>>
>> function changeClassName(e) {
>> if (!e) e=window.event;
>> getEventTarget(e).setAttribute("class", "hilite"); // DOM-compliant
>> getEventTarget(e).setAttribute("className", "hilite"); // MSIE
>> }
>>
>> row.onmouseover = changeClassName; // without quotes nor parentheses
>>
>> function getEventTarget(e) {
>> if (e.srcElement) return e.srcElement;
>> else return e.currentTarget;
>> }
>>
>> Note: the code above aims to be cross-browser, as IE behaves completely
>> differently from any other browser.
>>
>> BTW, all event attributes are *lower case*: onmouseover, onmouseout (not
>> onMouseOver...)
>>
>> Hope this helps.
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
>> For additional commands, e-mail: user-help@struts.apache.org
>>
>>
>>
>>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] DOM & JavaScript
Posted by gd...@cmhc-schl.gc.ca.
Excellent Frank, thanks a million !!!
What was your inspiration for this ?
- Glenn
"Frank W. Zammetti" <fz...@omnytex.com>
28/04/2005 10:47 AM
Please respond to
"Struts Users Mailing List" <us...@struts.apache.org>
To
"Struts Users Mailing List" <us...@struts.apache.org>
cc
"Struts Users Mailing List" <us...@struts.apache.org>
Subject
Re: [OT] DOM & JavaScript
Classification
Ah, got it! You can use an anonymous function... The suggestion of
setting a common handler is fine except that you will have to use
getElementById to get a reference to the element to change... using an
anonymous function you have access to the this keyword, so it's cleaner.
Here's a complete working page (at least in IE)...
<html>
<head>
<title>Test</title>
<style>
.hilite { background-color:#ff0000; }
.normal { background-color:#ffffff; }
</style>
<script>
function createTable(table) {
row = table.insertRow();
row.setAttribute("className", "normal");
row.onmouseover = function() { this.className='hilite'; }
row.onmouseout = function() { this.className='normal'; }
cell = row.insertCell();
cell.innerHTML = "new1";
cell = row.insertCell();
cell.innerHTML = "new2";
}
</script>
<head>
<body>
<table id="theTable" border="1">
<tr onMouseOver="this.className='hilite';"
onMouseOut="this.className='normal';">
<td>dummy1</td><td>dummy2</td>
</tr>
</table>
<input type="button" onClick="createTable(theTable);" value="Add Row">
</body></html>
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
On Thu, April 28, 2005 9:58 am, gdeschen@cmhc-schl.gc.ca said:
> Merci Laurent !
>
> Okay so then when you say that it must be functions..
> I presume that the HTML with coded attributes such as onMouseOver and
> onMouseOut... in IE the browser parses the data and internally creates
> functions to handle the mouse events.
> So when I try to dynamically modify the DOM for IE... I must recreate
the
> mouse handlers.
> Would this be a valid way of describing the situation?
>
> I must now understand the element hierarchy along with the event firing
> sequence...
> Since I'd like to hilite the row... now it is hiliting the cell of a
> row... :(
>
> - Glenn
>
>
>
> Laurent <lg...@free.fr>
> 28/04/2005 09:11 AM
> Please respond to
> "Struts Users Mailing List" <us...@struts.apache.org>
>
>
> To
> Struts Users Mailing List <us...@struts.apache.org>
> cc
>
> Subject
> Re: [OT] DOM & JavaScript
> Classification
>
>
>
>
>
>
>
>
> gdeschen@cmhc-schl.gc.ca wrote:
>> // Only add a row when changing the last row of the table
>> if ("s"+(rowWithData) == selectId) {
>> var row = table.insertRow(lastRowInTable);
>> var className = "rowNormal";
>>
>> if (lastRowInTable % 2 == 0) {
>> className = "rowAlternate";
>> }
>> row.className = className;
>> row.setAttribute("onmouseover", "this.className = 'hilite';");
>> row.setAttribute("onmouseout", "this.className = '" + className
> +
>> "'");
>
>
> That's not how it works (not in IE at least). The event attributes'
> values should be event listeners (i.e. functions), not strings of
> javascript code.
>
> Try this:
>
> function changeClassName(e) {
> if (!e) e=window.event;
> getEventTarget(e).setAttribute("class", "hilite"); // DOM-compliant
> getEventTarget(e).setAttribute("className", "hilite"); // MSIE
> }
>
> row.onmouseover = changeClassName; // without quotes nor parentheses
>
> function getEventTarget(e) {
> if (e.srcElement) return e.srcElement;
> else return e.currentTarget;
> }
>
> Note: the code above aims to be cross-browser, as IE behaves completely
> differently from any other browser.
>
> BTW, all event attributes are *lower case*: onmouseover, onmouseout (not
> onMouseOver...)
>
> Hope this helps.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] DOM & JavaScript
Posted by "Frank W. Zammetti" <fz...@omnytex.com>.
Ah, got it! You can use an anonymous function... The suggestion of
setting a common handler is fine except that you will have to use
getElementById to get a reference to the element to change... using an
anonymous function you have access to the this keyword, so it's cleaner.
Here's a complete working page (at least in IE)...
<html>
<head>
<title>Test</title>
<style>
.hilite { background-color:#ff0000; }
.normal { background-color:#ffffff; }
</style>
<script>
function createTable(table) {
row = table.insertRow();
row.setAttribute("className", "normal");
row.onmouseover = function() { this.className='hilite'; }
row.onmouseout = function() { this.className='normal'; }
cell = row.insertCell();
cell.innerHTML = "new1";
cell = row.insertCell();
cell.innerHTML = "new2";
}
</script>
<head>
<body>
<table id="theTable" border="1">
<tr onMouseOver="this.className='hilite';"
onMouseOut="this.className='normal';">
<td>dummy1</td><td>dummy2</td>
</tr>
</table>
<input type="button" onClick="createTable(theTable);" value="Add Row">
</body></html>
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
On Thu, April 28, 2005 9:58 am, gdeschen@cmhc-schl.gc.ca said:
> Merci Laurent !
>
> Okay so then when you say that it must be functions..
> I presume that the HTML with coded attributes such as onMouseOver and
> onMouseOut... in IE the browser parses the data and internally creates
> functions to handle the mouse events.
> So when I try to dynamically modify the DOM for IE... I must recreate the
> mouse handlers.
> Would this be a valid way of describing the situation?
>
> I must now understand the element hierarchy along with the event firing
> sequence...
> Since I'd like to hilite the row... now it is hiliting the cell of a
> row... :(
>
> - Glenn
>
>
>
> Laurent <lg...@free.fr>
> 28/04/2005 09:11 AM
> Please respond to
> "Struts Users Mailing List" <us...@struts.apache.org>
>
>
> To
> Struts Users Mailing List <us...@struts.apache.org>
> cc
>
> Subject
> Re: [OT] DOM & JavaScript
> Classification
>
>
>
>
>
>
>
>
> gdeschen@cmhc-schl.gc.ca wrote:
>> // Only add a row when changing the last row of the table
>> if ("s"+(rowWithData) == selectId) {
>> var row = table.insertRow(lastRowInTable);
>> var className = "rowNormal";
>>
>> if (lastRowInTable % 2 == 0) {
>> className = "rowAlternate";
>> }
>> row.className = className;
>> row.setAttribute("onmouseover", "this.className = 'hilite';");
>> row.setAttribute("onmouseout", "this.className = '" + className
> +
>> "'");
>
>
> That's not how it works (not in IE at least). The event attributes'
> values should be event listeners (i.e. functions), not strings of
> javascript code.
>
> Try this:
>
> function changeClassName(e) {
> if (!e) e=window.event;
> getEventTarget(e).setAttribute("class", "hilite"); // DOM-compliant
> getEventTarget(e).setAttribute("className", "hilite"); // MSIE
> }
>
> row.onmouseover = changeClassName; // without quotes nor parentheses
>
> function getEventTarget(e) {
> if (e.srcElement) return e.srcElement;
> else return e.currentTarget;
> }
>
> Note: the code above aims to be cross-browser, as IE behaves completely
> differently from any other browser.
>
> BTW, all event attributes are *lower case*: onmouseover, onmouseout (not
> onMouseOver...)
>
> Hope this helps.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] DOM & JavaScript
Posted by gd...@cmhc-schl.gc.ca.
Merci Laurent !
Okay so then when you say that it must be functions..
I presume that the HTML with coded attributes such as onMouseOver and
onMouseOut... in IE the browser parses the data and internally creates
functions to handle the mouse events.
So when I try to dynamically modify the DOM for IE... I must recreate the
mouse handlers.
Would this be a valid way of describing the situation?
I must now understand the element hierarchy along with the event firing
sequence...
Since I'd like to hilite the row... now it is hiliting the cell of a
row... :(
- Glenn
Laurent <lg...@free.fr>
28/04/2005 09:11 AM
Please respond to
"Struts Users Mailing List" <us...@struts.apache.org>
To
Struts Users Mailing List <us...@struts.apache.org>
cc
Subject
Re: [OT] DOM & JavaScript
Classification
gdeschen@cmhc-schl.gc.ca wrote:
> // Only add a row when changing the last row of the table
> if ("s"+(rowWithData) == selectId) {
> var row = table.insertRow(lastRowInTable);
> var className = "rowNormal";
>
> if (lastRowInTable % 2 == 0) {
> className = "rowAlternate";
> }
> row.className = className;
> row.setAttribute("onmouseover", "this.className = 'hilite';");
> row.setAttribute("onmouseout", "this.className = '" + className
+
> "'");
That's not how it works (not in IE at least). The event attributes'
values should be event listeners (i.e. functions), not strings of
javascript code.
Try this:
function changeClassName(e) {
if (!e) e=window.event;
getEventTarget(e).setAttribute("class", "hilite"); // DOM-compliant
getEventTarget(e).setAttribute("className", "hilite"); // MSIE
}
row.onmouseover = changeClassName; // without quotes nor parentheses
function getEventTarget(e) {
if (e.srcElement) return e.srcElement;
else return e.currentTarget;
}
Note: the code above aims to be cross-browser, as IE behaves completely
differently from any other browser.
BTW, all event attributes are *lower case*: onmouseover, onmouseout (not
onMouseOver...)
Hope this helps.
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [OT] DOM & JavaScript
Posted by Laurent <lg...@free.fr>.
gdeschen@cmhc-schl.gc.ca wrote:
> // Only add a row when changing the last row of the table
> if ("s"+(rowWithData) == selectId) {
> var row = table.insertRow(lastRowInTable);
> var className = "rowNormal";
>
> if (lastRowInTable % 2 == 0) {
> className = "rowAlternate";
> }
> row.className = className;
> row.setAttribute("onmouseover", "this.className = 'hilite';");
> row.setAttribute("onmouseout", "this.className = '" + className +
> "'");
That's not how it works (not in IE at least). The event attributes'
values should be event listeners (i.e. functions), not strings of
javascript code.
Try this:
function changeClassName(e) {
if (!e) e=window.event;
getEventTarget(e).setAttribute("class", "hilite"); // DOM-compliant
getEventTarget(e).setAttribute("className", "hilite"); // MSIE
}
row.onmouseover = changeClassName; // without quotes nor parentheses
function getEventTarget(e) {
if (e.srcElement) return e.srcElement;
else return e.currentTarget;
}
Note: the code above aims to be cross-browser, as IE behaves completely
differently from any other browser.
BTW, all event attributes are *lower case*: onmouseover, onmouseout (not
onMouseOver...)
Hope this helps.
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org