Подъемник Ajax multi select box

Я новичок в scala и поднимусь, и я хочу сделать форму с некоторым ajax. Поэтому основная форма - это нормальный фрагмент кода и средний контент прилагается с некоторой формой ajax (там содержится в другом фрагменте, но not Stateful, потому что я не могу использовать ValueCell в Stateful).

Там я хочу добавить динамически любой no. многоэкранных боксов в качестве пользователь хочет, нажав кнопку "ДОБАВИТЬ".

Я сделал это для обычного раскрывающегося списка, выбрав SHtml.ajaxSelect() и сохранить в ValueCell, а также сохранить в контексте сеанса.

Здесь я могу использовать ValueCell для хранения данных, потому что ajaxSelect поддерживает Аякс. Но в мульти-select нет "ajaxMultiSelect"?? Так что мне нужно для извлечения данных из этих динамически добавленных ящиков с множественным выбором к моим переменным формы при нажатии кнопки отправки в общей форме.

http://seventhings.liftweb.net/wiring - этот пример - мой путеводитель мое задание. Здесь они динамически добавляют текстовые поля. Но я хочу добавить multiselect и сохранять данные при нажатии кнопки отправки.

Пожалуйста, помогите мне. Если вы хотите получить дополнительное разъяснение, я могу дать.

Спасибо, ВСЕ...

ОТВЕТЫ

Ответ 1

Если все, что вам нужно, это multi-selects, чьи значения могут быть отправлены на сервер, когда пользователь нажимает кнопку "Сохранить", тогда должна быть достаточной группа объектов SHtml.multiselect в форме AJAX.

С другой стороны, если вам нужен вызов AJAX каждый раз, когда пользователь меняет значение multi-select, вам, вероятно, придется использовать тот же SHtml.multiselect, но добавить обработчик события onchange, который вызывает функцию JavaScript, содержащую 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)

Ответ 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