[Seaside] Call javascript function from subClass of SUComponent

Mon Oct 2 12:37:54 UTC 2006

Hi All,

i have one file named  utility.js with  this javascript function:

function tableruler() {
  if (document.getElementById && document.createTextNode) {
    var tables=document.getElementsByTagName('table');
    for (var i=0;i<tables.length;i++)
    {
      if(tables[i].className=='ruler') {
        var trs=tables[i].getElementsByTagName('tr');
        for(var j=0;j<trs.length;j++)
        {
          if(trs[j].parentNode.nodeName=='TBODY') {
            trs[j].onmouseover=function(){this.className='ruled';return false}
            trs[j].onmouseout=function(){this.className='';return false}
          }
        }
      }
    }
  }
}
window.onload=function(){tableruler();}

 This function mark the row of one table when onmouseover on the row.

When is call the function from html file esempio.html all work fine.

esempio.html is :

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

 <title>Tabelle con onmouseover - Esempio JavaScript scaricato da HTML.it</title>

 <script type="text/javascript" src="utility.js"><!--// ajax utility //--></script>

<style type="text/css">
<!--
#demo tr.ruled {
  background:#9cf;
}
-->
</style>

</head>
<body >
<br /><br />
<div align="center">

Passa con il mouse sulla tabella<br><br>

<table id="demo" class="ruler" cellpadding="5" style="border:solid 1px #000">
<tr>
<td>Testo 1</td><td>Testo 2</td>
</tr>
<tr>
<td>Testo 3</td><td>Testo 4</td>
</tr>
<tr>
<td>Testo 5</td><td>Testo 6</td>
</tr>
</table>
</div>
<br /><br /><br /><br /><br /><br />
</body>
</html>

I'm interesting to do it from SUComponent subClass TabellaTest where i'have defined the method:

updateRoot: aHtmlRoot
 super updateRoot: aHtmlRoot.

     aHtmlRoot
      title: 'dtr';
      linkToStyle: (self resources addToPath: 'cursor.css').

     aHtmlRoot  linkToScript: (self resources addToPath: 'utility.js' ).

and where  the renderContentOn: t1 method is:

renderContentOn: t1 
 t1 heading: 'My friends' level: 1.

  t1 table id: 'demo';  class: 'ruler'; style: 'border:solid 5px #000'; attributeAt: #cellpadding put:'15';  with:[
          self renderDatabaseRowsOn: t1].

   t1 horizontalRule.

The rendering work fine but the selection row when onmouseover d'ont work.

What i'have wrong ?

Any pointers would be greatly appreciated!

Thanks!

Dario Trussardi

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20061002/f99e8268/attachment.htm