Checkbox and AJAX?
Locked
 
|
Hi guys,
I have this piece of seaside that renders a checkbox: renderCellFormContent: anObject on: html html form: [
html label:[ html checkbox submitOnClick;
value: (self isSelected: anObject); callback: [ :value | self selectRow: anObject value: value ]]] That checkbox is actually one table cell of a row of a table (the first column) to select/unselect items. I would like to make this checkbox go with an AJAX request so that the whole page is not rendered and hence I loose scroll position etc....
So..what I need is that in the onClick of the checkbox I send an AJAX request. The checkbox of course should be updated and I also need to be able to continue executing the callback and the value.
Any idea how can I do this in Seaside? Thanks in advance, Mariano http://marianopeck.wordpress.com _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
Hi Mariano,
This should do the trick: html checkbox value: aValue; callback: [:boolean | ... ]; onClick: (html jQuery ajax serializeThisWithHidden). cheers Johan On 20 Dec 2013, at 21:27, Mariano Martinez Peck <[hidden email]> wrote: > Hi guys, > > I have this piece of seaside that renders a checkbox: > > renderCellFormContent: anObject on: html > > html form: [ > html label:[ > html checkbox > submitOnClick; > value: (self isSelected: anObject); > callback: [ :value | self selectRow: anObject value: value ]]] > > That checkbox is actually one table cell of a row of a table (the first column) to select/unselect items. I would like to make this checkbox go with an AJAX request so that the whole page is not rendered and hence I loose scroll position etc.... > > So..what I need is that in the onClick of the checkbox I send an AJAX request. The checkbox of course should be updated and I also need to be able to continue executing the callback and the value. > > Any idea how can I do this in Seaside? > > Thanks in advance, > > -- > Mariano > http://marianopeck.wordpress.com > _______________________________________________ > 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 Fri, Dec 20, 2013 at 5:36 PM, Johan Brichau <[hidden email]> wrote: Hi Mariano, hahah that easy?? Thanks Johan! it seems the key point was the hidden part because I tried many things without that and it didn't work. Now, a last question. In my case, I want to re-render the whole table/containter after the ajax because selected rows have a special color (css class)....I know which is the ID of my tableContainer. I also have access to the component I would like to re-render (self report). I tried a few things like this:
renderCellFormContent: anObject on: html html form: [ html label:[
html checkbox value: (self isSelected: anObject); onClick: (html jQuery ajax
serializeThisWithHidden; html: [ :renderer | self halt. renderer render: self report ] "onSuccess: ((html jQuery: '#tableContainer') load)");
callback: [ :value | self selectRow: anObject value: value ]]] But none worked. I am still newbie with Ajax stuff so I am probably doing something wrong.
BTW, if I can only refresh the row, cool, but as far as I know that's not possible (or complex?). So just rendering the table again I think it would be ok (unless I loose scroll position).
Any idea? cheers Mariano http://marianopeck.wordpress.com _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
You *can* re-render just a row or even just a
cell. I use the following to re-render a single cell:
s1 _ html jQuery ajax callback: [ :value | value = 'undefined' ifTrue: [ lastCellIndex _ nil. ] ifFalse: [ lastCellIndex _ value. showing at: lastCellIndex put: (showing at: lastCellIndex ifAbsent: [false]) not. ]. ] value: (((html jQuery: '.',idForExpandableSource) filter: 'return(bobclicktest(this))' asFunction) first attributeAt: 'id'); script: [ :s | lastCellIndex ifNotNil: [ self updateHistory. s << ((s jQuery: lastCellIndex asSymbol) html: [ :h | cellInfo _ (idsToCells at: lastCellIndex) third. (showing at: lastCellIndex) ifTrue: [ toShow _ String streamContents: [ :strm | cellInfo sourceArray do: [ :e | strm nextPutAll: e first asString; nextPutAll: '>>'; nextPutAll: e second asString; cr; nextPutAll: e third asString; cr; cr ] ]. h text: '[x]'; break. h textArea columns: 50; rows: 20; style: 'text-align: left'; value: toShow. ] ifFalse: [ h text: cellInfo byteCount asString ]. ]). ]. ]. You can see this in action at http://69.251.218.6:9116/time if you click on a cell with something in it. Cheers, Bob jQuery: '#tableContainer' On 12/20/13 4:15 PM, Mariano Martinez
Peck wrote:
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
In reply to this post by Mariano Martinez Peck
Mariano,
You can combine a script callback with the ajax callback that performs the serialization of the checkbox. In that script callback, you can generate a script that replaces the contents of the tableContainer (having an id, for example). html form: [ html label:[ html checkbox value: (self isSelected: anObject); onClick: (html jQuery ajax serializeThisWithHidden; script: [ :s | s << ((s jQuery id: id) html: self report) ]); callback: [ :value | self selectRow: anObject value: value ]]] What happens is the following: - The ajax callback first executes the serialization of the checkbox. This is the callback you attached to your checkbox itself - The script callback of the ajax request generates the response of the ajax callback and thus is executed last - The generated script gets executed on your client. It replaces the contents of the tableContainer with what 'self report' rendered. There's quite some gotcha's in the above: - you can combine multiple callbacks on a single ajax request, but only one 'response' callback can exist, otherwise you need to resort to chaining using the onComplete: method of an ajax request. - if you would use method temporaries to pass values from one callback block to another, you need to use a value holder object in GemStone [1] (even in 3.1 !) Replacing only the row is not a problem either. You just need to know which row to replace both server-side and client-side. Generating explicit ids per row is a possibility, but there are more. cheers Johan [1] http://forum.world.st/use-of-method-temporaries-in-callback-blocks-td2340788.html On 20 Dec 2013, at 22:15, Mariano Martinez Peck <[hidden email]> wrote: > Now, a last question. In my case, I want to re-render the whole table/containter after the ajax because selected rows have a special color (css class)....I know which is the ID of my tableContainer. I also have access to the component I would like to re-render (self report). I tried a few things like this: > > renderCellFormContent: anObject on: html > > html form: [ > html label:[ > html checkbox > value: (self isSelected: anObject); > onClick: (html jQuery ajax > serializeThisWithHidden; > html: [ :renderer | self halt. renderer render: self report ] > "onSuccess: ((html jQuery: '#tableContainer') load)"); > callback: [ :value | self selectRow: anObject value: value ]]] > > But none worked. I am still newbie with Ajax stuff so I am probably doing something wrong. > BTW, if I can only refresh the row, cool, but as far as I know that's not possible (or complex?). So just rendering the table again I think it would be ok (unless I loose scroll position). seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
On Fri, Dec 20, 2013 at 6:49 PM, Johan Brichau <[hidden email]> wrote: Mariano, Thanks Johan for all the explanation. It is much clear now. And moreover, it worked nicely! Thanks! Replacing only the row is not a problem either. You just need to know which row to replace both server-side and client-side. Generating explicit ids per row is a possibility, but there are more. Indeed, it seems I need this because even if I render only the table, the scroll goes up again to the top of the table.... So..which other solution you found besides explicit id per row? Of course in the server it is easy to know which row to render, the problem is how to know it in client side.
I am would be glad you listen your approaches here. Thanks! cheers Mariano http://marianopeck.wordpress.com _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
On 23 Dec 2013, at 14:15, Mariano Martinez Peck <[hidden email]> wrote: > Indeed, it seems I need this because even if I render only the table, the scroll goes up again to the top of the table.... Do you replace the table or only its inner html? In general, to keep the scroll position of an element, you must replace its contents (and not the element itself). Perhaps in case of a table, you may only re-render the <tbody>, and then also only replacing its inner html. > So..which other solution you found besides explicit id per row? Of course in the server it is easy to know which row to render, the problem is how to know it in client side. > I am would be glad you listen your approaches here. You want to replace the row where the user clicked in, right? The $(this) will refer to the checkbox element you clicked, but not anymore in the response script. So, you need to capture it in a lexical scope. This is what I would try: onClick: (((JSStream on: 'var myself = this'), (html jQuery ajax serializeThisWithHidden; script: [ :s | s << (((s jQuery expression:(JSStream on: 'myself')) closest: 'tr') html: self report) ])) asFunction apply: #()); The idea is to generate this: onclick = "(function(){ var myself = this; <<ajax call>> })()" The above might or might not work because I did not try it. But something along those lines should work... Johan_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
On Mon, Dec 23, 2013 at 12:27 PM, Johan Brichau <[hidden email]> wrote:
I was replacing a div which is a container of the table. In general, to keep the scroll position of an element, you must replace its contents (and not the element itself). Ok, I will try that.
Yes. I just need to re-render it so that since it is selected now, it has a different css. The $(this) will refer to the checkbox element you clicked, but not anymore in the response script. So, you need to capture it in a lexical scope. ahaaaa, good point! This is what I would try: mmmm this is what get's generated: function(){var myself = this;jQuery.ajax({"url":"/MyApp","data":["_s=w9GmvDOQpAp_pp0c","_k=-3MfxH3kyGWxn6Vi","96",jQuery(this).next("input:hidden").andSelf().serialize()].join("&"),"dataType":"script"})}() I don't see 'myself' used it later.... BTW, in your example you do: "html: self report". but...since in this case I am re-rendering the row only (and not the whole table/report), I should only re-render the row right? so I should do something like instead:
self renderRowOfObject: anObject with: html ? and there write the row Thanks for you help Johan. Johan_______________________________________________ Mariano http://marianopeck.wordpress.com _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
Hi, I am back trying to make this example to work. What I cannot do is to add my "selectedRow" css class to the selected TR. I did this: html form: [
html label:[ html checkbox onClick:
(html jQuery ajax serializeThisWithHidden; script: [ :s | s << ('$(''#tr', anInteger asString, ''').addClass(''selectedRow'');')
]); value: (self isSelected: anObject); callback: [ :value | self selectRow: anObject value: value ]]]
The callbacks does work, the server gets correct etc...in fact, if I then refresh the page, the row is correctly applied the "selected" row. The problem is that I cannot make the row selected with the #script: When I debug, the #script: is something like: $('#tr4').addClass('selectedRow');
But nothing happens. If I go to a JavaScript console in the browser and I paste the very same line, it works! Any ideas what I am doing wrong? Thanks in advance,
On Tue, Dec 24, 2013 at 12:06 PM, Mariano Martinez Peck <[hidden email]> wrote:
Mariano http://marianopeck.wordpress.com _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
Try changing from #script: to #onSuccess:
|
|
|
In reply to this post by Mariano Martinez Peck
On 05 Jul 2014, at 04:34, Mariano Martinez Peck <[hidden email]> wrote: > script: [ :s | s << ('$(''#tr', anInteger asString, ''').addClass(''selectedRow'');')] Your code is generating a string response. You need to generate javascript: script: [ :s | s << (JSStream on: '$(''#tr', anInteger asString, ''').addClass(''selectedRow'')')] Seaside serializes a Smalltalk string to a Javascript string. Therefore, you need to use a JSStream. cheers, Johan_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
In reply to this post by Paul DeBruicker
On Sat, Jul 5, 2014 at 11:37 AM, Paul DeBruicker <[hidden email]> wrote: Try changing from #script: to #onSuccess: Awesome! that worked. Now, can you explain to a newbie what is the difference please? :)
Thanks,
Mariano http://marianopeck.wordpress.com _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
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 |
|
|
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 <[hidden email]> 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 > [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 |
|
|
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 <[hidden email]> wrote: Hi, Mariano http://marianopeck.wordpress.com _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
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'. I made that mistake in this thread earlier on, but I was just not thinking right. Sorry about that. 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. Working with an id per row is the easiest solution here, I think. Johan On 07 Jul 2014, at 15:42, Mariano Martinez Peck <[hidden email]> 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 <[hidden email]> 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 <[hidden email]> 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 > > [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 > > > > -- > Mariano > http://marianopeck.wordpress.com > _______________________________________________ > 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 Mon, Jul 7, 2014 at 6:02 PM, Johan Brichau <[hidden email]> wrote: Hi Mariano, 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 Mariano http://marianopeck.wordpress.com _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
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:
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
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 <[hidden email]> 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 <[hidden email]> 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 <[hidden email]> 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 <[hidden email]> 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 <[hidden email]> 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 >> > > [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 >> > >> > >> > >> > -- >> > Mariano >> > http://marianopeck.wordpress.com >> > _______________________________________________ >> > 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 >> >> >> >> -- >> Mariano >> http://marianopeck.wordpress.com >> >> >> _______________________________________________ >> 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 |
«
Return to Seaside General
|
1 view|%1 views
| Free forum by Nabble | Edit this page |