Hi guys,
Today I have a discussion with Esteban Maringolo and it looks we are both doing something different for a classical AJAX example. Consider the typical example of a click on a button that should trigger the re-render of a given DIV.
I was using #script together with #html: while Esteban was using #onSuccess:/#onError: with #load and #html:
I created a class for testing the differences. Very simple:
renderContentOn: html self renderMyDivOn: html. html form: [ html button bePush; onClick: *(html jQuery ajax* * script: [ :s | **s << ((s jQuery id: 'myDivId' ) html: [:r | **self renderMyDivOn: r. **]) **]* * );* value: 'Test with #script: '. html button bePush; onClick: *(html jQuery ajax* * callback: [ ];* * onSuccess: ( (html jQuery id: 'myDivId') load html: [ :r | self renderMyDivOn: r. ] ) * *);* value: 'Test with #onSuccess:'. ]
And
renderMyDivOn: html
html div id: 'myDivId'; with: [ html text: DateAndTime now greaseString. ]
Both solutions works. But of course, they are different. The generated HTML is different too of course:
<form accept-charset="utf-8" method="post" action="/reps?_s=pbHnnKA9Ys-E9FtR&_k=Wktdp8ek0iMZdSUY"> *<button onclick="$.ajax({"dataType":"script","url":"/reps","data":["_s=pbHnnKA9Ys-E9FtR","_k=Wktdp8ek0iMZdSUY","156"].join("&")})" type="button" class="button">Test with #script:</button>*
*<button onclick="$.ajax({"url":"/reps","data":["_s=pbHnnKA9Ys-E9FtR","_k=Wktdp8ek0iMZdSUY","157"].join("&"),"success":function(){$("#myDivId").load("/reps",["_s=pbHnnKA9Ys-E9FtR","_k=Wktdp8ek0iMZdSUY","158"].join("&"))}})" type="button" class="button">Test with #onSuccess:</button>* </form>
I am not an AJAX expert, so I wonder what are the differences, which is the recommended approach, and why.
Thank you very much in advance.
Hi Mariano,
First button does a single ajax call and responds a js script. Second button does two ajax calls, first one without a response content, second one with a html response content.
Both achieve the same end result but the second one requires two request-response cycles to your server. The second one will thus achieve the end result slower than the first one.
We typically also try to optimize as much as possible into single ajax requests.
Mind that you _can_ combine a single primary and multiple secondary callback blocks into a single ajax call. A primary callback is a callback that responds a content to the client (#script:, #html:, #json:, #text, ….) A secondary callback is a callback that does not respond content (#callback:value:, #callback:passengers:, #callback:json: , …) There is an exception to this rule, #callback: is implemented in the Seaside jQuery binding as a primary callback, even if it does not return any content.
Although for this example, I would actually write it as follows, because the #callback: block is a primary callback.
html button bePush; onClick: (html jQuery id: ‘myDivId’ load html: [:r | | … do some other stuff …. then ... self renderMyDivOn: r. ] ) value: ‘Test’
Now, it also depends of the ‘myDivId’ is known when rendering the button or not, but in this simple example this would yield the same result ;)
cheers Johan
On 24 Sep 2016, at 04:19, Mariano Martinez Peck marianopeck@gmail.com wrote:
Hi guys,
Today I have a discussion with Esteban Maringolo and it looks we are both doing something different for a classical AJAX example. Consider the typical example of a click on a button that should trigger the re-render of a given DIV.
I was using #script together with #html: while Esteban was using #onSuccess:/#onError: with #load and #html:
I created a class for testing the differences. Very simple:
renderContentOn: html self renderMyDivOn: html. html form: [ html button bePush; onClick: (html jQuery ajax script: [ :s | s << ((s jQuery id: 'myDivId' ) html: [:r | self renderMyDivOn: r. ]) ] ); value: 'Test with #script: '. html button bePush; onClick: (html jQuery ajax callback: [ ]; onSuccess: ( (html jQuery id: 'myDivId') load html: [ :r | self renderMyDivOn: r. ] ) ); value: 'Test with #onSuccess:'. ]
And
renderMyDivOn: html
html div id: 'myDivId'; with: [ html text: DateAndTime now greaseString. ]
Both solutions works. But of course, they are different. The generated HTML is different too of course:
<form accept-charset="utf-8" method="post" action="/reps?_s=pbHnnKA9Ys-E9FtR&_k=Wktdp8ek0iMZdSUY"> <button onclick="$.ajax({"dataType":"script","url":"/reps","data":["_s=pbHnnKA9Ys-E9FtR","_k=Wktdp8ek0iMZdSUY","156"].join("&")})" type="button" class="button">Test with #script:</button>
<button onclick="$.ajax({"url":"/reps","data":["_s=pbHnnKA9Ys-E9FtR","_k=Wktdp8ek0iMZdSUY","157"].join("&"),"success":function(){$("#myDivId").load("/reps",["_s=pbHnnKA9Ys-E9FtR","_k=Wktdp8ek0iMZdSUY","158"].join("&"))}})" type="button" class="button">Test with #onSuccess:</button> </form>I am not an AJAX expert, so I wonder what are the differences, which is the recommended approach, and why.
Thank you very much in advance.
-- Mariano http://marianopeck.wordpress.com _______________________________________________ seaside mailing list seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Le 24/09/2016 à 08:48, Johan Brichau a écrit :
Hi Mariano,
First button does a single ajax call and responds a js script. Second button does two ajax calls, first one without a response content, second one with a html response content.
Both achieve the same end result but the second one requires two request-response cycles to your server. The second one will thus achieve the end result slower than the first one.
We typically also try to optimize as much as possible into single ajax requests.
Mind that you _can_ combine a single primary and multiple secondary callback blocks into a single ajax call. A primary callback is a callback that responds a content to the client (#script:, #html:, #json:, #text, ….) A secondary callback is a callback that does not respond content (#callback:value:, #callback:passengers:, #callback:json: , …) There is an exception to this rule, #callback: is implemented in the Seaside jQuery binding as a primary callback, even if it does not return any content.
Although for this example, I would actually write it as follows, because the #callback: block is a primary callback.
html button bePush; onClick: (html jQuery id: ‘myDivId’ load html: [:r | | … do some other stuff …. then ... self renderMyDivOn: r. ] ) value: ‘Test’
Hi!
With this example how is manage the case where the session expire? In general I do:
onClick: (html jQuery ajax callback: [ ]; onSuccess: ( (html jQuery id: 'myDivId') load html: [ :r | self renderMyDivOn: r. ]); onError: 'location.reload();' "probably session expiration");
Now, it also depends of the ‘myDivId’ is known when rendering the button or not, but in this simple example this would yield the same result ;)
cheers Johan
seaside mailing list seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
On Sat, Sep 24, 2016 at 3:48 AM, Johan Brichau johan@inceptive.be wrote:
Hi Mariano,
Hi Johan, Thanks for answering. My answers below.
First button does a single ajax call and responds a js script. Second button does two ajax calls, first one without a response content, second one with a html response content.
But which of the called methods generate each of both ajax calls? #ajax and #load ?
Both achieve the same end result but the second one requires two request-response cycles to your server. The second one will thus achieve the end result slower than the first one.
We typically also try to optimize as much as possible into single ajax requests.
OK.
Mind that you _can_ combine a single primary and multiple secondary callback blocks into a single ajax call. A primary callback is a callback that responds a content to the client (#script:, #html:, #json:, #text, ….) A secondary callback is a callback that does not respond content (#callback:value:, #callback:passengers:, #callback:json: , …) There is an exception to this rule, #callback: is implemented in the Seaside jQuery binding as a primary callback, even if it does not return any content.
Although for this example, I would actually write it as follows, because the #callback: block is a primary callback.
html button bePush; onClick: (html jQuery id: ‘myDivId’ load html: [:r| | … do some other stuff …. then ... self renderMyDivOn: r. ] ) value: ‘Test’
OK. But you said that #callback: was a primary callback and we cannot have multiple primary callbacks in one ajax request. So my above example, where I was using #callback: .. let's say I have "callback: [ self doAnotherStuff ]". So in this example (with the second solution), I would actually be having THREE ajax calls?
Now, it also depends of the ‘myDivId’ is known when rendering the button or not, but in this simple example this would yield the same result ;)
mmmmm could you mind explaining an example of this and how both solutions are different from this regard?
Thanks in advance Johan!
cheers Johan
On 24 Sep 2016, at 04:19, Mariano Martinez Peck marianopeck@gmail.com
wrote:
Hi guys,
Today I have a discussion with Esteban Maringolo and it looks we are
both doing something different for a classical AJAX example. Consider the typical example of a click on a button that should trigger the re-render of a given DIV.
I was using #script together with #html: while Esteban was using
#onSuccess:/#onError: with #load and #html:
I created a class for testing the differences. Very simple:
renderContentOn: html self renderMyDivOn: html. html form: [ html button bePush; onClick: (html jQuery ajax script: [
:s | s << ((s jQuery id: 'myDivId' ) html: [:r | self renderMyDivOn: r. ]) ]
); value: 'Test with #script: '. html button bePush; onClick: (html jQuery ajax callback: [ ]; onSuccess: ( (html jQuery id:'myDivId') load html: [ :r | self renderMyDivOn: r. ] )
); value: 'Test with #onSuccess:'. ]And
renderMyDivOn: html
html div id: 'myDivId'; with: [ html text: DateAndTime now greaseString. ]Both solutions works. But of course, they are different. The generated
HTML is different too of course:
<form accept-charset="utf-8" method="post" action="/reps?_s=pbHnnKA9Ys-
E9FtR&_k=Wktdp8ek0iMZdSUY">
<button onclick="$.ajax({"dataType":"script","url":"/ reps","data":["_s=pbHnnKA9Ys-E9FtR" ,"_k=Wktdp8ek0iMZdSUY","156"].join("&")})" type="button" class="button">Test with #script:</button>
<button onclick="$.ajax({"url":"/reps","data":["_s= pbHnnKA9Ys-E9FtR","_k=Wktdp8ek0iMZdSUY",& quot;157"].join("&"),"success& quot;:function(){$("#myDivId").load("/reps",["_s= pbHnnKA9Ys-E9FtR","_k=Wktdp8ek0iMZdSUY",& quot;158"].join("&"))}})" type="button" class="button">Test with #onSuccess:</button>
</form>I am not an AJAX expert, so I wonder what are the differences, which is
the recommended approach, and why.
Thank you very much 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
seaside@lists.squeakfoundation.org
-
Cyril Ferlicot D. -
Johan Brichau -
Mariano Martinez Peck