[Seaside] Re: Dropdown list with autocomplete?
Sabine Knöfel
sabine.knoefel at gmail.com
Sat Oct 5 15:39:24 UTC 2013
Hi Mariano,
thank you for the compliment! :-)
An autocomplete as in http://ivaynberg.github.io/select2/ would be very
useful for me too, especially at the page "Days", where the user selects
countries and cities.
This select2 seems to be very powerful. Please let me know if you find an
integration into Seaside.
Sabine
On Sat, Oct 5, 2013 at 2:39 PM, Mariano Martinez Peck [via Smalltalk] <
ml-node+s1294792n4712642h97 at n4.nabble.com> wrote:
>
>
>
> On Sat, Oct 5, 2013 at 8:27 AM, Sabine Knöfel <[hidden email]<http://user/SendEmail.jtp?type=node&node=4712642&i=0>
> > wrote:
>
>> Hi Mariano,
>>
>> I have a working dropdown list with jQuery autocomplete in my seaside
>> application.
>>
>> (Live: www.spesenfuchs.de -> "Ohne Login benutzen", switch to english,
>> then page "Receipts")
>>
>>
> Hi Sabine,
>
> First, let me thank you for the amount of time you took to answer!
> Second, your website looks sooooo cool, really, very nice and interesting
> idea. Congrats!
>
> The field you are talking about is the currency right? While this is a big
> step forward I wondered the following.
> In the currency example, the dropdown list does not appear until you type
> at least one word, right?
> I would love a combination of a typical drop down list in which the user
> can pick scrolling from a list to see the options, while also start typing
> and filtering.
> See the basic example from here: http://ivaynberg.github.io/select2/
>
> I created a fileout with a reduced version of this. This is only demo, I
>> removed all css stuf etc.
>>
>> To see it:
>> 1) take new image
>> 2) install seaside from configurations browser
>> 3) install jQuery widget box
>> Gofer new
>> url: 'http://smalltalkhub.com/mc/Seaside/JQueryWidgetBox/main';
>> package: 'ConfigurationOfJQueryWidgetBox';
>> load.
>> (Smalltalk at: #ConfigurationOfJQueryWidgetBox) project stableVersion load
>> 4) file in the code below
>> 5) do it: RKADemoView initialize
>> 6) do it: (ZnZincServerAdaptor port: 8085) start.
>>
>> 5) in Browser
>> http://localhost:8085/RKADemo
>>
>> The inspect shows that the currency has been set after selecting it.
>> I hope this is what your have been looking for.
>>
>>
> Thanks! Having a autocomplete working even if it is not the best I would
> need, is way better than my current state and very appreciated!!
> I will test it during the weekend or on Monday (have to leave now).
>
> Thank you very much!
>
>
>
>
>> Sabine
>>
>> FILEOUT:
>>
>> 'From Pharo2.0 of 7 March 2013 [Latest update: #20618] on 5 October 2013
>> at 1:18:06 pm'!
>> WAComponent subclass: #RKADemoView
>> instanceVariableNames: 'currency'
>> classVariableNames: ''
>> poolDictionaries: ''
>> category: 'RKA24-View'!
>>
>> !RKADemoView methodsFor: 'updateRoot' stamp: 'sabineknoefel 10/5/2013
>> 12:37'!
>> updateRoot: aHtmlRoot
>> super updateRoot: aHtmlRoot.
>> aHtmlRoot javascript url: '
>> https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'.
>> aHtmlRoot javascript url: '
>> http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'.
>> aHtmlRoot javascript url: '
>> https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js'.
>> ! !
>>
>>
>> !RKADemoView methodsFor: 'accessing' stamp: 'sabineknoefel 10/5/2013
>> 12:07'!
>> currency
>> ^ currency! !
>>
>> !RKADemoView methodsFor: 'accessing' stamp: 'sabineknoefel 10/5/2013
>> 13:17'!
>> currency: aString
>> currency := aString! !
>>
>>
>> !RKADemoView methodsFor: 'ids' stamp: 'sabineknoefel 10/5/2013 12:31'!
>> currencyFormID
>> ^ 'currencyFormID'! !
>>
>>
>> !RKADemoView methodsFor: 'render-blocks' stamp: 'sabineknoefel 10/5/2013
>> 13:17'!
>> currencyNamesFor: aString
>> ^ {'Euro'.
>> 'Dinar'.
>> 'Yen'.
>> 'Schilling'.
>> 'Som'.
>> 'Riel'.
>> 'Franc'.
>> 'Won'.
>> 'Tenge'.
>> 'Kip'.
>> 'Pfund'.
>> 'Rupie'} select: [ :each | ('*',aString,'*') match: each ]
>>
>> ! !
>>
>> !RKADemoView methodsFor: 'render-blocks' stamp: 'sabineknoefel 10/5/2013
>> 13:12'!
>> renderBlockCurrency: html
>> ^ [ :fid :mid |
>> | theInputCurrency theInputExchanteRate |
>> theInputCurrency := html textInput
>> id: mid;
>> size: 25;
>> value: self currency;
>> script: (html jQuery this autocomplete sourceCallback: [ :term |
>> self currencyNamesFor: term ]);
>> callback: [ :value |
>> self currency: value.
>> self currency inspect ];
>> onBlur:
>> (html prototype evaluator
>> triggerForm: (self currencyFormID);
>> callback: [ :script | ];
>> return: false) ] ! !
>>
>>
>> !RKADemoView methodsFor: 'rerender' stamp: 'sabineknoefel 10/5/2013
>> 12:33'!
>> reRenderCurrencyOn: html
>> self reRenderControl: (self renderBlockCurrency: html) formID: self
>> currencyFormID on: html! !
>>
>>
>> !RKADemoView methodsFor: 'rendering' stamp: 'sabineknoefel 10/5/2013
>> 12:33'!
>> renderContentOn: html
>> self renderCurrencyOn: html! !
>>
>> !RKADemoView methodsFor: 'rendering' stamp: 'sabineknoefel 10/5/2013
>> 12:20'!
>> renderControl: aBlock formID: aFormID on: html
>> html form
>> id: aFormID;
>> with: [ aBlock value: aFormID value: aFormID , 'id']! !
>>
>> !RKADemoView methodsFor: 'rendering' stamp: 'sabineknoefel 10/5/2013
>> 12:32'!
>> renderCurrencyOn: html
>> self
>> renderControl: (self renderBlockCurrency: html)
>> formID: self currencyFormID
>> on: html! !
>>
>>
>> !RKADemoView methodsFor: 'updateOn' stamp: 'sabineknoefel 10/5/2013
>> 12:33'!
>> updateCurrencyOn: html
>> html prototype element
>> id: self currencyFormID;
>> update: [ :renderer | self reRenderCurrencyOn: html renderer ]! !
>>
>> "-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- "!
>>
>> RKADemoView class
>> instanceVariableNames: ''!
>>
>> !RKADemoView class methodsFor: 'initialize' stamp: 'sabineknoefel
>> 10/5/2013 12:36'!
>> canBeRoot
>> ^ true! !
>>
>> !RKADemoView class methodsFor: 'initialize' stamp: 'sabineknoefel
>> 10/5/2013 13:11'!
>> initialize
>> "RKADemoView initialize."
>>
>> WAAdmin register: self asApplicationAt: 'RKADemo'.
>> JQuery functionName: 'jQuery'.
>> ! !
>>
>>
>> RKADemoView initialize!
>>
>>
>>
>> On Fri, Oct 4, 2013 at 5:44 PM, Paul DeBruicker [via Smalltalk] <[hidden
>> email] <http://user/SendEmail.jtp?type=node&node=4712640&i=0>> wrote:
>>
>>> The JQDeployment* and JQGoogle* libraries are the same file, one is
>>> served from the image and the other is served from Google's CDN. Choose
>>> either one and go with that.
>>>
>>> Also the JQuery libraries should come first in the list as I assume they
>>> are served in the order displayed and the JQuery dependent stuff will fail
>>> if its not present when they are loaded.
>>>
>>> Check your browser's development tools for javascript errors.
>>>
>>> In Chrome I think you hit F12 to open the dev tools
>>>
>>>
>>>
>>> On Oct 4, 2013, at 8:07 AM, Mariano Martinez Peck <[hidden email]<http://user/SendEmail.jtp?type=node&node=4712549&i=0>>
>>> wrote:
>>>
>>> > Thanks Johan. I am trying the very same example of
>>> JQAutocompleteFunctionalTest doing a simple:
>>> >
>>> > self call: JQAutocompleteFunctionalTest new.
>>> >
>>> > in my app but it does not seem to work...nothing is displayed. I put a
>>> halt in sourceCallback: but never halts.
>>> > It is the first time I install JQuery in this app so I may have done
>>> something wrong.
>>> > The file libraries I added are the ones you can see in the screenshot.
>>> Is there anything else I should do?
>>> >
>>> > Thanks!
>>> >
>>> >
>>> >
>>> > On Fri, Oct 4, 2013 at 11:14 AM, Johan Brichau <[hidden email]<http://user/SendEmail.jtp?type=node&node=4712549&i=1>>
>>> wrote:
>>> > At a certain point in time, this autocompleter got added to jQuery
>>> itself.
>>> >
>>> > Therefore, the jQuery autocomplete comes with the jQueryUI package of
>>> Seaside itself.
>>> > Look for JQAutocomplete if you loaded jQueryUI with Seaside
>>> >
>>> > On 04 Oct 2013, at 16:00, Mariano Martinez Peck <[hidden email]<http://user/SendEmail.jtp?type=node&node=4712549&i=2>>
>>> wrote:
>>> >
>>> > > Hi guys,
>>> > >
>>> > > I am searching for a dropdown list with autocomplete, ideally,
>>> already integrated with seaside. I am experimenting with Twitter Bootstrap
>>> for some part of the application so I saw there are a few projects like
>>> "Select2", "typeahead", "Bootstrap Combobox", etc...they normall end up
>>> using jquery.js. But none of them is already integrated in Seaside...
>>> > >
>>> > > I saw JQueryWidgetBox, but in
>>> http://smalltalkhub.com/#!/~Seaside/JQueryWidgetBox
>>> > > in the entry: Autocomplete
>>> http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
>>> > > If you follow that it says the plugin has been deprecated...
>>>
>>> > >
>>> > > I am using Seaside 3.0. Anyway has a working dropdown list with
>>> autocomplete?
>>> > >
>>> > > Thank you very much in advance,
>>> > >
>>> > > --
>>> > > Mariano
>>> > > http://marianopeck.wordpress.com
>>> > > _______________________________________________
>>> > > seaside mailing list
>>> > > [hidden email]<http://user/SendEmail.jtp?type=node&node=4712549&i=3>
>>> > > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>> >
>>> > _______________________________________________
>>> > seaside mailing list
>>> > [hidden email] <http://user/SendEmail.jtp?type=node&node=4712549&i=4>
>>> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>> >
>>> >
>>> >
>>> > --
>>> > Mariano
>>> > http://marianopeck.wordpress.com
>>> > <Screen Shot 2013-10-04 at 12.04.34
>>> PM.png>_______________________________________________
>>> > seaside mailing list
>>> > [hidden email] <http://user/SendEmail.jtp?type=node&node=4712549&i=5>
>>> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>
>>> _______________________________________________
>>> seaside mailing list
>>> [hidden email] <http://user/SendEmail.jtp?type=node&node=4712549&i=6>
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>
>>>
>>> ------------------------------
>>> If you reply to this email, your message will be added to the
>>> discussion below:
>>>
>>> http://forum.world.st/Dropdown-list-with-autocomplete-tp4712525p4712549.html
>>> To start a new topic under Seaside General, email [hidden email]<http://user/SendEmail.jtp?type=node&node=4712640&i=1>
>>> To unsubscribe from Seaside, click here.
>>> NAML<http://forum.world.st/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
>>>
>>
>>
>> ------------------------------
>> View this message in context: Re: Dropdown list with autocomplete?<http://forum.world.st/Dropdown-list-with-autocomplete-tp4712525p4712640.html>
>> Sent from the Seaside General mailing list archive<http://forum.world.st/Seaside-General-f86180.html>at Nabble.com.
>>
>> _______________________________________________
>> seaside mailing list
>> [hidden email] <http://user/SendEmail.jtp?type=node&node=4712642&i=1>
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>
>
> --
> Mariano
> http://marianopeck.wordpress.com
>
> _______________________________________________
> seaside mailing list
> [hidden email] <http://user/SendEmail.jtp?type=node&node=4712642&i=2>
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
> ------------------------------
> If you reply to this email, your message will be added to the discussion
> below:
>
> http://forum.world.st/Dropdown-list-with-autocomplete-tp4712525p4712642.html
> To start a new topic under Seaside General, email
> ml-node+s1294792n86180h75 at n4.nabble.com
> To unsubscribe from Seaside, click here<http://forum.world.st/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=1310907&code=c2FiaW5lLmtub2VmZWxAZ21haWwuY29tfDEzMTA5MDd8MTA0OTM5MTYx>
> .
> NAML<http://forum.world.st/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
>
--
View this message in context: http://forum.world.st/Dropdown-list-with-autocomplete-tp4712525p4712653.html
Sent from the Seaside General mailing list archive at Nabble.com.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20131005/d82b07f7/attachment-0001.htm
More information about the seaside
mailing list