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

On Sat, Sep 24, 2016 at 3:48 AM, Johan Brichau <[email protected]> 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 <[email protected]>
> 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&amp;_k=Wktdp8ek0iMZdSUY">
> >                               <button onclick="$.ajax({&quot;
> dataType&quot;:&quot;script&quot;,&quot;url&quot;:&quot;/
> reps&quot;,&quot;data&quot;:[&quot;_s=pbHnnKA9Ys-E9FtR&quot;
> ,&quot;_k=Wktdp8ek0iMZdSUY&quot;,&quot;156&quot;].join(&quot;&amp;&quot;)})"
> type="button" class="button">Test with #script:</button>
> >
> >                                <button onclick="$.ajax({&quot;url&
> quot;:&quot;/reps&quot;,&quot;data&quot;:[&quot;_s=
> pbHnnKA9Ys-E9FtR&quot;,&quot;_k=Wktdp8ek0iMZdSUY&quot;,&
> quot;157&quot;].join(&quot;&amp;&quot;),&quot;success&
> quot;:function(){$(&quot;#myDivId&quot;).load(&quot;/reps&quot;,[&quot;_s=
> pbHnnKA9Ys-E9FtR&quot;,&quot;_k=Wktdp8ek0iMZdSUY&quot;,&
> quot;158&quot;].join(&quot;&amp;&quot;))}})" 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
> > [email protected]
> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
> _______________________________________________
> seaside mailing list
> [email protected]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>



-- 
Mariano
http://marianopeck.wordpress.com

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