Liftwebを使用したJQueryスライダ

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

としては、私（また、多くの簡略化）のScalaファイルです私のスカラーファイルの最後の行で、スライダーボタンでイベントをキャッチしようとしましたが、動きません。 サーバーの側でjQuery入力を使用する簡単な方法があるかどうかを知りたいと思います。

おかげで、事前

PSれる：それはうまくフォーマットされていない場合には、申し訳ありませんが、私の最初の投稿です。

Answer 1

[OK]を私は私の問題を完璧に解決策を見つけた：ここ

は私の（簡体字）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>