提升 Ajax 多选框答案

【问题标题】：Lift Ajax multi select box提升 Ajax 多选框
【发布时间】：2012-02-19 21:50:31
【问题描述】：

我是 scala 和 lift 的新手，我想用一些 ajax 制作一个表单。因此主要形式来自正常的有状态的sn-p和中间内容附有一些 ajax 形式（在另一个 sn-p 中有内容但是不是有状态的，因为我不能在有状态中使用 ValueCell）。

在那里我想动态添加任何没有。多选框为用户需要按“添加”按钮。

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

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

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

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

谢谢大家...

【问题讨论】：

您能否提供一些代码并告诉我们它已经做了什么以及应该做什么？
如我之前所说，举个例子会很有用。

标签： html ajax scala lift

【解决方案1】：

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

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

这里创建了一个 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)

【讨论】：

嗨，唐纳德，我知道这是我正在评论的旧帖子。但是我的情况如下。我正在尝试解决与上面的海报完全相同的问题。我想在 onChange 上捕获选择的值（在多选中），以便我可以进行一些处理，例如编辑该选择的值，然后更新多选内容。但是，我无法在常规 LiftWeb 多选中使用您的功能。请建议我能做什么。

【解决方案2】：

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

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

您必须提取所有值并提交它们（表单提交只是常规的 urlEncoded postParams），但如果您只是看一下如何执行此操作，这是最不清楚的。
您必须将默认值更改为 Seq[String]（这还需要更改测试以查看是否应设置 selected）

您必须决定是否要在更改或模糊时进行回调。在我的示例中，我会将其设为 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"))
              }))
    }
 }

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

祝你好运！

-奥斯汀

【讨论】：