Radio button in Lift?

Question

I'm trying to render a radio button choice in my webapp but I have some problems.

What I have done is to try jcern solution posted in this answer: get checkbox and radio button value in lift

This is my HTML code:

<div class="lift:Radio.render">
   <input id="choice" name="choice" type="radio"/>
</div>

And this is my SCALA code:

object Radio {
  def render = {
    val radioChoices = List("Choice_1", "Choice_2")
    var choice:Box[String] = None

    "name=choice" #> SHtml.radio(radioChoices, choice, (resp) => choice = Full(resp))
  }
}

But the compiler give me an error on binding:

could not find implicit value for parameter computer:net.liftweb.util.CanBind[net.liftweb.http.SHtml.ChoiceHolder[String]]
[error]   "@choice" #> SHtml.radio(radioChoices, choice, (resp) => choice = Full(resp))
[error]             ^

I have to bind with .toForm to pass compile like this:

"name=choice" #> SHtml.radio(radioChoices, choice, (resp) => choice = Full(resp)).toForm

The problem is that no radio buttons are displayed on my web page, nothing at all..

Am I doing something wrong? I can't see it. And why the first solution (without .toForm) give me an error at compile?

Answer 1

The reason is that SHtml.radio and SHtml.radioElem return a ChoiceHolder instead of a the NodeSeq that most other items in SHtml do - as you can see in the API Doc. Because of that, you need to call .toForm or render the output yourself.

Returning the ChoiceHolder allows you to customize how each item is displayed, so you can add custom text for the label, etc... If the basic toForm output didn't work for you, you could do something like:

val choices =  SHtml.radio(radioChoices, choice, (resp) => choice = Full(resp))
"@choice" #> choices.items.zipWithIndex.map { case(itm, pos) =>
  val rId = "myId-%s".format(pos)
  <div class="radio">{ 
      //We'll add a custom ID attribute to the radio button
      itm.xhtml.asInstanceOf[Elem] % ("id", rId) 
    }<label for={ rId }>{
      //Output the toString or use some other method to output a label 
      itm.toString  
    }</label>
  </div>
}

You can find more information on customizing the radio buttons in the Lift Cookbook.

As for why your CSSSelector is not outputing anything, I am not sure. The code snippet you were trying worked for me. The screenshot below illustrates the output I see with the toForm method.