Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Setting DHTML Events dynamically 2

Status
Not open for further replies.

790213

Programmer
Sep 22, 2003
50
ZA
If I create a dynamic HTML table with JavaScript's DOM Objects then my DHTML (onmouseover, onclick) events do not fire. I set these by using the setAttribute() function.

Any Ideas?
 
You're setting an onclick event with setAttribute()? Can we see your code? :)
 
Heheh - forget the first part of my question. My brain had wandered off. Anyway, *can* you post code?
 
function AddHeaders(xmlHeader, hRow, thClass)
{
var xDoc = xmlHeader.childNodes(0).childNodes;
var HeadCount = xDoc.length;
var th, txt, span, Output;

for (var i = 0; i < HeadCount; i++)
{
txt = document.createTextNode(xDoc(i).attributes.getNamedItem(&quot;ref&quot;).text);

th = hRow.insertCell(hRow.cells.length);
th.setAttribute(&quot;class&quot;, thClass);
th.setAttribute(&quot;value&quot;, xDoc(i).tagName);

span = document.createElement(&quot;span&quot;);
span.setAttribute(&quot;class&quot;, &quot;clsSpan&quot;);
span.setAttribute(&quot;title&quot;, &quot;Sort by &quot; + xDoc(i).attributes.getNamedItem(&quot;ref&quot;).text);
span.setAttribute(&quot;id&quot;, &quot;Col&quot; + i);
span.appendChild(txt);
th.appendChild(span);

document.getElementById(&quot;Col&quot; + i).addEventListener(&quot;click&quot;, SortTable(&quot;Col&quot; + i), false)

span.setAttribute(&quot;onmouseover&quot;, &quot;ChangeMouse(this, 'hand')&quot;);
}
return Output
}

I've tried adding the Evenlistener (Doesn't work.) Then I tried the doc...(&quot;&quot;).onclick but if I have a function with parameters then it bombs out on me.

Do you know how?
 
Okay, for addEventListener you're looking at something more like:
Code:
   column_object = document.getElementById(&quot;Col&quot; + i);
   column_object.addEventListener(&quot;click&quot;, function() { return SortTable( column_object ); }, false)

But IE uses attachEvent. Do you need this to work in IE?
 
Excellant. Didn't think of that. Thanks.
 
Now I need it to work in IE. Any suggestions? For some reason it doesn't pick up when I do this.

ctl.attachEvent(&quot;onclick&quot;, LoadItemDetail)
or
ctl.attachEvent(&quot;onclick&quot;, function(){return LoadItemDetail();})

Please help. What am I doing wrong?
 
Here's a nice function (scottandrew.com originally iirc) that might help:
Code:
function addEvent( obj, event_type, fn, capture ) { 

   if ( obj.addEventListener ) { 

      obj.addEventListener( event_type, fn, capture ); 
      return true; 

   } else if ( obj.attachEvent ) { 

      var r = obj.attachEvent( &quot;on&quot; + event_type, fn ); 
      return r; 

   } else { 

      alert( &quot;Handler could not be attached&quot; ); 
   } 
}
 
I've tried that. Problem I'm experiencing is that r comes back as undefined.

Am I missing something? Is this technology still active in IE 6.0?
 
It works for me in IE6, yeah.

Can we see some of your (almost) working code? Much easier that way. :)
 
// THIS IS WHERE I SET THE ONCLICK EVENTO FOR THE SELECT BOX
document.getElementById(&quot;cboRules&quot;).attachEvent(&quot;onclick&quot;, LoadItemDetail);

// THEN I HAVE A FUNCTION CALLED LoadItemDetail() THAT LOOKS
// LIKE THIS

function LoadItemDetail()
{
if (oDom.childNodes(0).childNodes(1).NodeType == 1)
{
return true
}
}

THIS IS ALL I HAVE AT THIS STAGE. ONCE I GET THIS CLICK
EVENT RUNNING THEN I'LL GO ON.
IN MY HTML I HAVE A NORMAL SELECT BOX. ONCE THIS SELECT
CHANGES THEN I'M SUPPOSE TO BUILD THE REST OF THE BODY FROM
XML.
 
// THIS IS WHERE I SET THE ONCLICK EVENTO FOR THE SELECT BOX
document.getElementById(&quot;cboRules&quot;).attachEvent(&quot;onclick&quot;, LoadItemDetail);

// THEN I HAVE A FUNCTION CALLED LoadItemDetail() THAT LOOKS
// LIKE THIS

function LoadItemDetail()
{
if (oDom.childNodes(0).childNodes(1).NodeType == 1)
{
return true
}
}

THIS IS ALL I HAVE AT THIS STAGE. ONCE I GET THIS CLICK
EVENT RUNNING THEN I'LL GO ON.
IN MY HTML I HAVE A NORMAL SELECT BOX. ONCE THIS SELECT
CHANGES THEN I'M SUPPOSE TO BUILD THE REST OF THE BODY FROM
XML.

WHAT IT DOES NOW IS IT CREATE THE ONCHANGE EVENT AS
onchange=null
WHAT I WANT IS
onchange=&quot;LoadItemDetail()&quot;
 
You'll need to call
Code:
document.getElementById(&quot;cboRules&quot;).attachEvent(&quot;onclick&quot;, LoadItemDetail);
from onload. You're calling it before the element exists.
 
I got it working. Quite nice. Thanks.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top