Слайдер JQuery с использованием Liftweb - PullRequest
Новая
       5

Слайдер JQuery с использованием Liftweb

1 голос
/ 11 ноября 2011

Я пытаюсь использовать ползунок jQuery в приложении на основе Lift, и я не знаю, как вернуть данные от действий пользователя.Это означает, что если пользователь перемещает ползунок на веб-странице, я хочу иметь возможность использовать данные на стороне сервера.Поэтому я хочу импортировать эти данные как значение лифта или что-нибудь полезное.

Следующий код основан на 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: это мой первый пост, извините, если он плохо отформатирован.

Ответы [ 3 ]

1 голос
/ 30 ноября 2011

Хорошо, я нашел идеальное решение своей проблемы, поэтому я поделюсь им с вами:

Вот моя (упрощенная) 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 обрабатывается именно как ввод текстовой формы. Так что я могу использовать его так же, как и другие формы, включая переменные запроса. Я надеюсь, что это решение поможет другим людям.

0 голосов
/ 19 июня 2013

В коде есть некоторые ошибки.Я делаю некоторые изменения. 

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>
0 голосов
/ 21 ноября 2011

Я нашел решение, но я все еще не очень удовлетворен им, потому что он подразумевает процесс 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, поэтому он работает, но не оптимально.

...