[Seaside] [AJAX] #script: & #html: vs #onSuccess: & #load & #html:
Mariano Martinez Peck
marianopeck at gmail.com
Sat Sep 24 12:54:59 UTC 2016
On Sat, Sep 24, 2016 at 3:48 AM, Johan Brichau <johan at 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 at 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&
> quot;:"/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 at lists.squeakfoundation.org
> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
--
Mariano
http://marianopeck.wordpress.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20160924/0906bc24/attachment.htm
More information about the seaside
mailing list