[Seaside] build drop-down select list when clicked

[bobn at rogers.com]

Paul,
Thanks for all the work. This is not something I would have figured out on my own.

In my example the list is now rendered after the first click and displayed on the second click, so from the user's point of view two clicks are needed to get the rendered list.  That kind of makes sense, since the first click triggers the 'click' event to build the selection list. Would there be a way to have the list displayed after build, rather than waiting for the second click?

Are you seeing the same click sequence? If not I'll go through my code more carefully.

I've tried the code first in VW 7.7.1 with Seaside 3.0 and again in the current Pharo one-click image with Seaside 3.0.7

Thanks again,

Bob



________________________________
 From: Paul DeBruicker <pdebruic at gmail.com>
To: bobn at rogers.com; Seaside - general discussion <seaside at lists.squeakfoundation.org> 
Sent: Thursday, February 28, 2013 12:46:52 PM
Subject: Re: [Seaside] build drop-down select list when clicked
 
I figured out the rest of it. The original callback from the select
doesn't do anything with the value from the expanded list.  If you add a
hiddenInput after the select and serialize that with the selected value
of the select when the select changes, then things work nicely.

So change the renderSelect: method to

MyClass>>renderSelect:html
    html select
        id: html lastId;
        list: (Array with: self timeZone key);
        script: (self loadSelectListOnceFor: html lastId on: html);
        onChange: (self serializeHiddenInput: 'tzId' withValueFrom: html
lastId on: html);
        selected: self timeZone key
        
    html hiddenInput
        id: 'tzId';
        callback: [ :val | self timeZone: (Timezone at: val) ].


and add

MyClass>>serializeHiddenInput: anId withValueFrom: selectId on: html
    ^ ((html jQuery id: anId) value: ((html jQuery id: selectId) find:
'option:selected') contents text)
        , (html jQuery ajax serialize: (html jQuery id: anId))




On 02/27/2013 09:24 PM, Paul DeBruicker wrote:
> I haven't figured out how to get the browser to recognize the changed
> value for the select, so the callback get the updated value if the user
> changes their choice.  Probably need to clone the select after adding
> the options then replace the original with the new version.  I'm not
> sure yet.  But it would be handy to know.  So it needs some work but
> what I outline below loads a bunch of <option> tags into the <select>
> and serializes the select onChange: to the callback.  Just not the value
> the user chooses yet.
> 
> 
> To load new select items into the select menu you need to create the
> <option> tags that comprise the select list and then stick them in there.
> 
> Assuming your list is the Chronos list of Timezone keys you could do it
> like this:
> 
> MyClass>>renderSelect: html
>     html select
>         id: html lastId;
>         list: (Array with: self timeZone key);
>         script: (self loadSelectListOnce: html);
>         onChange: html jQuery post serializeThis;
>         selected: self timeZone key;
>         callback: [ :val | self timeZone: (Timezone at: val) ].
> 
> MyClass>>loadSelectListOnceFor: anId on: html
>     ^ (html jQuery id: anId)
>         one: 'click'
>         do:
>             (html jQuery ajax
>                 html: [ :h | self renderTimeZoneList: h ];    
>                 onSuccess: (self loadOptionsInto: anId on: html))
> 
> 
> MyClass>>renderTimeZoneList:html
>     Timezone allRegisteredKeys asSortedCollection
>         doWithIndex: [ :eachTimeZone :index |
>             html option
>                 value: index + 1;
>                 with: eachTimeZone ]
> 
> MyClass>>loadOptionsInto: anId on: html
>     ^ (JSStream
>         on:'$("#' , anId ,' option:first").after(data)') asFunction: #('data'
> 'status' 'jqXhr')
> 
> 
> 
> Good luck
> 
> 
> Paul
> 
> 
> 
> On 02/27/2013 08:52 AM, bobn at rogers.com wrote:
>> Hello,
>> Is there a way to build the 'select' list when the drop-down button is
>> pressed?
>>
>> Our application uses drop-down lists for options that have a short list
>> to pick from (longer lists use a lightbox list prompt).
>> In most cases, the list of values is not needed, since the user is not
>> going to change the selection. 
>> So, I'd prefer to defer getting the list to when the user asks for it
>> (round trip time to get the list is less than 50ms).
>> Getting the data is not expensive, but including it in the initial data
>> retrieval for the full view is a coding hassle. 
>>
>> I've tried various #onClick: code, like loading a new rendering of the
>> select component with the list populated, but no luck.
>>
>> i.e.
>> html select
>> onClick: ("get the list and display it");
>> list: (Array with: initialSelection); "for initial display"
>> selected: initialSelection; 
>> callback: [:value | ... ]
>> Thanks for any help,
>> Bob Nemec
>>
>>
>> _______________________________________________
>> seaside mailing list
>> seaside at lists.squeakfoundation.org
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
> 
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20130228/81c33998/attachment.htm