[Seaside] Checkbox and AJAX?
Johan Brichau
johan at inceptive.be
Tue Jul 8 17:16:19 UTC 2014
In the original post Mariano had a variable 'anInteger' which (I assume) is why he generated a script in ajax callback:
> script: [ :s | s << ('$(''#tr', anInteger asString, ''').addClass(''selectedRow'');')
Of course, if the script is static, you don't need an ajax callback and using onSuccess: is the way to go.
I think there was also the need to use event delegation somewhere, but I don't see that anymore.
Though, if you have a lot of rows, generating a script for each row is going to slow down rendering and make the response a lot larger.
Johan
On 08 Jul 2014, at 18:28, Bob Arning <arning315 at comcast.net> wrote:
> I'm not sure what precise goal is here, but this seems to select the row when the checkbox is clicked. What else was required?
>
> testRender1: html
>
> | isSel someData selections setSel ss |
>
> selections _ Set new.
> someData _ #('hello' 'goodbye' 'what?').
> isSel _ [ :obj | selections includes: obj].
> setSel _ [ :obj :val | val ifTrue: [selections add: obj] ifFalse: [selections remove: obj]].
> html table with: [
> someData do: [ :e |
> html tableRow with: [
> html tableData: e.
> html tableData: e sorted.
> html tableData with: [
> html form: [
> html label:[
> ss _ (html jQuery this closest: 'tr') addClass: 'selectedRow'.
> html checkbox
> onClick: (html jQuery ajax serializeThisWithHidden);
> onClick: (ss);
> value: (isSel value: e);
> callback: [ :value | setSel value: e value: value ]
> ]
> ].
> ].
> ].
> ].
> ].
>
>
>
> On 7/8/14 9:06 AM, Mariano Martinez Peck wrote:
>>
>>
>>
>> On Mon, Jul 7, 2014 at 6:02 PM, Johan Brichau <johan at inceptive.be> wrote:
>> Hi Mariano,
>>
>> Unfortunately, the trick with capturing 'this' for later use is not going to work. The generated script (or the onSuccess callback) are not executed in the same scope as where you defined 'myself'.
>>
>> Ok, I imagined that something like that could happen.
>>
>> I made that mistake in this thread earlier on, but I was just not thinking right. Sorry about that.
>>
>>
>> Np, it was a good try to avoid having an id for every row ;)
>>
>> The problem with the apply: is that the apply statement is added inside the function. I noticed that problem with JSFunction objects before but I don't know yet if it can be solved. It does act counter-intuitive though.
>>
>>
>> Indeed.
>>
>> Working with an id per row is the easiest solution here, I think.
>>
>>
>> OK, perfect.
>>
>> Thank you very much guys,
>>
>> Johan
>>
>> On 07 Jul 2014, at 15:42, Mariano Martinez Peck <marianopeck at gmail.com> wrote:
>>
>> > Thank you all for the explanations. I do get it now. Now that I made the simplest case to work (adding an id per tr), I would like to make the Johan solution (finding the closest tr). I tried:
>> >
>> > html form: [
>> > html label:[
>> > html checkbox
>> > onClick: (((JSStream on: 'var myself = this'),
>> > (html jQuery ajax
>> > serializeThisWithHidden;
>> > script: [ :s | s << (((s jQuery expression:(JSStream on: 'myself')) closest: 'tr') addClass: 'selectedRow') ])) asFunction apply: #());
>> > value: (self isSelected: anObject);
>> > callback: [ :value | self selectRow: anObject value: value ]]]
>> >
>> > But I get: SyntaxError: function statement requires a name
>> >
>> >
>> > The onClick is being generated like this:
>> >
>> > a JSFunction (function(){var myself = this;$.ajax({"url":"/reps","data":["_s=nHl8jzTmLkMbcOME","_k=2IH4kmR1ds-rEaua","accessMenu=Clients","activityMenu=Clients","65",$(this).next("input:hidden").andSelf().serialize()].join("&"),"dataType":"script"})}())
>> >
>> > Note that if I put a halt in #script, it doesn't even get call.
>> >
>> > I removed the asFunction apply: letting only something like this:
>> >
>> > onClick: (((JSStream on: 'var myself = this'),
>> > (html jQuery ajax
>> > serializeThisWithHidden;
>> > script: [ :s | self halt. s << (((s jQuery expression:(JSStream on: 'myself')) closest: 'tr') addClass: 'selectedRow') ])) );
>> >
>> > This solved that problem, but my row doesn't get the css class yet. The #script: does halts, and generates a script like this one:
>> >
>> > a JSScript ($(myself).closest("tr").addClass("selectedRow"))
>> >
>> > Any ideas?
>> >
>> > Thanks in advance,
>> >
>> >
>> >
>> >
>> >
>> > On Sun, Jul 6, 2014 at 9:14 AM, Johan Brichau <johan at inceptive.be> wrote:
>> > Hi,
>> >
>> > Both in the context of the #script: ajax callback-to-smalltalk and the ajax #onSuccess: javascript-callback option, the javascript's this variable will not hold anything related to the DOM.
>> >
>> > The difference between #script: and #onSuccess: is that the former defines a script rendering callback to be executed in Seaside and the latter is a jQuery ajax option to define a javascript callback (to be executed client-side) when the ajax call finishes successfully.
>> >
>> > The onSuccess parameter will accept both a string or a JSScript instance as a Javascript to be executed
>> > In a #script callback, the block argument is a JSScript instance already. The script concatenation operator '<<' expects another JSScript instance (e.g. a JSStream instance). If you concatenate a Smalltalk string with a JSScript instance, the Smalltalk string is serialized as a Javascript string on the JSScript instance.
>> >
>> > cheers
>> > Johan
>> >
>> > On 06 Jul 2014, at 01:06, carlo.t <snoobabk at yahoo.ie> wrote:
>> >
>> > > Hi
>> > >
>> > > I thick #script: does not work because this is a separate ajax call where
>> > > the reference to 'this' is not known and is not the row you expect.
>> > > #script would work if you reference a valid DOM id for the row e.g.
>> > > html checkbox
>> > > onClick: (html jQuery ajax serializeThisWithHidden;
>> > > script: [:s | s
>> > > << (s jQuery: #idForRow) addClass: 'selectedRow']);
>> > >
>> > > #onSuccess is probably triggering a callback where the reference to 'this'
>> > > is valid and so the following line will work:
>> > > (html jQuery this closest: 'tr') addClass: 'selectedRow'
>> > >
>> > > I'm a javascript newbie too but thats what I think is going on.
>> > >
>> > > Cheers
>> > > Carlo
>> > >
>> > >
>> > >
>> > >
>> > > --
>> > > View this message in context: http://forum.world.st/Checkbox-and-AJAX-tp4731692p4766717.html
>> > > Sent from the Seaside General mailing list archive at Nabble.com.
>> > > _______________________________________________
>> > > 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
>> >
>> >
>> >
>> > --
>> > Mariano
>> > http://marianopeck.wordpress.com
>> > _______________________________________________
>> > 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
>>
>>
>>
>> --
>> Mariano
>> http://marianopeck.wordpress.com
>>
>>
>> _______________________________________________
>> 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
More information about the seaside
mailing list