Smalltalk › Frameworks & Tools › Seaside › Seaside General

JQueryUI sortable and get smalltalk callback upon change

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

6 messages Options

Mariano Martinez Peck

JQueryUI sortable and get smalltalk callback upon change

Hi guys,

I am trying to use JQueryUI sortable for making the rows of a table sortable. I could make it to work at the client side but I don't now how to be able to get the values at the server side in order to update my internal OrderedCollection.

I found #callbackSortable: but it seems I am doing something wrong... This is what I am doing:

html script: ((html jQuery: 'tbody') sortable

onUpdate: (html jQuery ajax

callbackSortable: [ :event |

event inspect.

]))

But the event inspected has nothing.. Everything from "passanger" is nil. I guess I may be missing passing passengers..but I don't know what nor where.

Any idea?

Thanks,

Mariano
http://marianopeck.wordpress.com

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

Mariano Martinez Peck

Re: JQueryUI sortable and get smalltalk callback upon change

On Mon, Nov 24, 2014 at 11:01 AM, Mariano Martinez Peck <[hidden email]> wrote:

Hi guys,

I am trying to use JQueryUI sortable for making the rows of a table sortable. I could make it to work at the client side but I don't now how to be able to get the values at the server side in order to update my internal OrderedCollection.

I found #callbackSortable: but it seems I am doing something wrong... This is what I am doing:

html script: ((html jQuery: 'tbody') sortable
onUpdate: (html jQuery ajax
callbackSortable: [ :event |

event inspect.
]))

But the event inspected has nothing.. Everything from "passanger" is nil. I guess I may be missing passing passengers..but I don't know what nor where.

I have also found I could do something like this:

('#sortable').sortable({
    start: function(e, ui) {
        // creates a temporary attribute on the element with the old index
        $(this).attr('data-previndex', ui.item.index());
    },
    update: function(e, ui) {
        // gets the new and old index then removes the temporary attribute
        var newIndex = ui.item.index();
        var oldIndex = $(this).attr('data-previndex');
        $(this).removeAttr('data-previndex');
    }
});

but still..I don't how to build a callback or something so that to receive that new and old index at the server side.

Any help is appreciated.

Any idea?

Thanks,

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

Mariano
http://marianopeck.wordpress.com

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

Bob Arning-2

Re: JQueryUI sortable and get smalltalk callback upon change

In reply to this post by Mariano Martinez Peck

renderContentTableOn: html

    html table: [
        html tableBody
            script: (html jQuery new sortable
                onStop: (html jQuery ajax
                    callback: [ :values | self halt. items := values.]
                    passengers: (html jQuery this find: 'tr')));
            with: [
                items do: [ :each |
                    html tableRow
                            class: 'ui-corner-all';
                            passenger: each;
                        with: [html tableData
                            with: each
                        ]
                ]
        ]
    ]

seems to work.

On 11/24/14 10:01 AM, Mariano Martinez Peck wrote:

Hi guys,

I am trying to use JQueryUI sortable for making the rows of a table sortable. I could make it to work at the client side but I don't now how to be able to get the values at the server side in order to update my internal OrderedCollection.

I found #callbackSortable: but it seems I am doing something wrong... This is what I am doing:

html script: ((html jQuery: 'tbody') sortable

onUpdate: (html jQuery ajax

callbackSortable: [ :event |

event inspect.

]))

But the event inspected has nothing.. Everything from "passanger" is nil. I guess I may be missing passing passengers..but I don't know what nor where.

Any idea?

Thanks,

--

Mariano
http://marianopeck.wordpress.com
_______________________________________________
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

Mariano Martinez Peck

Re: JQueryUI sortable and get smalltalk callback upon change

On Mon, Nov 24, 2014 at 12:45 PM, Bob Arning <[hidden email]> wrote:

renderContentTableOn: html

    html table: [
        html tableBody
            script: (html jQuery new sortable
                onStop: (html jQuery ajax
                    callback: [ :values | self halt. items := values.]
                    passengers: (html jQuery this find: 'tr')));
            with: [
                items do: [ :each |
                    html tableRow
                            class: 'ui-corner-all';
                            passenger: each;
                        with: [html tableData
                            with: each
                        ]
                ]
        ]
    ]

seems to work.

thanks Bob..that worked like a char. Let me ask.... how does this magic line happens:

callback: [ :values | self halt. items := values.]

I mean...how does that ajax call know that the callback will have the items as argument?

On 11/24/14 10:01 AM, Mariano Martinez Peck wrote:
Hi guys,

I am trying to use JQueryUI sortable for making the rows of a table sortable. I could make it to work at the client side but I don't now how to be able to get the values at the server side in order to update my internal OrderedCollection.

I found #callbackSortable: but it seems I am doing something wrong... This is what I am doing:

html script: ((html jQuery: 'tbody') sortable

onUpdate: (html jQuery ajax

callbackSortable: [ :event |

event inspect.

]))

But the event inspected has nothing.. Everything from "passanger" is nil. I guess I may be missing passing passengers..but I don't know what nor where.

Any idea?

Thanks,

--

Mariano
http://marianopeck.wordpress.com
_______________________________________________
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

Mariano
http://marianopeck.wordpress.com

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

Bob Arning-2

Re: JQueryUI sortable and get smalltalk callback upon change

It's not just that line, it's #callback:passengers: which is a variant of #callback:value:. Which means seaside supplies some code (html jQuery this find: 'tr') to the client and the client returns the value of this to the server. And seaside know to pass this returned value to the block. See:

callback: aBlock value: anObject
"Register aBlock as a secondary callback. anObject is a reference to a Javascript object on the client-side. The object will be sent back to the server as a string and passed into aBlock. Multiple secondary callbacks can be defined with one receiver.

Note: anObject should be a single literal Javascript object (String, Number, Boolean). The object is transfered from client to server as the print-string of the object and passed into the callback block as a Smalltalk String."

On 11/24/14 3:02 PM, Mariano Martinez Peck wrote:

On Mon, Nov 24, 2014 at 12:45 PM, Bob Arning <[hidden email]> wrote:

renderContentTableOn: html

    html table: [
        html tableBody
            script: (html jQuery new sortable
                onStop: (html jQuery ajax
                    callback: [ :values | self halt. items := values.]
                    passengers: (html jQuery this find: 'tr')));
            with: [
                items do: [ :each |
                    html tableRow
                            class: 'ui-corner-all';
                            passenger: each;
                        with: [html tableData
                            with: each
                        ]
                ]
        ]
    ]

seems to work.

thanks Bob..that worked like a char. Let me ask.... how does this magic line happens:

callback: [ :values | self halt. items := values.]

I mean...how does that ajax call know that the callback will have the items as argument?
On 11/24/14 10:01 AM, Mariano Martinez Peck wrote:
Hi guys,

I am trying to use JQueryUI sortable for making the rows of a table sortable. I could make it to work at the client side but I don't now how to be able to get the values at the server side in order to update my internal OrderedCollection.

I found #callbackSortable: but it seems I am doing something wrong... This is what I am doing:

html script: ((html jQuery: 'tbody') sortable

onUpdate: (html jQuery ajax

callbackSortable: [ :event |

event inspect.

]))

But the event inspected has nothing.. Everything from "passanger" is nil. I guess I may be missing passing passengers..but I don't know what nor where.

Any idea?

Thanks,

--

Mariano
http://marianopeck.wordpress.com
_______________________________________________
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
--

Mariano
http://marianopeck.wordpress.com
_______________________________________________
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

Mariano Martinez Peck

Re: JQueryUI sortable and get smalltalk callback upon change

Thanks Bob for your explanation, very clear.

On Mon, Nov 24, 2014 at 4:57 PM, Bob Arning <[hidden email]> wrote:

It's not just that line, it's #callback:passengers: which is a variant of #callback:value:. Which means seaside supplies some code (html jQuery this find: 'tr') to the client and the client returns the value of this to the server. And seaside know to pass this returned value to the block. See:

callback: aBlock value: anObject
"Register aBlock as a secondary callback. anObject is a reference to a Javascript object on the client-side. The object will be sent back to the server as a string and passed into aBlock. Multiple secondary callbacks can be defined with one receiver.

Note: anObject should be a single literal Javascript object (String, Number, Boolean). The object is transfered from client to server as the print-string of the object and passed into the callback block as a Smalltalk String."
On 11/24/14 3:02 PM, Mariano Martinez Peck wrote:
On Mon, Nov 24, 2014 at 12:45 PM, Bob Arning <[hidden email]> wrote:

renderContentTableOn: html

    html table: [
        html tableBody
            script: (html jQuery new sortable
                onStop: (html jQuery ajax
                    callback: [ :values | self halt. items := values.]
                    passengers: (html jQuery this find: 'tr')));
            with: [
                items do: [ :each |
                    html tableRow
                            class: 'ui-corner-all';
                            passenger: each;
                        with: [html tableData
                            with: each
                        ]
                ]
        ]
    ]

seems to work.

thanks Bob..that worked like a char. Let me ask.... how does this magic line happens:

callback: [ :values | self halt. items := values.]

I mean...how does that ajax call know that the callback will have the items as argument?
On 11/24/14 10:01 AM, Mariano Martinez Peck wrote:
Hi guys,

I am trying to use JQueryUI sortable for making the rows of a table sortable. I could make it to work at the client side but I don't now how to be able to get the values at the server side in order to update my internal OrderedCollection.

I found #callbackSortable: but it seems I am doing something wrong... This is what I am doing:

html script: ((html jQuery: 'tbody') sortable

onUpdate: (html jQuery ajax

callbackSortable: [ :event |

event inspect.

]))

But the event inspected has nothing.. Everything from "passanger" is nil. I guess I may be missing passing passengers..but I don't know what nor where.

Any idea?

Thanks,

--

Mariano
http://marianopeck.wordpress.com
_______________________________________________
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
--

Mariano
http://marianopeck.wordpress.com
_______________________________________________
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

Mariano
http://marianopeck.wordpress.com

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