[Seaside] build drop-down select list when clicked

[Paul DeBruicker]

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
>>
>