Using jquery functions to display a div in a frame framework

Question

I am trying to create one simple web application for an elevator. in that I want to show and hide two divs by clicking a button on one page using ajax call. I tried the following code.

In my opinion

<div id="PGMainDiv" data-lift="ShowBookedTicket" style="width=400px;height=600px;border:2px solid #FF0000;border-radius:5px"> <div id="sampleDiv" style="font-size:15px;color:#19552D;padding:10px 5px 10px 10px"> This is a sample div which show and hide while ajax calling </div> <div style="padding-left:267px"> <button id="PGOK" value="OK" style="width:70px">OK</button> </div> </div> <div id="ticketDiv" style="display:none;border:2px solid #FF00FF"> <p>This is a another sample div which show and hide while ajax calling</p> </div> 

and in my ShowBookedTicket snippet

 class ShowBookedTicket { def testFunction(s: String): JsCmd = { JsCmds.Run("jQuery('#ticketDiv').show()") JsCmds.Run("jquery('#sampleDiv').hide()") //JsCmds.Function("testJsFunction",List("param"),SHtml.ajaxCall( () => JsRaw("""$('#ticketDiv').show()""")).cmd)._2 } def render = "*" #> { "#PGOK [onClick]" #> SHtml.onEvent(testFunction) } } 

here, if I give only the first div showing the code ( JsCmds.Run("jQuery('#ticketDiv').show()") ), it works correctly. but if I give the second line, nothing happens there. and in the commented line also tried, but it shows some errors ( overloaded method value ajaxCall with alternatives: (jsCalcValue: net.liftweb.http.js.JsExp,jsContext: net.liftweb.http.JsContext,func: String => net.liftweb.http.js.JsCmd)net.liftweb.http.GUIDJsExp <and> (jsCalcValue: net.liftweb.http.js.JsExp,func: String => net.liftweb.http.js.JsCmd)net.liftweb.http.GUIDJsExp cannot be applied to (() => net.liftweb.http.js.JE.JsRaw) in eclipse). can someone give an answer ..

Thanxx .. !!

Answer 1

You forgot to connect both calls. Your function returns only the second line as jsCmd. Try the following:

 def testFunction(s: String): JsCmd = { JsCmds.Run("jQuery('#ticketDiv').show()") & JsCmds.Run("jquery('#sampleDiv').hide()") } 

Note: as described here , you can also use the built-in commands for hide / show:

 def testFunction(s: String): JsCmd = { JsCmds.JsShowId("ticketDiv") & JsCmds.JsHideId("sampleDiv") }