tags:

views:

107

answers:

1

I am newbie to Lift and I have a question on using bind, Ajax in Lift.

I want to create three dropdown menus using Ajax in a dynamic fashion. I use "Address" as an example to describe what I am trying to achieve. At fist, I only have to display "Country" menu with default set to "None". The user at this point can choose to submit if she wishes to and the address is taken as default. If not, she can provide the precise address. Once she selects the country, the "State" menu should get displayed, and once she selects "State", the "County" menu should be displayed.

With the help of lift demo examples, I tried to create static menus as follow. I created three snippets <select:country/>, <select:state/>, <select:county/> in my .html file and in the scala code, I bind as follows:

bind("select", xhtml,
     "system" -> select(Address.countries.map(s => (s,s)),
                       Full(country), s => country = s, "onchange" -> ajaxCall(JE.JsRaw("this.value"),s => After(200, replaceCounty(s))).toJsCmd),
     "state" -> stateChoice(country) % ("id" -> "state_select"),
     "county" -> countyChoice(state) % ("id" -> "county_select"),
     "submit" -> submit(?("Go!"),()=>Log.info("Country: "+country+" State: "+state + " County: "+ county)

The corresponding replaceCounty, stateChoice, countyChoice are all defined in my class. However, when the country is selected, only the state is refreshed through Ajax call and not the county.

Q1) Is there a way to refresh both the menus based on the country menu?

Q2) How to create the menu's dynamically as I explained earlier?