[Seaside] Use of onMouseOver: and onMouseOut: in Seaside 2.8x
Lukas Renggli
renggli at gmail.com
Sat Nov 8 08:52:53 UTC 2008
> Is the generated Javascript for the observe function supposed to quote the
> first argument? I wonder if certain key names are OK to be unquoted such
> as 'window' or 'document' but others need quoting?... I see generated code
> like the following which is not what I see on the various websites showing
> how Event.observe is used :
No. Functions should never be quoted, they are propre closure objects
and should be treated equally to a Smalltalk block. Using strings to
model functions dates back to the very early days of Javascript.
Although most Javascript VMs allow one to transparently exchange them
with strings, it is not a suggested practice. This kind of escaping of
Javascript functions can be considered a bug that we fixed in Seaside
2.9. I back ported it to Seaside 2.8:
Name: Scriptaculous-lr.243
Author: lr
Time: 8 November 2008, 9:46:05 am
UUID: 0c9fade9-b677-40f2-90f3-1ae1855797ac
Ancestors: Scriptaculous-lr.242
- backported from Seaside 2.9: If a string is used as function don't escape it
FYI: Whenever you want to include Javascript verbatim, you can use
SUStream>>#on:. Otherwise a Smalltalk String is automatically escaped
as a Javascript string.
Hope this helps,
Lukas
>
> <script type="text/javascript">
> 1/*<![CDATA[*/Event.observe(foobarbaz,'mouseover',function(event){new
> Effect.Highlight(this)})/*]]>*/
> </script>
>
> The various websites I've seen (including the one below) show the first
> arguments in single quotes.. Not sure if that is what is causing my problem
> currently with firebug saying 'foobarbaz' not found
>
> http://joseph.randomnetworks.com/archives/2006/08/01/javascript-events-with-prototype/
>
> Below is the sample generated Seaside table :
>
> <table>
> <tbody>
> <tr>
> <th id="foobarbaz"></th>
> <th id="foobarbaz"></th>
> <th id="foobarbaz">Description</th>
> </tr>
> ...
>
>
>
> On Fri, November 7, 2008 6:35 pm, Rick Flower wrote:
>> One more followup.. I'm getting somewhere -- just not sure where..
>>
>> Anyway, I've now modified the following code (yes, I realize I'm whacking
>> up my image, but I can live with that!) :
>>
>> WATableReport>>renderRowNumber: index item: row on: html
>> html tableRow
>> script: (Scriptaculous.SUEvent new
>> observe: (Scriptaculous.SUStream on: 'document')
>> on: 'mouseover'
>> do: (html effect highlight));
>> style: 'background-color: ' , (self colorForRowNumber: index);
>> with: [
>> columns do: [ :each |
>> self renderColumn: each row: row on: html ] ]
>>
>> It actually loads but I get identical javascript entries that are
>> identical
>> for each row, which makes me think that my '#observe' method above is
>> wrong and is currently telling it to look at the entire document instead
>> of the row in question.. Now, I tried changing 'document' to be 'foobar'
>> and ensured that the above tableRow had #id: #foobar but no difference and
>> Firebug was complaining about foobar not being defined..
>>
>> Anyway, I think I'm close.. Does anyone have better examples on the
>> use of #observe: on: do:? There are only a few examples and none doing
>> anything other than using the entire document..
>>
>> HELP?!?
>>
>>
>>
>>
>>
>>
>> On Fri, November 7, 2008 4:58 pm, Rick Flower wrote:
>>> Ok -- just to reply to myself.. I was missing the need to add SULibrary
>>> to the list of libraries that the Dispatch editor indicates.. Once I did
>>> that the prototype (and related) libraries were loaded so no more
>>> error..
>>> Now, I did end up copying the code below to my test from one of the
>>> Scriptaculous examples and it runs great and highlights EVERYTHING but I
>>> only want it to highlight a single <TR> in a table when the mouse hovers
>>> over it.. Any ideas how to tailor it to down-scope what it highlights?
>>>
>>> MTIA!
>>>
>>> html script: (Scriptaculous.SUEvent new
>>> observe: (Scriptaculous.SUStream on: 'document')
>>> on: 'mouseover'
>>> do: (html effect highlight; id: Scriptaculous.SUEvent new
>>> element)).
>>>
>>>
>>>
>>> On Fri, November 7, 2008 3:43 pm, Rick Flower wrote:
>>>> By the way, I modified the existing Seaside Unit Test
>>>> (WATableReportTest)
>>>> to have a #renderContentOn: method as follows (the rest of the test
>>>> code
>>>> is the same) :
>>>>
>>>> WATableReportTest>>renderContentOn: html
>>>>
>>>> self session addLoadScript: (html selector
>>>> add: 'tr.effect';
>>>> do: [ :each |
>>>> each element on: 'mouseover' do:
>>>> '$(event.target).up(''tr'').addClassName(''highlight'')'.
>>>> each element on: 'mouseout' do:
>>>> '$(event.target).up(''tr'').removeClassName(''highlight'')']).
>>>> html render: report.
>>>>
>>>> Unfortunately, I must be doing something wrong as Firebug complains
>>>> about
>>>> the use of '$$' below in the generated script... Any ideas what I've
>>>> missed?
>>>>
>>>> <script type="text/javascript">
>>>> 1/*<![CDATA[*/function
>>>> onLoad(){$$('tr.effect').each(function(){$(arguments[0]).observe('mouseover',function(event){'$(event.target).up(\'tr\').addClassName(\'highlight\')'});$(arguments[0]).observe('mouseout',function(event){'$(event.target).up(\'tr\').removeClassName(\'highlight\')'})})}/*]]>*/
>>>> </script>
>>>>
>>>>
>>>> _______________________________________________
>>>> seaside mailing list
>>>> seaside at lists.squeakfoundation.org
>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>
>>>>
>>>
>>>
>>> _______________________________________________
>>> seaside mailing list
>>> seaside at lists.squeakfoundation.org
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>
>>>
>>
>>
>> _______________________________________________
>> seaside mailing list
>> seaside at lists.squeakfoundation.org
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>
>
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
--
Lukas Renggli
http://www.lukas-renggli.ch
More information about the seaside
mailing list