[Seaside] Javascript calls through jQuery
Esteban A. Maringolo
emaringolo at gmail.com
Mon Mar 3 15:38:23 UTC 2014
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(' ]
! !
More information about the seaside
mailing list