[Seaside] Use of onMouseOver: and onMouseOut: in Seaside 2.8x

[Ryan Simmons]

I have attatched two working examples for you to look at.

The first assigns a unique id to each row and attatches a script to the row with
scriptForRow: rowId
	| script |
	script := SUScript new.
	script element id: rowId;
		on: 'mouseover' do: (SUElement new addClassName: 'highlight');
		on: 'mouseout' do: (SUElement new removeClassName: 'highlight').
	^script

The second removes the unique id and adds the class 'effectTarget' to
each row. It then uses a selector for the script.
scriptForRows
	| script |
	script := SUScript new.
	script selector add: 'tr.effectTarget';
		do: [:each |
			each element on: 'mouseover' do: (SUElement new addClassName: 'highlight');
				on: 'mouseout' do: (SUElement new removeClassName: 'highlight')].
	^script


On Sat, Nov 8, 2008 at 4:57 AM, Rick Flower <rickf at ca-flower.com> wrote:
> Lukas et-al,
>
> 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 :
>
> <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
>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: SeasideList-TableChangeCss.st
Type: application/octet-stream
Size: 4527 bytes
Desc: not available
Url : http://lists.squeakfoundation.org/pipermail/seaside/attachments/20081108/97a8a68c/SeasideList-TableChangeCss.obj