Smalltalk › Frameworks & Tools › Seaside › Seaside General

[AJAX] #script: & #html: vs #onSuccess: & #load & #html:

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

4 messages Options

Mariano Martinez Peck

[AJAX] #script: & #html: vs #onSuccess: & #load & #html:

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:

<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
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Johan Brichau-2

Re: [AJAX] #script: & #html: vs #onSuccess: & #load & #html:

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 <[hidden email]> 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
> [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

CyrilFerlicot

Re: [AJAX] #script: & #html: vs #onSuccess: & #load & #html:

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
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>

--
Cyril Ferlicot

http://www.synectique.eu

2 rue Jacques Prévert 01,
59650 Villeneuve d'ascq France

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

signature.asc (836 bytes) Download Attachment

Mariano Martinez Peck

Re: [AJAX] #script: & #html: vs #onSuccess: & #load & #html:

In reply to this post by Johan Brichau-2

On Sat, Sep 24, 2016 at 3:48 AM, Johan Brichau <[hidden email]> 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 <[hidden email]> 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
> [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