[Seaside] Re: Dropdown list with autocomplete?

Sabine Knöfel sabine.knoefel at gmail.com
Sat Oct 5 11:27:24 UTC 2013 

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

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.

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] <
ml-node+s1294792n4712549h14 at n4.nabble.com> 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
> 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-tp4712525p4712640.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/73402849/attachment-0001.htm

More information about the seaside mailing list