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

[Johan Brichau]

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 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&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
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside