[aida] Dropdown menus

Dirk Verleysen dirk.verleysen at roots.be
Mon Oct 15 23:05:18 CEST 2007


This button was on a form that had the drop down's. I managed an onClickUpdate: and got this working thru that but I had the impression that there was no real submit. Apart from 4 menu's I had no other inputs. I'll try to put a breakpoint in acceptInputs tomorrow and try to find out what is happening.

Another question is that I have a list that is updated after I click the button. The page is generated but the first time shown without css layout. I have to refresh to get the css working. Any idea what is happening ?

Dirk

-----Oorspronkelijk bericht-----
Van: aida-bounces op aidaweb.si [mailto:aida-bounces op aidaweb.si] Namens Janko Mivšek
Verzonden: maandag 15 oktober 2007 22:38
Aan: AIDA/Web general discussion list
Onderwerp: Re: [aida] Dropdown menus

Dirk,

Dirk Verleysen wrote:
> Got this working and it's looking fine.
> 
> Now I have a button but there is no responds. What the best place to put a 
> breakpoint?

A button does not submit a form? Does button at least cause page to be 
reloaded? Do you have a proper action method for that view?

To debug form submitting put a checkpoint on WebApplication acceptInputs.

Janko

> 
> Dirk
> ----- Original Message ----- 
> From: "Janko Mivšek" <janko.mivsek op eranova.si>
> To: "AIDA/Web general discussion list" <aida op aidaweb.si>
> Sent: Monday, October 15, 2007 3:38 PM
> Subject: Re: [aida] Dropdown menus
> 
> 
>> Dirk,
>>
>> This should work if you have id39 element in its own method. editorLine
>> and editorLineLabel elements have a class set, not id, so they don't
>> interfere.
>>
>> To debug such a problem, you can put a breakpoint in WebApplication
>> #respondToAjaxRequest and step ahead to see, what is wrong.
>>
>> Janko
>>
>> Dirk Verleysen wrote:
>>> Not really...
>>>
>>> I have the following html right now.
>>>
>>> <div id="id39">
>>>       <div class="editorLine">
>>>        <div class="editorLineLabel">
>>>        Seizoen:
>>>        </div>
>>>       <select onChange="var field = Form.Element.serialize('id40'); new
>>> Ajax.Updater('id39', '/calendarbook.html', {method: 'post', postBody: 
>>> field
>>> + '&view=main&ajaxRequest&ajaxGetElementId=id39', evalScripts: true}); "
>>> id="id40" name="field23"><option></option><option
>>> selected>2007-2008</option> </select>
>>>
>>>       </div>
>>>       <div class="editorLine">
>>>        <div class="editorLineLabel">
>>>        Serie:
>>>        </div>
>>>       <select onChange="var field = Form.Element.serialize('id41'); new
>>> Ajax.Updater('id39', '/calendarbook.html', {method: 'post', postBody: 
>>> field
>>> + '&view=main&ajaxRequest&ajaxGetElementId=id39', evalScripts: true}); "
>>> id="id41" name="field24"><option></option><option>Duiveltjes -6</option>
>>> <option>Duiveltjes -8</option> <option selected>Duiveltjes -7</option>
>>> <option>Preminiemen -9</option> <option>Preminiemen -10</option>
>>> <option>Miniemen B</option> <option>1e Ploeg</option>
>>> <option>Reserves</option> <option>Scholieren</option> <option>Miniemen
>>> A</option> <option>Knapen</option> </select>
>>>
>>>       </div>
>>>       <div class="editorLine">
>>>        <div class="editorLineLabel">
>>>        Team:
>>>        </div>
>>>       <select onChange="var field = Form.Element.serialize('id42'); new
>>> Ajax.Updater('id39', '/calendarbook.html', {method: 'post', postBody: 
>>> field
>>> + '&view=main&ajaxRequest&ajaxGetElementId=id39', evalScripts: true}); "
>>> id="id42" name="field25"><option></option><option>Duiveltjes -7</option>
>>> <option>Baardegem</option> <option>Hofstade A</option> <option>Hofstade
>>> B</option> <option>Doggen</option> <option>Erembodegem</option>
>>> <option>Nieuwerkerken</option> <option>ST.Denderleeuw</option>
>>> <option>Terjoden-Welle B</option> <option>VB.Meldert</option>
>>> <option>VCE.Aalst</option> <option>Lebeke-Aalst</option>
>>> <option>Kerksken</option> <option>Mere</option> <option>Rangers
>>> Opdorp</option> <option>Terjoden-Welle A</option> </select>
>>>
>>>       </div>
>>>      </div>
>>>
>>> I guess the WebElement editorLine and editorLineLabel are interfering 
>>> with
>>> the id39 for the update ?
>>>
>>> Dirk
>>>
>>>
>>> ----- Original Message ----- 
>>> From: "Janko Mivšek" <janko.mivsek op eranova.si>
>>> To: "AIDA/Web general discussion list" <aida op aidaweb.si>
>>> Sent: Monday, October 15, 2007 3:04 PM
>>> Subject: Re: [aida] Dropdown menus
>>>
>>>
>>>> Dirk Verleysen wrote:
>>>>> Ouch !!! Does this mean that I can't use styles for labels and other
>>>>> layouts
>>>>> between the different menu's ?
>>>> Why not? Put style also in a separate method and reuse it in many other
>>>> elements, like:
>>>>
>>>> menuStyle
>>>>   ^'
>>>> font-size: 12px
>>>> '
>>>>
>>>> menusElement
>>>>   ..
>>>>   menu1 style: self menuStyle.
>>>>   ..
>>>>
>>>> Something like that. But even better would be of course to put CSS
>>>> styling into your WebStyle subclass and use menu class: #menuStyle etc.
>>>>
>>>> Was that your question?
>>>>
>>>> Janko
>>>>
>>>>> ----- Original Message ----- 
>>>>> From: "Janko Mivšek" <janko.mivsek op eranova.si>
>>>>> To: "AIDA/Web general discussion list" <aida op aidaweb.si>
>>>>> Sent: Monday, October 15, 2007 2:09 PM
>>>>> Subject: Re: [aida] Dropdown menus
>>>>>
>>>>>
>>>>>> Dirk,
>>>>>>
>>>>>> Dirk Verleysen wrote:
>>>>>>
>>>>>>> I'm doing this and the updates to the domain are done but the
>>>>>>> WebElement
>>>>>>> that should be refreshed is simply removed. When I refresh the page
>>>>>>> it's
>>>>>>> returned on the browser with the updated fields.
>>>>>> Be sure that an updatable element is in the separate method and not
>>>>>> simply one of the elements in a method. This method must also return
>>>>>> just that element.
>>>>>>
>>>>>> This is a rule for Ajax updatable elements - they must reside each in
>>>>>> its own method.
>>>>>>
>>>>>> Best regards
>>>>>> Janko
>>>>>>
>>>>>>> ----- Original Message ----- 
>>>>>>> From: "Janko Mivšek" <janko.mivsek op eranova.si>
>>>>>>> To: "AIDA/Web general discussion list" <aida op aidaweb.si>
>>>>>>> Sent: Monday, October 15, 2007 11:35 AM
>>>>>>> Subject: Re: [aida] Dropdown menus (was: addMenuAspect:...)
>>>>>>>
>>>>>>>
>>>>>>>> Dirk Verleysen wrote:
>>>>>>>>> Can I send an event after an item in the menu is selected ? I want 
>>>>>>>>> 3
>>>>>>>>> menus
>>>>>>>>> on 1 form and the collection of the 2nd menu is dependent on the
>>>>>>>>> selection
>>>>>>>>> of the first menu. The collection of the 3th menu is created after
>>>>>>>>> you
>>>>>>>>> know
>>>>>>>>> what was selected in the 2nd menu.
>>>>>>>> This is very common pattern and very nicely solved with Ajax 
>>>>>>>> updating
>>>>>>>> of
>>>>>>>> an element containing all three menus. For that you use
>>>>>>>> onChangePostAndUpdate: on your menus:
>>>>>>>>
>>>>>>>> menusElement
>>>>>>>>   | e |
>>>>>>>>   e := WebElement new.
>>>>>>>>
>>>>>>>>   menu1 := WebMenu aspect: ....
>>>>>>>>   menu1 onCangePostAndUpdate: e.
>>>>>>>>   e add: menu1; addBreak.
>>>>>>>>
>>>>>>>>   menu2 := WebMenu aspect: ....
>>>>>>>>   menu2 onCangePostAndUpdate: e.
>>>>>>>>   e add: menu2; addBreak.
>>>>>>>>
>>>>>>>>   menu3 := WebMenu aspect: ....
>>>>>>>>   e add: menu3.
>>>>>>>>   ^e
>>>>>>>>
>>>>>>>> Janko
>>>>>>>>
>>>>>>>>> ----- Original Message ----- 
>>>>>>>>> From: "Janko Mivšek" <janko.mivsek op eranova.si>
>>>>>>>>> To: "AIDA/Web general discussion list" <aida op aidaweb.si>
>>>>>>>>> Sent: Monday, October 15, 2007 10:58 AM
>>>>>>>>> Subject: Re: [aida] addMenuAspect:collection:selectedToAspect:of:
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>> Hi Dirk,
>>>>>>>>>>
>>>>>>>>>> Dirk Verleysen wrote:
>>>>>>>>>>
>>>>>>>>>>> Is there an example of this available ? I guess I can use this to
>>>>>>>>>>> create
>>>>>>>>>>> a kind of dropdownlist ?
>>>>>>>>>> In HTML it called menu
>>>>>>>>>> http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.6. In 
>>>>>>>>>> Aida
>>>>>>>>>> there is a WebMenu and here s short example of usage:
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> menu := WebMenu
>>>>>>>>>>   aspect: #name
>>>>>>>>>>   collection: self authors
>>>>>>>>>>   selectedToAspect: #author
>>>>>>>>>>   of: self.
>>>>>>>>>>
>>>>>>>>>> or with convenience method:
>>>>>>>>>>
>>>>>>>>>> anElement addMenuAspect:collection:selectedToAspect:of:
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> Here you select an author by name from self authors and save
>>>>>>>>>> selected
>>>>>>>>>> object (not a name string!) to aspect #author (this calls
>>>>>>>>>> accessor/mutator #author and #author: ) of self. Note that if 
>>>>>>>>>> there
>>>>>>>>>> is
>>>>>>>>>> author selected from before, it will be preselected.
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>> I use "anElement addMenuAspect: #name collection: self observee
>>>>>>>>>>> seasonColl selectedToAspect: #season of: self observee." but by 
>>>>>>>>>>> the
>>>>>>>>>>> time
>>>>>>>>>>> my HTML is generated my aspectToStore has become #name and my
>>>>>>>>>>> objectToStore is nil.
>>>>>>>>>> And this you already solved by yourself.
>>>>>>>>>>
>>>>>>>>>> Best regards
>>>>>>>>>> Janko

-- 
Janko Mivšek
AIDA/Web
Smalltalk Web Application Server
http://www.aidaweb.si
_______________________________________________
Aida mailing list
Aida op aidaweb.si
http://lists.aidaweb.si/mailman/listinfo/aida


More information about the Aida mailing list