JQuery Slider Using Liftweb

Question

I'am trying to use a jQuery slider in a Lift based application and I don't know how to get back the data from user's actions. Which means, if the user slides the slider on the webpage, I want to be able to use the data on server's side. So I want to import that data as a lift value or anything useful.

The following code is inspired from http://jqueryui.com/demos/slider/#range

Here is my (simplified) html page :

<div id="searchMenu" class="lift:surround?with=default;at=content">
<form class="lift:FormSearch?form=post"> 
    <script id="sliderScript"> </script>
    <h3>Search</h3>

    <div id="range-slider"></div>

    <input name="search" type="submit" value="Submit"/>
</form>
</div>

Here is my (also a lot simplified) scala file

object FormSearch {

  def render = {
     val script = "$(function() {"+
       "$(\"#range-slider\").slider({ "+
       "range: true, "+
       "min: 0,"+
       "max: 500,"+
       "values: [75,300],"+ 
     "});"
     //binding
     "#sliderScript *" #> script &
     ".ui-slider-handle [onclick]" #> SHtml.ajaxInvoke( () => println("event_")) 
  }

As you can see, in the last line of my scala file, I tried to catch an event on slider buttons but it doesn't work. So I would like to know if there is a simple method to use jQuery inputs on server's side.

Thanks is advance

PS: it is my first post, sorry if it is not well formated.

Answer 1

Ok I found the perfect solution to my problem so I will share it with you :

Here is my (simplified) html page :

<div id="searchMenu" class="lift:surround?with=default;at=content">
    <form class="lift:FormSearch?form=post"> 
        <script id="sliderScript"> </script>
        <h3>Search</h3>
        <div id="range-slider"></div>
        <input name="f:slider" style="display: none" value=""/>
        <input name="search" type="submit" value="Submit"/>
     </form>
</div>

And her is my (simplified) scala code

object FormSearch {
  def render = {
    val script = "$(function() {"+
      "$(\"#range-slider\").slider({ "+
      "range: true, "+
      "min: 0,"+
      "max: 500,"+
      "values: [75,300],"+
      ", slide: function(event, ui) { " +
        "document.getElementById('slider').value = value;" +
      "}"+ 
    "});"
    val slider = ""
    // binding
    "#sliderScript *" #> script &
    "name=f:slider" #> SHtml.text(slider, println(_), "id" -> "slider")
  }
}

So now, my piece of jQuery code is treated exactly as a text form input. So I can use it the same way as other form stuff including request variables. I hope this solution will help other people.