Smalltalk › Frameworks & Tools › Seaside › Seaside General

Call javascript function from subClass of SUComponent

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

3 messages Options

dtrussardi@tiscali.it

Call javascript function from subClass of SUComponent

Hi All,

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

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"></script>

</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

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Lukas Renggli

Re: Call javascript function from subClass of SUComponent

> What i'have wrong ?
>
> Any pointers would be greatly appreciated!

Are you using FireFox with the FireBug extension loaded? What does it say?

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Philippe Marschall

Re: Call javascript function from subClass of SUComponent

In reply to this post by dtrussardi@tiscali.it

2006/10/2, Dario Trussardi <[hidden email]>:

>
>
>
>
> 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"></script>
>
> <style type="text/css">
> 
> </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
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside