Smalltalk › Frameworks & Tools › Seaside › Seaside General

build drop-down select list when clicked

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

7 messages Options

Bob Nemec

build drop-down select list when clicked

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
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Bob Nemec

Paul DeBruicker

Re: build drop-down select list when clicked

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, [hidden email] 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
> [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

Paul DeBruicker

Re: 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, [hidden email] 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
>> [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

Bob Nemec

Re: build drop-down select list when clicked

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 <[hidden email]>
To: [hidden email]; Seaside - general discussion <[hidden email]>
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, [hidden email] 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
>> [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

Bob Nemec

Paul DeBruicker

Re: build drop-down select list when clicked

Hi Bob,

Ooooh I had not noticed that. I tested on Firefox on Linux with Seaside
3.0.7 on pharo 1.4 and it worked with one click only. With Chrome it
works with two unreliably so I'll have to look into that. On Firefox
the list populates while still open after the first click but there is a
slight delay between when the list opens with just one value and the
list is populated with all of the items.

Thanks for the idea of loading the select only when necessary. It had
been annoying to know that sometimes 381 timezones, 253 currencies, and
249 countries were being loaded into a page and never looked at.

On Windows 8 it seems to work as is in Firefox but not Chrome or IE9.
I'll take a look soon at fixing it for other browsers

Paul

On 02/28/2013 12:25 PM, [hidden email] wrote:

> 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 <[hidden email]>
> *To:* [hidden email]; Seaside - general discussion
> <[hidden email]>
> *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, [hidden email] <mailto:[hidden email]> 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
>>> [hidden email]
> <mailto:[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

Paul DeBruicker

Re: build drop-down select list when clicked

Hi Bob,

zI looked a little bit online and didn't see anything where you can use
'click' or 'mousedown' and have the options displayed in one click.
Changing the event to 'mouseover' seems to give the best response on
both Chrome and IE, but the data is loaded when people may not have any
intention of changing the value. If you use 'focus' on Chrome it loads
the data and displays it with on click. With 'focus' on IE you still
need two clicks. Also this doesn't work at all on iOS, where you need
two clicks no matter what.

Firefox works with all of ('click' 'mousedown' 'mouseover' 'focus) .

So now the JS that loads the list of options is this:

MyClass>>loadTimeZoneListOnceFor: anId on: html
^ (html jQuery id: anId)
one: 'focus'
do:
((html jQuery ajax
html: [ :h | self renderTimeZoneList: h ];
async: false;
onSuccess: (self loadOptionsInto: anId on: html)) asFunction:
#('event'))

Hope this helps

Paul

On 02/28/2013 01:03 PM, Paul DeBruicker wrote:

> Hi Bob,
>
> Ooooh I had not noticed that. I tested on Firefox on Linux with Seaside
> 3.0.7 on pharo 1.4 and it worked with one click only. With Chrome it
> works with two unreliably so I'll have to look into that. On Firefox
> the list populates while still open after the first click but there is a
> slight delay between when the list opens with just one value and the
> list is populated with all of the items.
>
> Thanks for the idea of loading the select only when necessary. It had
> been annoying to know that sometimes 381 timezones, 253 currencies, and
> 249 countries were being loaded into a page and never looked at.
>
> On Windows 8 it seems to work as is in Firefox but not Chrome or IE9.
> I'll take a look soon at fixing it for other browsers
>
> Paul
>
>
>
>
> On 02/28/2013 12:25 PM, [hidden email] wrote:
>> 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 <[hidden email]>
>> *To:* [hidden email]; Seaside - general discussion
>> <[hidden email]>
>> *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, [hidden email] <mailto:[hidden email]> 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
>>>> [hidden email]
>> <mailto:[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

Bob Nemec

Re: build drop-down select list when clicked

In reply to this post by Paul DeBruicker

Paul,

In the grand tradition of Smalltalk, I've decided to roll my own drop-down selection list component.

'html select' is just too much of a hassle. My component renders a textInput followed by a drop-down button,

and then under the button and aligned to it's right border I render an empty div...

html label id: self dropDownListId; class: 'flyover'; style: 'top: 16px; ';

onMouseOver: (html jQuery id: self dropDownListId) show;

onMouseOut: (html jQuery id: self dropDownListId) hide;

with: [html space].

...the drop-down button has an 'onClick: ' script...

(html jQuery id: self dropDownListId) load html: [:renderer |

self renderSelectionListOn: renderer]

...which replaces the drop down list with a rendered list. That's where I can put the lazy get...

(size and position values are set by parameter)

renderSelectionListOn: html

html div style: 'height: 200px; width: 80px; border: 1px solid grey; overflow: auto; position: relative; left: 90px; '; with: [

self getSelectionList

do: [:each | self renderSelection: each on: html]

separatedBy: [html break]].

html script: (html jQuery id: self dropDownListId) show.

...#getSelectionList does the lazy value get.

There is a usage difference with the onMouseOut: causing the list to go away, but overall I'm happy with it.

Bob

From: Paul DeBruicker <[hidden email]>
To: [hidden email]; Seaside - general discussion <[hidden email]>
Sent: Thursday, February 28, 2013 12:24:29 AM
Subject: Re: [Seaside] build drop-down select list when clicked

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

Bob Nemec