Re: [OT] DOM JavaScript
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 [EMAIL PROTECTED] 27/04/2005 05:13 PM Please respond to Struts Users Mailing List user@struts.apache.org To Struts Users Mailing List user@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 [EMAIL PROTECTED] wrote: Curiously... the mouse events are all in lowercase when they are shown in the dump. TBODY TR TD class=tableHeader colSpan=2Effective Date/TD TD class=tableHeader width=200CWW Schedule Type/TD TD class=tableHeader id=calendarAnchor align=middle width=74Delete/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=15403 January 2004 /TD TD id=c01 width=16A 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=c02SELECT class=dropdowns2 id=s0 onchange=addTableRow('historyTable','s0') name=historyItems[0].scheduleTypeIdOPTION value=00/OPTION OPTION value=01 selected1 Week Cycle/OPTION OPTION value=022 Week Cycle/OPTION OPTION value=033 Week Cycle/OPTION OPTION value=044 Week Cycle/OPTION OPTION value=05Regular Week Schedule/OPTION/SELECT /TD TD id=c03 align=middleINPUT type=checkbox value=on name=historyItems[0].delete /TD TD class=rowNormal id=c04INPUT 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=c41A 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=c42SELECT class=dropdowns2 id=s4 onchange=addTableRow('historyTable','s4') name=historyItems[4].scheduleTypeIdOPTION value=00 selected/OPTION OPTION value=011 Week Cycle/OPTION OPTION value=022 Week Cycle/OPTION OPTION value=033 Week Cycle/OPTION OPTION value=044 Week Cycle/OPTION OPTION value=05Regular Week Schedule/OPTION/SELECT /TD TD align=middleINPUT type=checkbox value=on name=historyItems[4].delete /TD TD class=rowNormal id=c44INPUT class=dropdowns2 id=d40 style=VISIBILITY: hidden size=1 value=2004-01-03 name=historyItems[4].startDate /TD/TR/TBODY - Glenn Frank W. Zammetti [EMAIL PROTECTED] 27/04/2005 04:27 PM Please respond to Struts Users Mailing List user@struts.apache.org To Struts Users Mailing List user@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 [EMAIL PROTECTED] 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
Re: [OT] DOM JavaScript
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, [EMAIL PROTECTED] 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 [EMAIL PROTECTED] 27/04/2005 05:13 PM Please respond to Struts Users Mailing List user@struts.apache.org To Struts Users Mailing List user@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 [EMAIL PROTECTED] wrote: Curiously... the mouse events are all in lowercase when they are shown in the dump. TBODY TR TD class=tableHeader colSpan=2Effective Date/TD TD class=tableHeader width=200CWW Schedule Type/TD TD class=tableHeader id=calendarAnchor align=middle width=74Delete/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=15403 January 2004 /TD TD id=c01 width=16A 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=c02SELECT class=dropdowns2 id=s0 onchange=addTableRow('historyTable','s0') name=historyItems[0].scheduleTypeIdOPTION value=00/OPTION OPTION value=01 selected1 Week Cycle/OPTION OPTION value=022 Week Cycle/OPTION OPTION value=033 Week Cycle/OPTION OPTION value=044 Week Cycle/OPTION OPTION value=05Regular Week Schedule/OPTION/SELECT /TD TD id=c03 align=middleINPUT type=checkbox value=on name=historyItems[0].delete /TD TD class=rowNormal id=c04INPUT 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=c41A 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=c42SELECT class=dropdowns2 id=s4 onchange=addTableRow('historyTable','s4') name=historyItems[4].scheduleTypeIdOPTION value=00 selected/OPTION OPTION value=011 Week Cycle/OPTION OPTION value=022 Week Cycle/OPTION OPTION value=033 Week Cycle/OPTION OPTION value=044 Week Cycle/OPTION OPTION value=05Regular Week Schedule/OPTION/SELECT /TD TD align=middleINPUT type=checkbox value=on name=historyItems[4].delete /TD TD class=rowNormal id=c44INPUT class=dropdowns2 id=d40 style=VISIBILITY: hidden size=1 value=2004-01-03 name=historyItems[4].startDate /TD/TR/TBODY - Glenn Frank W. Zammetti [EMAIL PROTECTED] 27/04/2005 04:27 PM Please respond to Struts Users Mailing List user@struts.apache.org To Struts Users Mailing List user@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
Re: [OT] DOM JavaScript
[EMAIL PROTECTED] 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: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
Re: [OT] DOM JavaScript
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 [EMAIL PROTECTED] 28/04/2005 09:10 AM Please respond to Struts Users Mailing List user@struts.apache.org To Struts Users Mailing List user@struts.apache.org cc Struts Users Mailing List user@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, [EMAIL PROTECTED] 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 [EMAIL PROTECTED] 27/04/2005 05:13 PM Please respond to Struts Users Mailing List user@struts.apache.org To Struts Users Mailing List user@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 [EMAIL PROTECTED] wrote: Curiously... the mouse events are all in lowercase when they are shown in the dump. TBODY TR TD class=tableHeader colSpan=2Effective Date/TD TD class=tableHeader width=200CWW Schedule Type/TD TD class=tableHeader id=calendarAnchor align=middle width=74Delete/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=15403 January 2004 /TD TD id=c01 width=16A 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=c02SELECT class=dropdowns2 id=s0 onchange=addTableRow('historyTable','s0') name=historyItems[0].scheduleTypeIdOPTION value=00/OPTION OPTION value=01 selected1 Week Cycle/OPTION OPTION value=022 Week Cycle/OPTION OPTION value=033 Week Cycle/OPTION OPTION value=044 Week Cycle/OPTION OPTION value=05Regular Week Schedule/OPTION/SELECT /TD TD id=c03 align=middleINPUT type=checkbox value=on name=historyItems[0].delete /TD TD class=rowNormal id=c04INPUT 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=c41A 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=c42SELECT class=dropdowns2 id=s4 onchange=addTableRow('historyTable','s4') name=historyItems[4].scheduleTypeIdOPTION value=00 selected/OPTION OPTION value=011 Week Cycle/OPTION OPTION value=022 Week Cycle/OPTION OPTION value=033 Week Cycle/OPTION OPTION value=044 Week Cycle/OPTION OPTION value=05Regular Week Schedule/OPTION/SELECT /TD TD align=middleINPUT type=checkbox value=on name=historyItems[4].delete /TD TD class=rowNormal id=c44INPUT class=dropdowns2 id=d40 style=VISIBILITY: hidden size=1 value=2004-01-03 name=historyItems[4].startDate /TD/TR/TBODY - Glenn Frank W. Zammetti [EMAIL PROTECTED] 27/04/2005 04:27
Re: [OT] DOM JavaScript
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 [EMAIL PROTECTED] 28/04/2005 09:11 AM Please respond to Struts Users Mailing List user@struts.apache.org To Struts Users Mailing List user@struts.apache.org cc Subject Re: [OT] DOM JavaScript Classification [EMAIL PROTECTED] 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: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
Re: [OT] DOM JavaScript
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 titleTest/title style .hilite { background-color:#ff; } .normal { background-color:#ff; } /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'; tddummy1/tdtddummy2/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, [EMAIL PROTECTED] 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 [EMAIL PROTECTED] 28/04/2005 09:11 AM Please respond to Struts Users Mailing List user@struts.apache.org To Struts Users Mailing List user@struts.apache.org cc Subject Re: [OT] DOM JavaScript Classification [EMAIL PROTECTED] 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: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED] - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
Re: [OT] DOM JavaScript
Excellent Frank, thanks a million !!! What was your inspiration for this ? - Glenn Frank W. Zammetti [EMAIL PROTECTED] 28/04/2005 10:47 AM Please respond to Struts Users Mailing List user@struts.apache.org To Struts Users Mailing List user@struts.apache.org cc Struts Users Mailing List user@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 titleTest/title style .hilite { background-color:#ff; } .normal { background-color:#ff; } /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'; tddummy1/tdtddummy2/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, [EMAIL PROTECTED] 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 [EMAIL PROTECTED] 28/04/2005 09:11 AM Please respond to Struts Users Mailing List user@struts.apache.org To Struts Users Mailing List user@struts.apache.org cc Subject Re: [OT] DOM JavaScript Classification [EMAIL PROTECTED] 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: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED] - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
[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
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 [EMAIL PROTECTED] 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: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
Re: [OT] DOM JavaScript
Curiously... the mouse events are all in lowercase when they are shown in the dump. TBODY TR TD class=tableHeader colSpan=2Effective Date/TD TD class=tableHeader width=200CWW Schedule Type/TD TD class=tableHeader id=calendarAnchor align=middle width=74Delete/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=15403 January 2004 /TD TD id=c01 width=16A 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=c02SELECT class=dropdowns2 id=s0 onchange=addTableRow('historyTable','s0') name=historyItems[0].scheduleTypeIdOPTION value=00/OPTION OPTION value=01 selected1 Week Cycle/OPTION OPTION value=022 Week Cycle/OPTION OPTION value=033 Week Cycle/OPTION OPTION value=044 Week Cycle/OPTION OPTION value=05Regular Week Schedule/OPTION/SELECT /TD TD id=c03 align=middleINPUT type=checkbox value=on name=historyItems[0].delete /TD TD class=rowNormal id=c04INPUT 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=c41A 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=c42SELECT class=dropdowns2 id=s4 onchange=addTableRow('historyTable','s4') name=historyItems[4].scheduleTypeIdOPTION value=00 selected/OPTION OPTION value=011 Week Cycle/OPTION OPTION value=022 Week Cycle/OPTION OPTION value=033 Week Cycle/OPTION OPTION value=044 Week Cycle/OPTION OPTION value=05Regular Week Schedule/OPTION/SELECT /TD TD align=middleINPUT type=checkbox value=on name=historyItems[4].delete /TD TD class=rowNormal id=c44INPUT class=dropdowns2 id=d40 style=VISIBILITY: hidden size=1 value=2004-01-03 name=historyItems[4].startDate /TD/TR/TBODY - Glenn Frank W. Zammetti [EMAIL PROTECTED] 27/04/2005 04:27 PM Please respond to Struts Users Mailing List user@struts.apache.org To Struts Users Mailing List user@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 [EMAIL PROTECTED] 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: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
Re: [OT] DOM JavaScript
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 [EMAIL PROTECTED] wrote: Curiously... the mouse events are all in lowercase when they are shown in the dump. TBODY TR TD class=tableHeader colSpan=2Effective Date/TD TD class=tableHeader width=200CWW Schedule Type/TD TD class=tableHeader id=calendarAnchor align=middle width=74Delete/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=15403 January 2004 /TD TD id=c01 width=16A 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=c02SELECT class=dropdowns2 id=s0 onchange=addTableRow('historyTable','s0') name=historyItems[0].scheduleTypeIdOPTION value=00/OPTION OPTION value=01 selected1 Week Cycle/OPTION OPTION value=022 Week Cycle/OPTION OPTION value=033 Week Cycle/OPTION OPTION value=044 Week Cycle/OPTION OPTION value=05Regular Week Schedule/OPTION/SELECT /TD TD id=c03 align=middleINPUT type=checkbox value=on name=historyItems[0].delete /TD TD class=rowNormal id=c04INPUT 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=c41A 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=c42SELECT class=dropdowns2 id=s4 onchange=addTableRow('historyTable','s4') name=historyItems[4].scheduleTypeIdOPTION value=00 selected/OPTION OPTION value=011 Week Cycle/OPTION OPTION value=022 Week Cycle/OPTION OPTION value=033 Week Cycle/OPTION OPTION value=044 Week Cycle/OPTION OPTION value=05Regular Week Schedule/OPTION/SELECT /TD TD align=middleINPUT type=checkbox value=on name=historyItems[4].delete /TD TD class=rowNormal id=c44INPUT class=dropdowns2 id=d40 style=VISIBILITY: hidden size=1 value=2004-01-03 name=historyItems[4].startDate /TD/TR/TBODY - Glenn Frank W. Zammetti [EMAIL PROTECTED] 27/04/2005 04:27 PM Please respond to Struts Users Mailing List user@struts.apache.org To Struts Users Mailing List user@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 [EMAIL PROTECTED] 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: [EMAIL PROTECTED