Lift

This is a simple example of a form that is submitted using AJAX.

The HTML (template-login.html)

<div>
    <lift:Login.login>
        <table>
            <tr>
                <td align="right">User name:</td>
                <td><login:user/></td>
            </tr>
            <tr>
                <td align="right">Password:</td>
                <td><login:pass/></td>
            </tr>
            <tr>
                <td colspan="2"><login:submit/></td>
            </tr>
        </table>
    </lift:Login.login>
</div>

The Scala

My original attempt at the binding for the “submit” button didn’t quite work. According to David Pollack: “It’s an artifact of the jQuery Ajax serialization which does not serialize submit buttons.” He suggested the form shown here, though I’m not entirely sure yet how it works. (only that it does)

package some.pkg

/**
 * Snippet object that configures template-login and connects it to Login.auth
 */
object Login {
  private object user extends RequestVar("")
  private object pass extends RequestVar("")

  def auth() = {
    logger.debug("[Login.auth] enter.")

    // validate the user credentials and do a bunch of other stuff

    logger.debug("[Login.auth] exit.")
  }

  /**
   * This is the part of the snippet that creates the form elements and connects the client side components to
   * server side handlers.
   *
   * @param xhtml - the raw HTML that we are going to be manipulating.
   * @return NodeSeq - the fully rendered HTML
   */
  def login(xhtml: NodeSeq): NodeSeq = {
    logger.debug("[Login.login] enter.")
    SHtml.ajaxForm(
      bind("login", xhtml,
        "user" -> SHtml.text(user.is, user(_), "maxlength" -> "40"),
        "pass" -> SHtml.password(pass.is, pass(_)),
        "submit" -> (SHtml.hidden(auth) ++ <input type="submit" value="Login"/>)))
  }
}

A Cancel Button

In another part of my application, I needed a similar form – but this time with save and cancel buttons. It’s just like the other example, except that the cancel button has to be an “ajaxButton”.

Excerpt from the HTML:

                <tr>
                    <td align="right"> <context:submit/> </td>
                    <td align="left"> <context:cancel/> </td>
                </tr>

Except from the Scala:

          "submit" -> (SHtml.hidden(save _) ++ <input type="submit" value="Save"/>),
          "cancel" -> SHtml.ajaxButton("Cancel", cancel _)))