Question

我是scala和lift的新手，我想用一些ajax创建一个表单。因此主要形式来自正常的有状态片段和中间内容附带一些ajax形式（其他内容在另一个片段中，但是没有状态，因为我无法在Stateful中使用ValueCell。

在那里我想动态添加任何不。多选框作为用户想按“添加”按钮。

我通过选择SHtml.ajaxSelect（）为正常的下拉选择做了并保存在ValueCell中，并保存在会话上下文中。

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

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

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

谢谢大家......

Answer 1

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

另一方面，如果每次用户更改多选的值时都需要AJAX调用，那么您可能必须使用相同的SHtml.multiselect，但添加一个调用JavaScript函数的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)

Answer 2

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

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

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

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

提升Ajax多选框

2 个答案: