JQuery Slider Using Liftweb

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> 

는

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> 

그리고 그녀는 내 (간체) 스칼라 코드

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를 사용하려면 서버 측에서 슬라이더 값을 추가하고 일부 아약스 프로세스를 사용해야하므로 최적이지만 작동하지 않습니다. 내가 당신과 함께 공유 할 수 있도록

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>