AJAX Samples

Click me to increase the count (currently 0)

You selected From the select box.
You entered in the text box.
An example of autocomplete with a server round trip to calculate the autocomplete list

And each time an Ajax or Comet update is made to the page, we update this span: The time is

Enter some text: and

The Lift Scala code to render the controls:

class Ajax {

  def sample(xhtml: NodeSeq): NodeSeq = {
    // local state for the counter
    var cnt = 0

    // get the id of some elements to update
    val spanName: String = S.attr("id_name") openOr "cnt_id"
    val msgName: String = S.attr("id_msgs") openOr "messages"

    // build up an ajax <a> tag to increment the counter
    def doClicker(text: NodeSeq) =
    a(() => {cnt = cnt + 1; SetHtml(spanName, Text( cnt.toString))}, text)

    // create an ajax select box
    def doSelect(msg: NodeSeq) =
    ajaxSelect((1 to 50).toList.map(i => (i.toString, i.toString)),
               Full(1.toString),
               v => DisplayMessage(msgName,
                                   bind("sel", msg, "number" -> Text(v)),
                                   5 seconds, 1 second))

    // build up an ajax text box
    def doText(msg: NodeSeq) =
    ajaxText("", v => DisplayMessage(msgName,
                                     bind("text", msg, "value" -> Text(v)),
                                     4 seconds, 1 second))



    // bind the view to the functionality
    bind("ajax", xhtml,
         "clicker" -> doClicker _,
         "select" -> doSelect _,
         "text" -> doText _,
         "auto" -> JqSHtml.autocomplete("", buildQuery _, _ => ()))
  }

  private def buildQuery(current: String, limit: Int): Seq[String] = {
    Log.info("Checking on server side with "+current+" limit "+limit)
    (1 to limit).map(n => current+""+n)
  }

  def time = Text(timeNow.toString)
}