Question

我试图在基于Lift的应用程序中使用jQuery滑块，我不知道如何从用户的操作中获取数据。这意味着，如果用户在网页上滑动滑块，我希望能够使用服务器端的数据。所以我想将这些数据作为提升值或任何有用的东西导入。

以下代码的灵感来自http://jqueryui.com/demos/slider/#range

这是我的（简化）html页面：

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

这是我的（也是很简化的）scala文件

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

正如您所看到的，在我的scala文件的最后一行中，我尝试在滑块按钮上捕获一个事件，但它不起作用。所以我想知道是否有一个简单的方法在服务器端使用jQuery输入。

谢谢是提前

PS：这是我的第一篇文章，抱歉，如果格式不合理。

Answer 1

好的，我找到了解决问题的完美解决方案，所以我将与您分享：

这是我的（简化）html页面：

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

她是我的（简化的）scala代码

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

所以现在，我的jQuery代码被完全视为文本表单输入。所以我可以像其他表单一样使用它，包括请求变量。我希望这个解决方案能够帮助其他人。

Answer 2

我找到了一个解决方案，但我仍然不满意它，因为它意味着一个Ajax进程，而不是仅仅将滑块值视为基本表单值。这是我的解决方案：

val cb = SHtml.ajaxCall(JsRaw("ui"), println(_))

val script = "$(function() {"+
       "$(\"#range-slider\").slider({ "+
          "range: true, "+
          "min: 0,"+
          "max: 500,"+
          "values: [75,300],"+ 
          ", slide: function(event, ui) { " +
             cb._2.toJsCmd + ";" +
          "}"+
       "})});"

HTML代码不会更改。但是，如果我想使用ReqVar，我需要在服务器端添加滑块值，并使用一些ajax进程，因此它工作但不是最佳的。

Answer 3

代码中存在一些错误。我做了一些改变。

package code.snippet

import net.liftweb.http.SHtml
import net.liftweb.util.Helpers._

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 = ui.value;" +
  "}" +
  "})});"
val slider = ""
// binding
"#sliderScript *" #> script &
  "name=f:slider" #> SHtml.text(slider, println(_), "id" -> "slider")
}  
}

Html代码

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

JQuery Slider使用Liftweb

3 个答案: