LIFTWEB: How to render a simple table clicking a button?

Question

I would like to display an HTML table clicking on a button.

This is what I've tried so far:

My SCALA code:

object Snippet {

 def render = {

    def showTable() = {
      val table = <table border="1"> 
                    <caption>My Table</caption> 
                    <thead>  
                       <tr>
                          <td>Entry</td>
                          <td>Value1</td>
                          <td>Value2</td>
                       </tr>
                    </thead>
                    <tbody>
                       <tr>
                          <td>PREV</td>
                          <td>1</td>
                          <td>10</td>
                       </tr>
                       <tr>
                          <td>CURR</td>
                          <td>2</td>
                          <td>20</td>
                       </tr>
                       <tr>
                          <td>NEXT</td>
                          <td>3</td>
                          <td>30</td>
                       </tr>
                    </tbody>
                 </table>


      SetHtml("table_div",table)
    }

    "#getTable"  #> SHtml.button("Get Table", () => null, "onclick" -> "$('#msg_div').html('<span>Getting table...</span>')") &
    "name=proc"  #> SHtml.hidden(showTable)
 }

}

And my HTML:

        <div class="lift:Snippet.render">
            <form>
                <input type="hidden" name="proc"/>
            <button id="getTable" value="Get Table" class="btn btn-inverse">Get Table</button>

            </form>
            <div id="msg_div"></div>
            <div id="table_div"></div>
        </div>

Nothing is displayed clicking the button.. Do you see what is the problem? Or someone could tell me another way to do that?

Answer 1

I am not sure what you are looking to accomplish with the hidden input. Why not just do something like:

"#getTable" #> SHtml.ajaxButton("Get Table", showTable)

If you are looking to display a waiting indicator, Lift has a mechanism for setting the ajax loading animation. In Boot.scala:

//Show the spinny image when an Ajax call starts
LiftRules.ajaxStart =
  Full(() => LiftRules.jsArtifacts.show("ajax-loader").cmd)

// Make the spinny image go away when it ends
LiftRules.ajaxEnd =
  Full(() => LiftRules.jsArtifacts.hide("ajax-loader").cmd)

You can use any JsCmd instead to call your own function. I'd probably opt for that.