As I mentioned earlier today, I'm updating some older code that was
written for Seaside 2.6x and the following code does not appear to work -- at least to what I'm expecting -- it does not get any DNUs or anything like that.. I'm guessing it's an outdated construct. If I put a breakpoint in the onMouseOver it is only called during initial rendering but never when the event occurs which is what I'm expecting. I've never used these events before and perhaps the constructs are different for the newer Seaside? Below is the offending code snippet: renderRowNumber: index item: row on: html html tableRow id: 'row' , index asString; class: (self classForRowNumber: index); onClick: (html evaluator callback: [:aScript | self adjustRowColorsUsingIndex: index onScript: aScript]; return: false); onMouseOver: ('javascript:Element.addClassName("row', index asString, '","RowColor-', self highlightColor, '")'); onMouseOut: ('javascript:Element.removeClassName("row', index asString, '","RowColor-', self highlightColor, '")'); with: [columns do: [:ea | self renderColumn: ea row: row on: html]] _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Hi Richard, that will be rendered as javascript so you can't expect a server side halt for code that runs in DOM unless a callback is envolved. Unfortunately there is not Firebug code halts yet to mimic our debugging style. I miss that when javascripting. You can use this to check in firebug's console if your code executes under your condition: SUScript new add: (SULogger new log: 'The mouse is over!'); add: (your javascript serius code here); yourself Usage of onClick, onMouseOver, etc are considered the "vile way" to do it. Instead prefer observe(). Details here: http://www.prototypejs.org/api/event/observe Cheers, Sebastian Sastre > -----Mensaje original----- > De: [hidden email] > [mailto:[hidden email]] En nombre > de Richard E. Flower > Enviado el: Jueves, 06 de Noviembre de 2008 04:36 > Para: Seaside - general discussion > Asunto: [Seaside] Use of onMouseOver: and onMouseOut: in Seaside 2.8x > > As I mentioned earlier today, I'm updating some older code that was > written for Seaside 2.6x and the following code > does not appear to work -- at least to what I'm expecting -- it does > not get any DNUs or anything like that.. > I'm guessing it's an outdated construct. If I put a > breakpoint in the > onMouseOver it is only > called during initial rendering but never when the event > occurs which > is what I'm expecting. > I've never used these events before and perhaps the constructs are > different for the newer Seaside? > > Below is the offending code snippet: > > renderRowNumber: index item: row on: html > html tableRow id: 'row' , index asString; > class: (self classForRowNumber: index); > onClick: (html evaluator > callback: [:aScript | self > adjustRowColorsUsingIndex: index > onScript: aScript]; > return: false); > onMouseOver: > ('javascript:Element.addClassName("row', index > asString, '","RowColor-', self highlightColor, '")'); > onMouseOut: > ('javascript:Element.removeClassName("row', index > asString, '","RowColor-', self highlightColor, '")'); > with: [columns > do: [:ea | self > renderColumn: ea > row: row > on: html]] > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
On Nov 6, 2008, at 1:11 AM, Sebastian Sastre wrote:
> > Hi Richard, > > that will be rendered as javascript so you can't expect a server > side halt for > code that runs in DOM unless a callback is envolved. Unfortunately > there is not > Firebug code halts yet to mimic our debugging style. I miss that when > javascripting. > > You can use this to check in firebug's console if your code executes > under your > condition: > > SUScript new > add: (SULogger new log: 'The mouse is over!'); > add: (your javascript serius code here); > yourself > > Usage of onClick, onMouseOver, etc are considered the "vile way" to > do it. > Instead prefer observe(). Details here: > http://www.prototypejs.org/api/event/observe Sebastian- I don't suppose you've got an example using the above mentioned observe() code in Prototype do you? Is this what is used by Scriptaculous' SUElement? I saw a reference to 'observe' in there but wasn't sure.. I've just spent the last hour or so looking thru the old email archives for this list and saw some tidbits but no concrete examples.. I also looked at the test code for Scriptaculous but nothing similar to what I want to do, which is to change the css for an id when the mouse goes over the row in a table... I saw a reference in an email you wrote this past August talking about using : ======================== > From Seaside you access that with anElement>>on: anEventString do: aHandlerObject With prototype you can even use your own custom events like this: anElement fire: 'mouse:enter' ======================== However, I'm not sure about the context in which to use the above.. An example would be great! Currently my row rendering code looks something like : renderRowNumber: index item: row on: html html tableRow id: 'row' , index asString; class: (self classForRowNumber: index); script: (self componentScriptOn: html); onClick: (html evaluator callback: [:aScript | self adjustRowColorsUsingIndex: index onScript: aScript]; return: false); with: [columns do: [:ea | self renderColumn: ea row: row on: html]] componentScriptOn: html ^(Scriptaculous.SUScript new add: (Scriptaculous.SUEvent new observe: html scriptaculous document on: 'mouseover' do: (Scriptaculous.SULogger new log: 'The mouse is over!') ); yourself; yourself). ==================================================== When I execute this with Firefox (and Firebug) I get the following error in the console window: Event.observe is not a function onLoad() onLoad(load) _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Hi!
You could try something like this! You will need an extra CSS class for your rows! 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'')']). cheers Gerhard On Fri, Nov 7, 2008 at 7:55 AM, Richard E. Flower <[hidden email]> wrote:
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Garhard -
Thanks! One more stupid question.. Where does that fit into the rest of the rendering code that is creating the TableRows? Is this going to be put in for any TR's for the entire form that was rendered and there is no relationship (direct anyway) between the two? Anyway, just curious.. Thx! -- Rick On Nov 7, 2008, at 12:37 AM, Gerhard Obermann wrote: Hi! _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
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 [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
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 > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
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 >> [hidden email] >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >> >> > > > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
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 >>> [hidden email] >>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >>> >>> >> >> >> _______________________________________________ >> seaside mailing list >> [hidden email] >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >> >> > > > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
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 <[hidden email]> 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 >>>> [hidden email] >>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >>>> >>>> >>> >>> >>> _______________________________________________ >>> seaside mailing list >>> [hidden email] >>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >>> >>> >> >> >> _______________________________________________ >> seaside mailing list >> [hidden email] >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >> >> > > > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside SeasideList-TableChangeCss.st (6K) Download Attachment |
Thanks Ryan! Just what the doctor was looking for! I'll check it out!
On Fri, November 7, 2008 9:08 pm, Ryan Simmons wrote: > 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 <[hidden email]> 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 >>>>> [hidden email] >>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >>>>> >>>>> >>>> >>>> >>>> _______________________________________________ >>>> seaside mailing list >>>> [hidden email] >>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >>>> >>>> >>> >>> >>> _______________________________________________ >>> seaside mailing list >>> [hidden email] >>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >>> >>> >> >> >> _______________________________________________ >> seaside mailing list >> [hidden email] >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >> > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
In reply to this post by Rick Flower
> 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 >>>> [hidden email] >>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >>>> >>>> >>> >>> >>> _______________________________________________ >>> seaside mailing list >>> [hidden email] >>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >>> >>> >> >> >> _______________________________________________ >> seaside mailing list >> [hidden email] >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >> >> > > > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > -- Lukas Renggli http://www.lukas-renggli.ch _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
In reply to this post by Rick Flower
Hi Rick,
No need to goo all up to the document (parent of everything in page). You can make the parent component of the rows to observe the event. Think as you would do it in a desktop app: the container can/should define the policy of reaction of its children. Here is the same but web. Cheers, Sebastian Sastre PD: about hacking like that.. you can just subclass WATableReport and customize as you please. In the long run you'll tank yourself for doing that instead of polluting . > -----Mensaje original----- > De: [hidden email] > [mailto:[hidden email]] En nombre > de Rick Flower > Enviado el: Sábado, 08 de Noviembre de 2008 00:36 > Para: Seaside - general discussion > Asunto: Re: [Seaside] Use of onMouseOver: and onMouseOut: in > Seaside 2.8x > > 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]).obser > ve('mouseover',function(event){'$(event.target).up(\'tr\').add $(arguments[0]).observe('mouseout',function(event){'$(event.ta > rget).up(\'tr\').removeClassName(\'highlight\')'})})}/*]]>*/ > >> </script> > >> > >> > >> _______________________________________________ > >> seaside mailing list > >> [hidden email] > >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > >> > >> > > > > > > _______________________________________________ > > seaside mailing list > > [hidden email] > > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > > > > > > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
In reply to this post by Rick Flower
Ryan --
Your examples worked like a charm.. Exactly what I was looking for! Thanks a million! On Nov 7, 2008, at 10:30 PM, Rick Flower wrote: > Thanks Ryan! Just what the doctor was looking for! I'll check it > out! > > On Fri, November 7, 2008 9:08 pm, Ryan Simmons wrote: >> 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 <[hidden email]> >> 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 >>>>>> [hidden email] >>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/ >>>>>> seaside >>>>>> >>>>>> >>>>> >>>>> >>>>> _______________________________________________ >>>>> seaside mailing list >>>>> [hidden email] >>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >>>>> >>>>> >>>> >>>> >>>> _______________________________________________ >>>> seaside mailing list >>>> [hidden email] >>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >>>> >>>> >>> >>> >>> _______________________________________________ >>> seaside mailing list >>> [hidden email] >>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >>> >> _______________________________________________ >> seaside mailing list >> [hidden email] >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >> > > > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
In reply to this post by Rick Flower
As a side note, I believe mouseover event keeps on firing when you are moving mouse around (easy to confirm with firebug) which is why mootools has something called mouseenter and mouseleave which get fired once each, not sure about prototype. _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Boris --
I did enable event logging in Firebug for the DOM part I was interested in and was seeing mouse-moves and also enters/exits as well.. Mootools might be better at this but for now I'll what's generally available.. Thx! -- Rick On Nov 8, 2008, at 1:54 PM, Boris Popov wrote:
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
In reply to this post by Boris Popov, DeepCove Labs (SNN)
Hi,
Prototype lacks of support to mouse enter/leave. They
implemented the custom events and let that to the users so
far.
Maybe jQuery supports those but I can't confirm
that.
cheers,
Sebastian
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Free forum by Nabble | Edit this page |