How to serialize jQuery UI Selectable?

Dear List

Here's a (quick?) question:

In the Seaside jQuery functional tests > 'Form and Form Elements' > 'Multi-Select-List', the values selected in the list are serialized and displayed immediately to the right of the form.

How can the jQuery UI Selectable be modified to behave in the same way?  The jQuery website has it working nicely: http://jqueryui.com/demos/selectable/serialize.html but I can't figure out how to do this in Seaside!

Thanks!

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

This demo does not go back to the server, that's purely client side.

Have a look at JQSelectableFunctionalTest for a demo in Seaside that
serializes back the selected elements to the server.

Lukas

On 28 January 2010 22:33, AA <[hidden email]> wrote:


--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Thanks for replying so quickly!  I should have posted the code to show what I'm referring to.  This is from JQSelectableFunctionalTest, in Seaside 3.0a5:


renderContentOn: html
        html unorderedList
                script: (html jQuery new selectable
                        onStop: (html jQuery ajax
                                callback: [ :value | selected := value asSet ]
                                passengers: (html jQuery this find: '.ui-selected')));
                with: [
                        self vegetables do: [ :each |
                                html listItem
                                        class: 'ui-corner-all';
                                        class: 'ui-selected' if: (selected includes: each);
                                        passenger: each;
                                        with: each ] ]


While there is a callback, I can't figure out how to display the selected items.


For comparison, here is the code from Multi-Select-List, in JQFormFunctionalTest (I cleaned up the original code):

renderContentOn: html
        html fieldSet: [
                html span: [
                        html multiSelect
                                size: 9;
                                list: (1 to: 9);
                                selected: multiSelectList;
                                callback: [ :value | multiSelectList := value ];
                                onChange: (
                                        " update the paragraph "
                                        ((html jQuery this
                                                parents: 'fieldset';
                                                find: 'p') load
                                                " serialize all nearby form elements "
                                                serialize: (html jQuery this
                                                        parents: 'span';
                                                        find: ':input'))
                                        html: [ :h | h render: multiSelectList ]) ].
                html paragraph: multiSelectList ]


This includes instructions to serialize the elements, but I'm having a lot of problems trying to do the same thing in the Selectable example.

I'd be grateful for your insight!

Thanks,

Amir



On Thu, 28 Jan 2010 23:36:35 +0100
Lukas Renggli <[hidden email]> wrote:

> This demo does not go back to the server, that's purely client side.
>
> Have a look at JQSelectableFunctionalTest for a demo in Seaside that
> serializes back the selected elements to the server.
>
> Lukas
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Startign from the code example:

> renderContentOn: html

As a target of the list:

          html div id: 'listing'; with: selected.

>        html unorderedList
>                script: (html jQuery new selectable
>                        onStop: (html jQuery ajax
>                                callback: [ :value | selected := value asSet ]
>                                passengers: (html jQuery this find: '.ui-selected'));

And then to update the above DIV whenever the selection changes:

                                 script: [ :s | s add: ((s jQuery:
#listing) html: selected) ]);

>                with: [
>                        self vegetables do: [ :each |
>                                html listItem
>                                        class: 'ui-corner-all';
>                                        class: 'ui-selected' if: (selected includes: each);
>                                        passenger: each;
>                                        with: each ] ]

As usual I have written that directly in the mail, so there might be bugs :-)

Lukas




--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Thanks, that works perfectly!

Now I'll figure out exactly *why* it works... ;-)

(I spent several days trying to figure this one out, looking through the mailing list, documentation, examples, etc.)

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

The Seaside code is no different than what is on http://docs.jquery.com/ or http://jqueryui.com/demos/. It's basically just written in another language, so if you find information regarding those libraries, it will apply the same way to Seaside.

RS

---

Hotmail: Powerful Free email with security by Microsoft. Get it now.
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside