JQuery的滑塊使用Liftweb

Question

我'嘗試使用在基於提升應用一個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> 

這裏是我的（也有很多簡化）斯卡拉文件

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

由於你可以看到，在我的斯卡拉文件的最後一行，我試圖趕上滑塊按鈕的事件，但它不工作。 所以我想知道是否有對服務器端使用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

我找到了一個解決辦法，但我仍然不是很satified它，因爲它意味着一個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>