LIFTWEB: Как сделать простую таблицу нажатием кнопки?

Question

Я хотел бы отобразить таблицу HTML, нажав на кнопку.

Это то, что я пытался до сих пор:

Мой код SCALA:

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) 
} 

} 

И мой 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> 

ничего не отображается, нажав на кнопку .. У вас посмотрите, в чем проблема? Или кто-то может сказать мне еще один способ сделать это?

Answer 1

Я не уверен, что вы хотите выполнить со скрытым вводом. Почему бы просто не сделать что-то вроде:

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

Если вы хотите, чтобы отобразить индикатор ожидания, Lift имеет механизм для установки Ajax загрузки анимации. В 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) 

Вы можете использовать любой JsCmd вместо того, чтобы назвать свою собственную функцию. Я бы выбрал это.

Answer 2

Полностью согласен с jcern. Несколько иной способ также может быть:

"#getTable [onclick]" #> SHtml.ajaxInvoke(showTable) 

(таким образом, вы не перекроет оригинальное название кнопки)

Также обратите внимание, что вам даже не нужно использовать тег <form> - вы можете удали это.