[Seaside] Re: Dropdown list with autocomplete?
Sabine Knöfel
sabine.knoefel at gmail.com
Thu Oct 17 09:00:11 UTC 2013
Hi Mariano,
I was just trying to use the autocomplete without the onBlur event and
it does also close.
In my code, I refresh some fields in the onBlur callback.
Sabine
On Wed, Oct 16, 2013 at 10:30 PM, Mariano Martinez Peck [via
Smalltalk] <ml-node+s1294792n4715086h61 at n4.nabble.com> wrote:
> Sabine, I have a small question. I was checking your code and I noticed you
> have an onBlur:
>
> renderBlockCurrency: html
> ^ [ :fid :mid |
> | theInputCurrency theInputExchanteRate |
> theInputCurrency := html textInput
> id: mid;
> size: 25;
> value: self currency;
> script: (html jQuery this autocomplete
> minLength: 0;
> sourceCallback: [ :term | self currencyNamesFor: term ]);
> callback: [ :value |
> self currency: value.
> ];
> onBlur:
> (html prototype evaluator
> triggerForm: (self currencyFormID);
> callback: [ :script | ];
> return: false) ]
>
>
> I guess this is to close the popup/autocomplete if you click outside of it
> or something like that.
> I want to do the same, but my component is called directly from within
> Magritte forms/components so the form was already created by Magriite, not
> me.
> And from what I can see, Magritte doesn't seem to set an ID for the form. Is
> there another way to close the autocomplete once it looses focus?
>
> Thanks,
>
>
>
> On Mon, Oct 7, 2013 at 11:13 AM, Sabine Knöfel <[hidden email]> wrote:
>>
>> Hi Mariano,
>>
>> fine that it works for you so long.
>>
>> I am quite busy this days. For this reason, I will keep the solution I
>> have.
>> But if you succeed with your idea, tell me, please.
>>
>> Cheers,
>> Sabine
>>
>>
>> On Mon, Oct 7, 2013 at 3:59 PM, Mariano Martinez Peck [via Smalltalk]
>> <[hidden email]> wrote:
>>>
>>>
>>>
>>>
>>> On Sat, Oct 5, 2013 at 12:39 PM, Sabine Knöfel <[hidden email]> wrote:
>>>>
>>>> Hi Mariano,
>>>>
>>>> thank you for the compliment! :-)
>>>>
>>>
>>> Well, I have just tried it and it works great. So at least we have
>>> autocomplete :) Thanks!
>>>
>>>
>>>>
>>>> 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.
>>>>
>>>
>>> yes, seems very cool. But there are so many libraries like this around...
>>>
>>> btw...what if (as a temp workaround) we make our autocomplete to react on
>>> focus to show all list? Right now it triggers the dropdown when you type
>>> something. But we could change it to trigger the dropdown also when it gets
>>> the focus? Then in our method called by #sourceCallback: we could check if
>>> the string is empty/nil and in such a case we display the whole elements :)
>>> I guess this could work....
>>>
>>> Cheers,
>>>
>>>
>>>>
>>>> Sabine
>>>>
>>>>
>>>>
>>>>
>>>> On Sat, Oct 5, 2013 at 2:39 PM, Mariano Martinez Peck [via Smalltalk]
>>>> <[hidden email]> wrote:
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> On Sat, Oct 5, 2013 at 8:27 AM, Sabine Knöfel <[hidden email]> 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]> 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]>
>>>>>>> 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]>
>>>>>>> > 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]>
>>>>>>> > 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://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>>>> >
>>>>>>> > _______________________________________________
>>>>>>> > seaside mailing list
>>>>>>> > [hidden email]
>>>>>>> > 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://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>>>>
>>>>>>> _______________________________________________
>>>>>>> seaside mailing list
>>>>>>> [hidden email]
>>>>>>> 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]
>>>>>>> To unsubscribe from Seaside, click here.
>>>>>>> NAML
>>>>>>
>>>>>>
>>>>>>
>>>>>> ________________________________
>>>>>> View this message in context: Re: Dropdown list with autocomplete?
>>>>>> Sent from the Seaside General mailing list archive at Nabble.com.
>>>>>>
>>>>>> _______________________________________________
>>>>>> seaside mailing list
>>>>>> [hidden email]
>>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>>>
>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> Mariano
>>>>> http://marianopeck.wordpress.com
>>>>>
>>>>> _______________________________________________
>>>>> seaside mailing list
>>>>> [hidden email]
>>>>> 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 [hidden email]
>>>>> To unsubscribe from Seaside, click here.
>>>>> NAML
>>>>
>>>>
>>>>
>>>> ________________________________
>>>> View this message in context: Re: Dropdown list with autocomplete?
>>>> Sent from the Seaside General mailing list archive at Nabble.com.
>>>>
>>>> _______________________________________________
>>>> seaside mailing list
>>>> [hidden email]
>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>
>>>
>>>
>>>
>>> --
>>> Mariano
>>> http://marianopeck.wordpress.com
>>>
>>> _______________________________________________
>>> seaside mailing list
>>> [hidden email]
>>> 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-tp4712525p4713018.html
>>> To start a new topic under Seaside General, email [hidden email]
>>> To unsubscribe from Seaside, click here.
>>> NAML
>>
>>
>>
>> ________________________________
>> View this message in context: Re: Dropdown list with autocomplete?
>> Sent from the Seaside General mailing list archive at Nabble.com.
>>
>> _______________________________________________
>> seaside mailing list
>> [hidden email]
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>
>
>
> --
> Mariano
> http://marianopeck.wordpress.com
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> 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-tp4712525p4715086.html
> To start a new topic under Seaside General, email
> ml-node+s1294792n86180h75 at n4.nabble.com
> To unsubscribe from Seaside, click here.
> NAML
--
View this message in context: http://forum.world.st/Dropdown-list-with-autocomplete-tp4712525p4715203.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/20131017/b0148561/attachment-0001.htm
More information about the seaside
mailing list