Smalltalk › Frameworks & Tools › Seaside › Seaside General

Generating an callback URL for third-party use

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

10 messages Options

Esteban A. Maringolo

Generating an callback URL for third-party use

I'm struggling to find a clean way of generating an url to be used for
external reference from a javascript library/plugin, such as
crossfilter or DataTables.

E.g the constructor configuration object has a dataUrl parameter,
which will be used by the plugin to retrieve the data.

$('element').plugin({dataUrl: "..."});

I can generate the expression to retrieve it from anywhere, but what I
want is to associate an url with a callback that will answer the data
requested.

Today I'm assigning results to a local variable using a predefined
callback function, and then initializing my data dependent function
assuming there is going to be data in that variable.

Ej:
html document addLoadScript: (
((html jQuery getJson
json: [ :json | self renderItemsOnJson: json ];
onSuccess: (JSStream on: 'myCallbackFunction(arguments[0]);')
asFunction) asFunction assignTo: 'loadCrossfilterData')).

html document addLoadScript: (JSStream on: 'loadCrossfilterData()').

I want some way to create a url callback in the way of:

callbackUrl := html magicalCallbackRegister: [ :json | self
renderItemsOnJson: json ]. "answers a url"

JSStream on: '$(''#element'').plugin({dataUrl:"', callbackUrl, '"})'.

which once rendered as JS would be:

$('#element').plugin({dataUrl:"/app/_s=...&_k=...&n"});

I know this must be possible, because Seaside does it for all the
callbacks, but I don't know how to create a simple callback and then
get it's url to pass it around.

I hope all I wrote is intelligible. Otherwise I can rephrase it in
other unintelligible way. :)

Esteban A. Maringolo
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Esteban A. Maringolo

Re: Generating an callback URL for third-party use

Additionally to this, is it possible to pass an argument to such callback?

I'm dealing with a data table on the browser and want to show details
of the selected item once clicked. Instead of creating hundreds of
callbacks (one per row), I'd like to pass an identifier of such item
to the callback, in order to be able to retrieve it from the
datasource. Is it possible?

Is there a better way to register a callback that does exactly the same?

something to replace this:
collection do: [:each | html anchor callback: [self edit: each]; with: 'Edit' ]

Into a reutilizable callback with an added parameter.

I looked into the WAListTag class and it seems there is no other way
other than creating a single callback per item.
Maybe it is cheap in terms of memory and I worrying about an non
existing problem. But there should be other way.

Regards!

Esteban A. Maringolo

2014-05-27 19:46 GMT-03:00 Esteban A. Maringolo <[hidden email]>:

> I'm struggling to find a clean way of generating an url to be used for
> external reference from a javascript library/plugin, such as
> crossfilter or DataTables.
>
> E.g the constructor configuration object has a dataUrl parameter,
> which will be used by the plugin to retrieve the data.
>
> $('element').plugin({dataUrl: "..."});
>
> I can generate the expression to retrieve it from anywhere, but what I
> want is to associate an url with a callback that will answer the data
> requested.
>
> Today I'm assigning results to a local variable using a predefined
> callback function, and then initializing my data dependent function
> assuming there is going to be data in that variable.
>
> Ej:
> html document addLoadScript: (
> ((html jQuery getJson
> json: [ :json | self renderItemsOnJson: json ];
> onSuccess: (JSStream on: 'myCallbackFunction(arguments[0]);')
> asFunction) asFunction assignTo: 'loadCrossfilterData')).
>
> html document addLoadScript: (JSStream on: 'loadCrossfilterData()').
>
> I want some way to create a url callback in the way of:
>
> callbackUrl := html magicalCallbackRegister: [ :json | self
> renderItemsOnJson: json ]. "answers a url"
>
> JSStream on: '$(''#element'').plugin({dataUrl:"', callbackUrl, '"})'.
>
> which once rendered as JS would be:
>
> $('#element').plugin({dataUrl:"/app/_s=...&_k=...&n"});
>
> I know this must be possible, because Seaside does it for all the
> callbacks, but I don't know how to create a simple callback and then
> get it's url to pass it around.
>
> I hope all I wrote is intelligible. Otherwise I can rephrase it in
> other unintelligible way. :)
>
> Esteban A. Maringolo

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

Bob Arning-2

Re: Generating an callback URL for third-party use

Well, as for using a single callback to cover lots of click targets, I use something like this

--- a single onClick: for the table---
    html table
        onClick: (
            html jQuery ajax
            callback: [ :value |
                selIndex _ myNums findFirst: [ :each | each asString = value].
            ]
            value: ((html jQuery: '.',id1) filter: 'return(bobclicktest(this))' asFunction) first html;
...

--- each cell in table that you want to be clickable has the class id1 ---
            html tableRow: [
                myNums do: [ :e |
                    html tableData
                        class: id1;
...

--- and bobclicktest checks if the event occurred in a particular element---
function bobclicktest(target) {
    return(
        ($(target).offset().top < window.event.pageY)
        && ($(target).offset().top + $(target).height() > window.event.pageY)
        && ($(target).offset().left < window.event.pageX)
        && ($(target).offset().left + $(target).width() > window.event.pageX)
    )
}

On 5/27/14 8:25 PM, Esteban A. Maringolo wrote:

Additionally to this, is it possible to pass an argument to such callback?

I'm dealing with a data table on the browser and want to show details
of the selected item once clicked. Instead of creating hundreds of
callbacks (one per row), I'd like to pass an identifier of such item
to the callback, in order to be able to retrieve it from the
datasource. Is it possible?

Is there a better way to register a callback that does exactly the same?

something to replace this:
collection do: [:each | html anchor callback: [self edit: each]; with: 'Edit' ]

Into a reutilizable callback with an added parameter.

I looked into the WAListTag class and it seems there is no other way
other than creating a single callback per item.
Maybe it is cheap in terms of memory and I worrying about an non
existing problem. But there should be other way.

Regards!

Esteban A. Maringolo


2014-05-27 19:46 GMT-03:00 Esteban A. Maringolo [hidden email]:

I'm struggling to find a clean way of generating an url to be used for
external reference from a javascript library/plugin, such as
crossfilter or DataTables.

E.g the constructor configuration object has a dataUrl parameter,
which will be used by the plugin to retrieve the data.

$('element').plugin({dataUrl: "..."});

I can generate the expression to retrieve it from anywhere, but what I
want is to associate an url with a callback that will answer the data
requested.

Today I'm assigning results to a local variable using a predefined
callback function, and then initializing my data dependent function
assuming there is going to be data in that variable.

Ej:
html document addLoadScript: (
  ((html jQuery getJson
     json: [ :json | self renderItemsOnJson: json ];
     onSuccess: (JSStream on: 'myCallbackFunction(arguments[0]);')
asFunction) asFunction assignTo: 'loadCrossfilterData')).

html document addLoadScript: (JSStream on: 'loadCrossfilterData()').

I want some way to create a url callback in the way of:

callbackUrl :=  html magicalCallbackRegister: [ :json | self
renderItemsOnJson: json ]. "answers a url"

JSStream on: '$(''#element'').plugin({dataUrl:"', callbackUrl, '"})'.

which once rendered as JS would be:

$('#element').plugin({dataUrl:"/app/_s=...&_k=...&n"});

I know this must be possible, because Seaside does it for all the
callbacks, but I don't know how to create a simple callback and then
get it's url to pass it around.

I hope all I wrote is intelligible. Otherwise I can rephrase it in
other unintelligible way. :)

Esteban A. Maringolo

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

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

Esteban A. Maringolo

Re: Generating an callback URL for third-party use

Thank you Bob!

I used your solution, with a minor tweak, but does the same thing:

First I'm adding the eventClick detector to the document (will end up
in an external js file).

html document addLoadScript: (((JSStream on: 'return(
($(target).offset().top < window.event.pageY)
&& ($(target).offset().top + $(target).height() > window.event.pageY)
&& ($(target).offset().left < window.event.pageX)
&& ($(target).offset().left + $(target).width() >
window.event.pageX))') asFunction: #('target')) assignTo:
'eventClickTest')

I add the following event handler to the table #onClick event.
html jQuery ajax
callback: [ :value | self doSomethingWith: value ]
value: (((html jQuery: '#', tableId, ' tr') filter:
'return(eventClickTest(this))' asFunction) first attributeAt: 'id')

And then I render the rows of the table data using the id of my
element as the key:
aCollection do:[:each |
html tableRow
id: 'o-', each id asString;
with: [ html tableData "..." ]
]

It is the same thing you did, but instead of relying on text of the
cell, I'm relying on a, hidden, id of the row.

Now I have to find how to transform that callback into something
useful to create an ajax load.

tl;dr I want to open a Bootstrap modal with the, custom rendered,
details of the object clicked in the table.

Regards!

Esteban.

ps: I also renamed bobclicktest ;-)
Esteban A. Maringolo

2014-05-27 22:08 GMT-03:00 Bob Arning <[hidden email]>:

> Well, as for using a single callback to cover lots of click targets, I use
> something like this
>
> --- a single onClick: for the table---
> html table
> onClick: (
> html jQuery ajax
> callback: [ :value |
> selIndex _ myNums findFirst: [ :each | each asString =
> value].
> ]
> value: ((html jQuery: '.',id1) filter:
> 'return(bobclicktest(this))' asFunction) first html;
> ...
>
> --- each cell in table that you want to be clickable has the class id1 ---
> html tableRow: [
> myNums do: [ :e |
> html tableData
> class: id1;
> ...
>
> --- and bobclicktest checks if the event occurred in a particular element---
> function bobclicktest(target) {
> return(
> ($(target).offset().top < window.event.pageY)
> && ($(target).offset().top + $(target).height() >
> window.event.pageY)
> && ($(target).offset().left < window.event.pageX)
> && ($(target).offset().left + $(target).width() >
> window.event.pageX)
> )
> }
> On 5/27/14 8:25 PM, Esteban A. Maringolo wrote:
>
> Additionally to this, is it possible to pass an argument to such callback?
>
> I'm dealing with a data table on the browser and want to show details
> of the selected item once clicked. Instead of creating hundreds of
> callbacks (one per row), I'd like to pass an identifier of such item
> to the callback, in order to be able to retrieve it from the
> datasource. Is it possible?
>
> Is there a better way to register a callback that does exactly the same?
>
> something to replace this:
> collection do: [:each | html anchor callback: [self edit: each]; with:
> 'Edit' ]
>
> Into a reutilizable callback with an added parameter.
>
> I looked into the WAListTag class and it seems there is no other way
> other than creating a single callback per item.
> Maybe it is cheap in terms of memory and I worrying about an non
> existing problem. But there should be other way.
>
> Regards!
>
> Esteban A. Maringolo
>
>
> 2014-05-27 19:46 GMT-03:00 Esteban A. Maringolo <[hidden email]>:
>
> I'm struggling to find a clean way of generating an url to be used for
> external reference from a javascript library/plugin, such as
> crossfilter or DataTables.
>
> E.g the constructor configuration object has a dataUrl parameter,
> which will be used by the plugin to retrieve the data.
>
> $('element').plugin({dataUrl: "..."});
>
> I can generate the expression to retrieve it from anywhere, but what I
> want is to associate an url with a callback that will answer the data
> requested.
>
> Today I'm assigning results to a local variable using a predefined
> callback function, and then initializing my data dependent function
> assuming there is going to be data in that variable.
>
> Ej:
> html document addLoadScript: (
> ((html jQuery getJson
> json: [ :json | self renderItemsOnJson: json ];
> onSuccess: (JSStream on: 'myCallbackFunction(arguments[0]);')
> asFunction) asFunction assignTo: 'loadCrossfilterData')).
>
> html document addLoadScript: (JSStream on: 'loadCrossfilterData()').
>
> I want some way to create a url callback in the way of:
>
> callbackUrl := html magicalCallbackRegister: [ :json | self
> renderItemsOnJson: json ]. "answers a url"
>
> JSStream on: '$(''#element'').plugin({dataUrl:"', callbackUrl, '"})'.
>
> which once rendered as JS would be:
>
> $('#element').plugin({dataUrl:"/app/_s=...&_k=...&n"});
>
> I know this must be possible, because Seaside does it for all the
> callbacks, but I don't know how to create a simple callback and then
> get it's url to pass it around.
>
> I hope all I wrote is intelligible. Otherwise I can rephrase it in
> other unintelligible way. :)
>
> Esteban A. Maringolo
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>

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

Johan Brichau-2

Re: Generating an callback URL for third-party use

In reply to this post by Esteban A. Maringolo

Hi Esteban,

You can do it like this:

WACanvas>>magicalCallbackRegister: aBlock

^ self context actionUrl withField: (context callbacks store: (JSAjaxCallback on: aBlock))

or inside any rendering method:

url := html actionUrl withField: (html renderContext callbacks store: (JSAjaxCallback on: aBlock))

This is typically what Seaside bindings for jQuery plugins (et al.) will do to implement a Seaside callback that maps onto a javascript callback (or callback url).

cheers
Johan

On 28 May 2014, at 00:46, Esteban A. Maringolo <[hidden email]> wrote:

> I want some way to create a url callback in the way of:
>
> callbackUrl := html magicalCallbackRegister: [ :json | self
> renderItemsOnJson: json ]. "answers a url"
>
> JSStream on: '$(''#element'').plugin({dataUrl:"', callbackUrl, '"})'.
>
> which once rendered as JS would be:
>
> $('#element').plugin({dataUrl:"/app/_s=...&_k=...&n"});
>
> I know this must be possible, because Seaside does it for all the
> callbacks, but I don't know how to create a simple callback and then
> get it's url to pass it around.

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

Johan Brichau-2

Re: Generating an callback URL for third-party use

In reply to this post by Esteban A. Maringolo

Bob's answer is similar, but I prefer to explicitly use jQuery's on:selector:do: method.

The full documentation is here: http://api.jquery.com/on/

This way of working with delegated events is really necessary if you have hundreds of callbacks to attach. That never scales and your performance will be horrible (large response size, large seaside session, ...)

Johan

On 28 May 2014, at 02:25, Esteban A. Maringolo <[hidden email]> wrote:

> Additionally to this, is it possible to pass an argument to such callback?
>
> I'm dealing with a data table on the browser and want to show details
> of the selected item once clicked. Instead of creating hundreds of
> callbacks (one per row), I'd like to pass an identifier of such item
> to the callback, in order to be able to retrieve it from the
> datasource. Is it possible?
>
> Is there a better way to register a callback that does exactly the same?
>
> something to replace this:
> collection do: [:each | html anchor callback: [self edit: each]; with: 'Edit' ]
>
> Into a reutilizable callback with an added parameter.
>
> I looked into the WAListTag class and it seems there is no other way
> other than creating a single callback per item.
> Maybe it is cheap in terms of memory and I worrying about an non
> existing problem. But there should be other way.
>
> Regards!
>
> Esteban A. Maringolo
>
>
> 2014-05-27 19:46 GMT-03:00 Esteban A. Maringolo <[hidden email]>:
>> I'm struggling to find a clean way of generating an url to be used for
>> external reference from a javascript library/plugin, such as
>> crossfilter or DataTables.
>>
>> E.g the constructor configuration object has a dataUrl parameter,
>> which will be used by the plugin to retrieve the data.
>>
>> $('element').plugin({dataUrl: "..."});
>>
>> I can generate the expression to retrieve it from anywhere, but what I
>> want is to associate an url with a callback that will answer the data
>> requested.
>>
>> Today I'm assigning results to a local variable using a predefined
>> callback function, and then initializing my data dependent function
>> assuming there is going to be data in that variable.
>>
>> Ej:
>> html document addLoadScript: (
>> ((html jQuery getJson
>> json: [ :json | self renderItemsOnJson: json ];
>> onSuccess: (JSStream on: 'myCallbackFunction(arguments[0]);')
>> asFunction) asFunction assignTo: 'loadCrossfilterData')).
>>
>> html document addLoadScript: (JSStream on: 'loadCrossfilterData()').
>>
>> I want some way to create a url callback in the way of:
>>
>> callbackUrl := html magicalCallbackRegister: [ :json | self
>> renderItemsOnJson: json ]. "answers a url"
>>
>> JSStream on: '$(''#element'').plugin({dataUrl:"', callbackUrl, '"})'.
>>
>> which once rendered as JS would be:
>>
>> $('#element').plugin({dataUrl:"/app/_s=...&_k=...&n"});
>>
>> I know this must be possible, because Seaside does it for all the
>> callbacks, but I don't know how to create a simple callback and then
>> get it's url to pass it around.
>>
>> I hope all I wrote is intelligible. Otherwise I can rephrase it in
>> other unintelligible way. :)
>>
>> Esteban A. Maringolo
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

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

jtuchel

Re: Generating an callback URL for third-party use

In reply to this post by Esteban A. Maringolo

Not sure if it is exactly what you want, but we needed to add some
"landing pages" for our seaside app, where you can have parameters
coming in from other applications.

For this, we used initialRequest: in our registered main component.
There you can access parameters of the request and react to them using
request at:ifPresent: for example.

To "call" into your app would then look like this:
http://yourApp?Parameter1=value1&Parameter2=value2

Please be aware that this is out of session context. But I guess this is
clear anyways.

Joachim

Am 28.05.14 00:46, schrieb Esteban A. Maringolo:

--
-----------------------------------------------------------------------
Objektfabrik Joachim Tuchel mailto:[hidden email]
Fliederweg 1 http://www.objektfabrik.de
D-71640 Ludwigsburg http://joachimtuchel.wordpress.com
Telefon: +49 7141 56 10 86 0 Fax: +49 7141 56 10 86 1

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

Esteban A. Maringolo

Re: Generating an callback URL for third-party use

In reply to this post by Johan Brichau-2

2014-05-28 3:06 GMT-03:00 Johan Brichau <[hidden email]>:

> Hi Esteban,
>
> You can do it like this:
>
> WACanvas>>magicalCallbackRegister: aBlock
>
> ^ self context actionUrl withField: (context callbacks store: (JSAjaxCallback on: aBlock))
>
> or inside any rendering method:
>
> url := html actionUrl withField: (html renderContext callbacks store: (JSAjaxCallback on: aBlock))
>
> This is typically what Seaside bindings for jQuery plugins (et al.) will do to implement a Seaside callback that maps onto a javascript callback (or callback url).
>

Thank you Johan, last night Sebastian Sastre provided me with a
similar solution, but using an WAActionCallback instead of a
JSAjaxCallback, I don't know what was exactly the difference other
than seeing an HTTP redirect when using the former.

Now it works as expected. I got DataTables fetching data from Seaside. :)

Regards!

Esteban A. Maringolo
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Esteban A. Maringolo

Re: Generating an callback URL for third-party use

In reply to this post by Johan Brichau-2

Johan,

2014-05-28 3:12 GMT-03:00 Johan Brichau <[hidden email]>:
> Bob's answer is similar, but I prefer to explicitly use jQuery's on:selector:do: method.
>
> The full documentation is here: http://api.jquery.com/on/
>
> This way of working with delegated events is really necessary if you have hundreds of callbacks to attach. That never scales and your performance will be horrible (large response size, large seaside session, ...)

Thanks for the advice. I looked into jQuery's docs and it's exactly
what I was needing. In fact they use a dataTable as example.

I added the handler this way:

html document addLoadScript: ((html jQuery: '#', tableId, ' tbody')
on: 'click'
selector: 'tr'
do: (
html jQuery ajax
callback: [ :value | Transcript show: 'Clicked row: ', value; cr. ]
value: (html jQuery this text) ) asFunction)

Now I need to transform that single ajax call into something more convoluted :)

Thank you!

Esteban A. Maringolo
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Esteban A. Maringolo

Re: Generating an callback URL for third-party use

Just for the record, I'm sharing what I did..

>>#renderContentOn: html

...

html document addLoadScript: (self dataTableCreationScriptOn: html)

html document addLoadScript: (self tableClickHandler: html)

"Bind the datatable with the jsonResponse"

>>#dataTableCreationScriptOn: html

| actionUrl |

actionUrl := html actionUrl withField: (html callbacks store: (JSAjaxCallback on: [self jsonResponse])).

^((JSStream on: '$(''#' , tableId , ''')', '.dataTable({

"ajax": "', actionUrl asString, '",

"columns": [...]})') assignTo: 'datatable')

"Bind the row click with an ajax callback that sets the selected item in the component and then performs a JQLoad based on the id passed through the callback."

>>#tableClickHandler: html

^ (html jQuery: '#' , tableId , ' tbody')

on: 'click'

selector: 'tr'

do:

(html jQuery ajax

callback: [ :value | selectedItemId := value ] value: html jQuery this text;

onSuccess: (self renderAjaxModalLoadOn: html) asFunction)

"Loads the new html, and then invokes the show of the modal."

>>#renderAjaxModalLoadOn: html

^ (html jQuery: '#' , self idModalContainer) load

html: [ :ajaxHtml | self renderModalOn: ajaxHtml ];

onComplete: ((html jQuery: '#', self idModal) call: 'modal' with: 'show') asFunction

I wish there was a way to simply call the JQLoad passing the argument as I do with the callback:value:, that would save me one round-trip plus not being dependant on the state.

Thank you!

Esteban A. Maringolo

2014-05-28 10:31 GMT-03:00 Esteban A. Maringolo <[hidden email]>:

Johan,

2014-05-28 3:12 GMT-03:00 Johan Brichau <[hidden email]>:

> Bob's answer is similar, but I prefer to explicitly use jQuery's on:selector:do: method.
>
> The full documentation is here: http://api.jquery.com/on/
>
> This way of working with delegated events is really necessary if you have hundreds of callbacks to attach. That never scales and your performance will be horrible (large response size, large seaside session, ...)

Thanks for the advice. I looked into jQuery's docs and it's exactly
what I was needing. In fact they use a dataTable as example.

I added the handler this way:

html document addLoadScript: ((html jQuery: '#', tableId, ' tbody')
on: 'click'
selector: 'tr'
do: (
html jQuery ajax
callback: [ :value | Transcript show: 'Clicked row: ', value; cr. ]
value: (html jQuery this text) ) asFunction)

Now I need to transform that single ajax call into something more convoluted :)

Thank you!

Esteban A. Maringolo

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