bind data to a span in button click ajax in lift framework with jquery

Question

I am trying to create one simple lift web app. i want to show some data in a <span> in my view from the snippet JsCmds returning function. i tried the following code so far.

In my View

 <div id="ticketDiv" style="display:none;border:2px solid #FF00FF">
    <p>This is a sample div which show and hide while ajax calling</p><br />
    Ticket Number: <span id="ticketNumber"></span>
    <input id="testId" value="test"/>
 </div>

and in Snippet

  class ShowBookedTicket {

    def showBookedTicket(s: String): JsCmd = {      

        JsCmds.JsHideId("PGMainDiv")&
        JsCmds.JsShowId("ticketDiv")&
        JsCmds.SetValueAndFocus("testId","12345")
        //JsCmds.SetValById("ticketNumber", "1234")
        //JsCmds.SetHtml("1234","<span></span>")
         //"#ticketNumber" #> "12345" 
        //"#ticketNumber *" #> "12345"
        //JsCmds.Function("testJsFunction",List("param"),SHtml.ajaxCall( () => JsRaw("""$('#ticketDiv').show()""")).cmd)._2
         }

  def render = "*" #> {
    "#PGOK [onClick]" #> SHtml.onEvent(showBookedTicket)
  }
}

i tried all the commented lines too. but i didn't get any proper result. in JsCmds.SetValueAndFocus("testId","12345") and JsCmds.SetValById("ticketNumber", "1234") if i give the textbox id, then it is working. how can i fix the data in the span. can anybody give one answer.

Thanxx..!!!

Answer 1

I'm not entirely sure the exact problem you are having, and am making some assumptions since you only have a part of the HTML called - for example, what is PGMainDiv? How is the snippet called, what is #PGOK, etc..

However, I assume that it looks something like:

  <div data-lift="ShowBookedTicket">
    <div id="ticketDiv" style="display:none;border:2px solid #FF00FF">
        <p>This is a sample div which show and hide while ajax calling</p><br />
        Ticket Number: <span id="ticketNumber"></span>
        <input id="testId" value="test"/>
    </div>
    <input type="button" id="PGOK" />
  </div>

If that is the case then what you have seems to work. Therefore, I assume there are issues with the commented code. For those, there are a few items with the code:

JsCmds.SetHtml takes as arguments the id of the element to replace and a NodeSeq. The version you have commented had neither. It should work if you change it to:

 JsCmds.SetHtml("ticketNumber", <span>1234</span>) //No quotes around the XML

"#ticketNumber" #> "12345" won't work in your method as it is a CssSelector and needs to get applied to a NodeSeq. That would only happen inside of render or if you manually call apply on it.

Additionally, you can also issue arbitrary Javascript through JsCmds.Run if that makes things easier. So, you could also use jquery functions directly, like:

JsCmds.Run("$('#ticketNumber').html('1234')");