提升Ajax多选框

Question

我是scala和lift的新手，我想用一些ajax制作一个表格。 因此，主要表单来自正常的有状态片段，中间内容用一些ajax形式包含（其他片段中的内容但不是有状态的，因为我无法在Stateful中使用ValueCell）。

在那里我想动态添加任何不。 按“添加”按钮，按用户需要选择多选框。

我通过选择SHtml.ajaxSelect（）并在ValueCell中保存并保存在会话上下文中来进行正常的下拉选择。

在这里，我可以使用ValueCell来存储数据，因为ajaxSelect支持ajax。 但在多选中没有“ajaxMultiSelect”?? 因此，当按下整个表单中的“提交”按钮时，我需要从那些动态添加的多选框中检索数据到表单变量。

http://seventhings.liftweb.net/wiring - 这个例子是我完成任务的指南。 他们在这里使用动态添加文本字段。 但是我想在点击提交按钮时添加多选并保存数据。

请帮帮我一个人。 如果你想进一步澄清，我可以给。

谢谢你们...

Answer 1

如果你想要的只是多选，当用户按下“保存”按钮时可以将其值发送到服务器，那么AJAX表单上的一堆SHtml.multiselect对象就足够了。

另一方面，如果每次用户更改多选的值时都需要AJAX调用，那么您可能必须使用相同的SHtml.multiselect但添加一个调用包含ajaxCall的JavaScript函数的onchange事件处理程序。

这里有一点创建一个JavaScript函数doCallback()并将其添加到#placeholder的页面。 这会在服务器上调用commandCallback(commandString) 。

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

我知道这是一个较旧的问题，但这是我的镜头（因为在最新的快照中似乎仍然没有ajax multiSelect），我可以看到它派上用场

您可以将其基于常规的ajaxSelect。 主要变化是：

1. 你必须提取所有的值并提交它们（表单提交只是常规urlEncoded postParams），但如果你只是看看如何做到这一点，这是最不清楚的。
2. 您必须将默认值更改为Seq [String]（这也需要更改测试以查看是否应设置选中）

3. 您必须决定是要在更改时还是在模糊时进行回调。 在我的示例中，我将使其成为onblur，但您可以使其可配置。

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

这应该是有效的，但我没有测试它。 如果我有时间，我会测试它，看看我是否可以将它（及其重载）添加到主分支。

祝好运！

-Austen