[Seaside] Javascript calls through jQuery

[Esteban A. Maringolo]

Answering myself, I found a semi-convoluted way of doing this.

But I had to extend JSFunction to support naming (it's optional):

html document
addLoadScript: (
 ((html jQuery getJson
     json: [ :r | self renderStoresJsonOn: r ];
     onSuccess: (JSStream on:
'updateStores(arguments[0]);setTimeout(updateMarkers,5000)')
asFunction
   ) asFunction name: 'updateMarkers') create call: #())

Produces:
new function updateMarkers() {
  $.getJSON("/ps/map", ["_s=W75cKXp9auCYja7o", "_k=cpawshsKuiBgsSoN",
"12"].join("&"), function () {
    updateStores(arguments[0]);
    setTimeout(updateMarkers, 5000)
   })
}();

The trick is in the naming of the function (and it's recurrent call
from within) and the #create decoration which followed by a #call: is
a way to implement "immediately invoked function expression" in JS
(IIFE for short).

I still have to learn how all the JavaScript/jQuery wrappers work, but
so far it's impressive how much you can do writing a few lines of
Smalltalk.

If there is a way of doing this without having to modify JSFunction
I'll be happy to use. Otherwise see attached changeset (and integrate
if necessary :) )


Regards!

Esteban A. Maringolo


2014-03-03 11:06 GMT-03:00 Esteban A. Maringolo <emaringolo at gmail.com>:
> Let's add a twist to this... I want to a have a recurrent polling to
> the #json: callback I implemented above.
>
> I had the following load script written in plain JS:
>
>         (function getStoresStatus(){
>                 $.ajax({url: '/ps/rest/store-status', dataType: 'json'}).done(
>                         function(response){
>                                 jQuery.each(response, function(index, value){
>                                         updateStoreMarker(value)});
>                                 setTimeout(getStoresStatus,30000)
>                         }
>                 );
>         }());
>
>
> How can I do the same using Seaside Jquery functions?
>
> Regards!
>
> Esteban A. Maringolo
>
>
> 2014-03-03 10:27 GMT-03:00 Esteban A. Maringolo <emaringolo at gmail.com>:
>> Good day Johan,
>>
>> I thought WAButtonTag was push by default, I didn't check.
>>
>> I moved the #json: method from JQGetJson to JQAjax, and chained
>> #serializeForm and #json: on the same ajax object and it worked.
>> Thanks!
>>
>> I don't know how Seaside manages to read the serialized form values
>> from the query string, but in this very moment I don't care much
>> either :)
>>
>> By now it works as expected. I'll surely come back later with more questions.
>>
>>
>> Thanks again.
>>
>> ps: Is the #json: method going to be added to Seaside-Jquery main trunk?
>> Esteban A. Maringolo
>>
>>
>> 2014-03-03 4:07 GMT-03:00 Johan Brichau <johan at inceptive.be>:
>>> Esteban,
>>>
>>> Mind that you can combine these ajax calls in the following way:
>>>
>>> html form: [
>>> "...snipped code"
>>>  html button
>>>         bePush;
>>>         onClick:  (html jQuery ajax
>>>                   serializeForm;
>>>                   json: [:json | json object: [ ] ];
>>>                  onSuccess: 'console.log(arguments[0])');
>>>    with: 'Filter!'
>>> ]
>>>
>>> cheers
>>> Johan
>>>
>>> On 03 Mar 2014, at 07:21, Johan Brichau <johan at inceptive.be> wrote:
>>>
>>>>
>>>> On 03 Mar 2014, at 02:09, Esteban A. Maringolo <emaringolo at gmail.com> wrote:
>>>>
>>>>> Any suggestion?
>>>>
>>>> That's because the button is triggering a submit. Change it to a push button as follows:
>>>>
>>>> html form: [
>>>> "...snipped code"
>>>> html button
>>>>   onClick:  (html jQuery ajax
>>>>                  serializeForm;
>>>>                  onComplete: (
>>>>                    html jQuery getJson
>>>>                      json: [:json | self renderJsonResponseOn: json ];
>>>>                      onSuccess: 'console.log(arguments[0])'));
>>>>   with: 'Filter!'
>>>> ]
>>>>
>>>>> ps: Is there a way to generate pretty-printed JS and HTML source?
>>>>
>>>> afaik, you have to use the browser development tools for that:
>>>>
>>>> https://plus.google.com/+AddyOsmani/posts/Q7t2U51G7YR
>>>>
>>>> cheers
>>>> Johan
>>>
>>> _______________________________________________
>>> seaside mailing list
>>> seaside at lists.squeakfoundation.org
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-------------- next part --------------
'From Pharo2.0 of 7 March 2013 [Latest update: #20628] on 3 March 2014 at 12:35:36 pm'!
JSScript subclass: #JSFunction
	instanceVariableNames: 'return arguments name'
	classVariableNames: ''
	poolDictionaries: ''
	category: 'Javascript-Core'!

!JSFunction methodsFor: 'accessing' stamp: 'EstebanMaringolo 3/3/2014 11:56'!
name

	^name! !

!JSFunction methodsFor: 'accessing' stamp: 'EstebanMaringolo 3/3/2014 11:56'!
name: anObject
	name := anObject! !

!JSFunction methodsFor: 'printing' stamp: 'EstebanMaringolo 3/3/2014 11:31'!
javascriptContentOn: aStream
	self javascriptDefinitionOn: aStream.
	self arguments do: [ :each | aStream nextPutAll: each ] separatedBy: [ aStream nextPut: $, ].
	aStream nextPutAll: '){'.
	statements isEmpty
		ifFalse: [ 
			statements allButLast
				do: [ :each | 
					aStream
						javascript: each;
						nextPut: $; ].
			self return
				ifTrue: [ aStream nextPutAll: 'return ' ].
			aStream javascript: statements last ].
	aStream nextPut: $}! !

!JSFunction methodsFor: 'printing' stamp: 'EstebanMaringolo 3/3/2014 11:56'!
javascriptDefinitionOn: aStream

	(self name notNil and: [ self name notEmpty ])
		ifTrue: [
			aStream 
				nextPutAll: 'function';
				space;
				nextPutAll: self name;
				nextPut:$( ]
		ifFalse: [ aStream nextPutAll: 'function(' ]
! !