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,
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 marianopeck@gmail.com 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 seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
On Fri, Dec 20, 2013 at 5:36 PM, Johan Brichau johan@inceptive.be wrote:
Hi Mariano,
This should do the trick:
html checkbox value: aValue; callback: [:boolean | ... ]; onClick: (html jQuery ajax serializeThisWithHidden).
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 Johan
On 20 Dec 2013, at 21:27, Mariano Martinez Peck marianopeck@gmail.com 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 seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
seaside mailing list seaside@lists.squeakfoundation.org 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:
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).
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...
On 20 Dec 2013, at 22:15, Mariano Martinez Peck marianopeck@gmail.com 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).
On Fri, Dec 20, 2013 at 6:49 PM, Johan Brichau johan@inceptive.be wrote:
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 !)
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 Johan
[1] http://forum.world.st/use-of-method-temporaries-in-callback-blocks-td2340788...
On 20 Dec 2013, at 22:15, Mariano Martinez Peck marianopeck@gmail.com 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 seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
On 23 Dec 2013, at 14:15, Mariano Martinez Peck marianopeck@gmail.com 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
On Mon, Dec 23, 2013 at 12:27 PM, Johan Brichau johan@inceptive.be wrote:
On 23 Dec 2013, at 14:15, Mariano Martinez Peck marianopeck@gmail.com 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?
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). Perhaps in case of a table, you may only re-render the <tbody>, and then also only replacing its inner html.
Ok, I will try that.
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?
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:
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...
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_______________________________________________
seaside mailing list seaside@lists.squeakfoundation.org 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 < marianopeck@gmail.com> wrote:
On Mon, Dec 23, 2013 at 12:27 PM, Johan Brichau johan@inceptive.be wrote:
On 23 Dec 2013, at 14:15, Mariano Martinez Peck marianopeck@gmail.com 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?
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). Perhaps in case of a table, you may only re-render the <tbody>, and then also only replacing its inner html.
Ok, I will try that.
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?
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:
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...
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_______________________________________________
seaside mailing list seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-- Mariano http://marianopeck.wordpress.com
Try changing from #script: to #onSuccess:
Mariano Martinez Peck wrote
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 <
marianopeck@
wrote:
On Mon, Dec 23, 2013 at 12:27 PM, Johan Brichau <
johan@
>
wrote:
On 23 Dec 2013, at 14:15, Mariano Martinez Peck <
marianopeck@
>
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?
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). Perhaps in case of a table, you may only re-render the
, and then
also only replacing its inner html.
Ok, I will try that.
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?
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:
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... >> >> > 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_______________________________________________ >> seaside mailing list >>
seaside@.squeakfoundation
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-- Mariano http://marianopeck.wordpress.com
-- Mariano http://marianopeck.wordpress.com
seaside mailing list
seaside@.squeakfoundation
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-- View this message in context: http://forum.world.st/Checkbox-and-AJAX-tp4731692p4766672.html Sent from the Seaside General mailing list archive at Nabble.com.
On Sat, Jul 5, 2014 at 11:37 AM, Paul DeBruicker pdebruic@gmail.com wrote:
Try changing from #script: to #onSuccess:
Awesome! that worked. Now, can you explain to a newbie what is the difference please? :)
Thanks,
Mariano Martinez Peck wrote
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 <
marianopeck@
wrote:
On Mon, Dec 23, 2013 at 12:27 PM, Johan Brichau <
johan@
>
wrote:
On 23 Dec 2013, at 14:15, Mariano Martinez Peck <
marianopeck@
>
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?
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). Perhaps in case of a table, you may only re-render the
, and then
also only replacing its inner html.
Ok, I will try that.
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?
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:
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... >> >> > 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_______________________________________________
seaside mailing list
seaside@.squeakfoundation
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-- Mariano http://marianopeck.wordpress.com
-- Mariano http://marianopeck.wordpress.com
seaside mailing list
seaside@.squeakfoundation
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-- View this message in context: http://forum.world.st/Checkbox-and-AJAX-tp4731692p4766672.html Sent from the Seaside General mailing list archive at Nabble.com. _______________________________________________ seaside mailing list seaside@lists.squeakfoundation.org 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
-- 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.
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@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@lists.squeakfoundation.org 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 johan@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@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@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
seaside mailing list seaside@lists.squeakfoundation.org 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 marianopeck@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@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@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@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
seaside mailing list seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-- Mariano http://marianopeck.wordpress.com _______________________________________________ seaside mailing list seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
On Mon, Jul 7, 2014 at 6:02 PM, Johan Brichau johan@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@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 ajaxserializeThisWithHidden;
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@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@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@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
seaside mailing list seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-- Mariano http://marianopeck.wordpress.com _______________________________________________ seaside mailing list seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
seaside mailing list seaside@lists.squeakfoundation.org 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:
On Mon, Jul 7, 2014 at 6:02 PM, Johan Brichau <johan@inceptive.be mailto:johan@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@gmail.com <mailto:marianopeck@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@inceptive.be <mailto:johan@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@yahoo.ie <mailto:snoobabk@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@lists.squeakfoundation.org <mailto:seaside@lists.squeakfoundation.org> > > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > _______________________________________________ > seaside mailing list > seaside@lists.squeakfoundation.org <mailto:seaside@lists.squeakfoundation.org> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > > > -- > Mariano > http://marianopeck.wordpress.com > _______________________________________________ > seaside mailing list > seaside@lists.squeakfoundation.org <mailto:seaside@lists.squeakfoundation.org> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside _______________________________________________ seaside mailing list seaside@lists.squeakfoundation.org <mailto:seaside@lists.squeakfoundation.org> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside-- Mariano http://marianopeck.wordpress.com
seaside mailing list seaside@lists.squeakfoundation.org 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 arning315@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@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@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@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@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@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
seaside mailing list seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-- Mariano http://marianopeck.wordpress.com _______________________________________________ seaside mailing list seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
seaside mailing list seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-- Mariano http://marianopeck.wordpress.com
seaside mailing list
seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
seaside mailing list seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
On 05 Jul 2014, at 04:34, Mariano Martinez Peck marianopeck@gmail.com 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@lists.squeakfoundation.org
-
Bob Arning -
carlo.t -
Johan Brichau -
Mariano Martinez Peck -
Paul DeBruicker