Dynamic Linking in a Lift Frame

Question

I am new to Raising, and I have a question about using bind, Ajax in Lift.

I want to create three drop-down menus using Ajax dynamically. I use "Address" as an example to describe what I'm trying to achieve. In the fist, I only need to display the "Country" menu, the default value is "No". The user at this moment can choose to send, if she wishes, and the address is accepted by default. If not, she can provide the exact address. When she selects a country, the Status menu should be displayed, and as soon as she selects Status, the County menu should be displayed.

Using demo examples of the elevator, I tried to create static menus as follows. I created three fragments <select:country/>, <select:state/>, <select:county/>in my .html file and in the scala code, I link 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)

Relevant replaceCounty, stateChoice, countyChoice are defined in my class. However, when a country is selected, only the state is updated via an Ajax call, not a county.

Q1) Is there a way to update the menu depending on the country menu?

Q2) How to create a menu dynamically, as I explained earlier?

Answer 1

There is a great sample code that does this only at:

http://demo.liftweb.net/ajax-form

AJAX, - :

ReplaceOptions(...) & ReplaceOptions(...)

Answer 2

SHtml.ajaxSelect . , javascript SHtml.ajaxSelect.

def countrySelect : NodeSeq = {
  val countryOptions = List(("",""),("AR","AR"))
  SHtml.ajaxSelect(countryOptions, Empty, { selectedCountry => 

    val stateOptions = buildStateOptions(selectedCountry)
    SetHtml("state-select", SHtml.ajaxSelect(stateOptions, Empty, { selectedState =>
      // setup the county options here.
    }))

  })
}

bind(namespace, in,
  "country" -> countrySelect,
  "state" -> <select id="state-select"/>,
  "county" -> <select id="county-select"/>)

#ajaxSelect , , , , , .