Levante la casilla de selección múltiple Ajax

Question

Soy nuevo en scala y lift y quiero hacer una forma con ajax. Por lo tanto, la forma principal es del fragmento de estado normal y el contenido intermedio está encerrado con algún formulario ajax (no hay contenido en otro fragmento pero no con estado porque no puedo usar ValueCell en Stateful).

Allí quiero agregar dinámicamente cualquier no. de cuadros de selección múltiple como que el usuario desea presionando el botón "AGREGAR".

Lo hice para seleccionar desplegable normal seleccionando SHtml.ajaxSelect() y guardar en ValueCell y también guardarlo en un contexto de sesión.

Aquí puedo usar ValueCell para almacenar datos porque ajaxSeleccione la compatibilidad con ajax. Pero en multiselección, ¿no hay "ajaxMultiSelect"? Entonces necesito para recuperar los datos de esos cuadros de selección múltiple añadidos dinámicamente a mis variables de formulario al presionar el botón enviar en el formulario general.

http://seventhings.liftweb.net/wiring - este ejemplo es mi guía para hacer mi tarea. Aquí usan dinámicamente agregar campos de texto. Pero quiero agregar multiselect y guardar datos al presionar el botón de enviar.

Por favor, ayúdame alguien. Si quieres más aclaraciones puedo dar.

Gracias a todos ...

Answer 1

Si lo que quieres es multi-selecciona cuyos valores pueden ser enviados al servidor cuando el botón usuario pulsa un "salvar", entonces un montón de SHtml.multiselect objetos en un formulario AJAX debe Ser suficiente.

Por otro lado, si necesita una llamada AJAX cada vez que el usuario cambia el valor de una selección múltiple, entonces probablemente tenga que usar el mismo SHtml.multiselect pero agregue un controlador de evento onchange que llame a una función de JavaScript que contenga ajaxCall .

Aquí hay un poco que crea una función de JavaScript doCallback() y la agrega a la página al #placeholder. Esto llama al commandCallback(commandString) en el servidor.

val log = SHtml.ajaxCall(JsRaw("commandString"), commandCallback _)._2.cmd 
val f = JsCmds.Function("doCallback", List[String](), log) 
("#placeholder" #> JsCmds.Script(f)).apply(ns) 

Answer 2

Sé que esto es un poco de una cuestión mayor, pero aquí está mi oportunidad (ya que todavía no parece ser un MULTISELECT Ajax en las últimas instantáneas), y que se veía venir en práctico

Puede basarlo fuera del ajax normal. Los principales cambios son:

1. Hay que extraer todos los valores y someterlos (el envío del formulario es sólo normal urlencoded postParams), pero este es el más claro si se acaba de echar un vistazo a cómo hacer esto.
2. usted tiene que cambiar el valor por defecto a un Sec [String] (esto también requres cambiar la prueba para ver si se ha seleccionado se debe establecer)

3. Usted tiene que decidir si desea que la devolución de llamada en el cambio o en la falta de definición. En mi ejemplo, lo haré onblur, pero podrías hacerlo configurable.

   private def ajaxMultiSelect_*(opts: Seq[(String, String)], deflt: Seq[String], jsFunc: Box[Call], func: AFuncHolder, attrs: ElemAttr*): Elem = { 
       val optionSelect = 
       """function(funcName, element) { 
        | var postData = "" 
        | var i = 0; 
        | var k = 0; 
        | for (k = 0; k < element.length; k++) { 
        | if (element[k].selected) { 
        |  if (i == 0) 
        |  postData = funcName + '=' + encodeURIComponent(element[k].value); 
        |  else { 
        |  postData = postData + '&' + funcName + '=' + encodeURIComponent(element[k].value); 
        |  } 
        |  i++; 
        | } 
        | } 
        | return postData; 
        |}""".stripMargin 
   
       val raw = (funcName: String, value: String) => JsRaw(optionSelect + "('" + funcName + "'," + value + ")") 
       val key = formFuncName 
   
       val vals = opts.map(_._1) 
       val testFunc = LFuncHolder(in => in.filter(v => vals.contains(v)) match {case Nil => false case xs => func(xs)}, func.owner) 
       fmapFunc((testFunc)) { 
        funcName => 
         (attrs.foldLeft(<select multiple="multiple">{opts.flatMap {case (value, text) => (<option value={value}>{text}</option>) % selected(default.contains(value)))}}</select>)(_ % _)) % 
          ("onblur" -> (jsFunc match { 
           case Full(f) => JsCrVar(key, JsRaw("this")) & deferCall(raw(funcName, key), f) 
           case _ => makeAjaxCall(raw(funcName, "this")) 
          })) 
       } 
   } 
   

Esto debería estar trabajando, pero yo no probarlo.Si tengo tiempo, lo probaré y veré si puedo obtenerlo (y sus sobrecargas) en la rama principal.

¡Buena suerte!

-Austen