[Seaside] Call javascript function from subClass of SUComponent

Mon Oct 2 13:14:45 UTC 2006

2006/10/2, Dario Trussardi <dtrussardi at tiscali.it>:
>
>
>
>
> 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!

You said it's a sublcass of of SUComponent? Does this mean that it's
inserted with some kind of liveUpdate/ajax functionality and not
present on the initial page load?

If so this is you problem because you call tableruler() only on page
load and not when something is added after that with JavaScript.

A hack for that would be to add
html script: 'tableruler()'
after you render the table. A better way you probably be the use of CSS.

Is there a reason you name the canvas argument t1? This looks very wrong.

And please stop using html in mails.

Philippe