Question

我正在Drupal 8中构建一个包含可排序的jQuery手风琴的表单。

我有手风琴工作，并且能够使用带有AJAX回调的提交按钮为手风琴添加新元素。但是，当我重新排列手风琴中的元素然后添加一个新元素时，手风琴的顺序将恢复为原始元素。我有一个隐藏字段，用于手风琴中的每个元素以存储订单，并希望根据这些值重建表单，但是我不知道如何从Javascript将其发送回Drupal。

我已经回顾了一些像这里的例子：Send data from JavaScript to Controller关于如何使用AJAX发送回Drupal，但是我看到的每个例子都涉及发送回菜单项而不是表单。对于我来说，这是一个缺失的链接，非常感谢任何有关如何完成表单连接的帮助。

这是路由yml文件：

mymodule:
  path: /mymodule
  defaults:
    _form: '\Drupal\mymodule\Form\ContributeForm'
  requirements:
    _permission: 'access content'

这是Drupal表单代码的一部分，包括所有这些代码都是压倒性的：

$dataArray = array();           
//  Loop through existing fields             
for ($i = 0; $i < $name_field_init; $i++) {
    for($j = 0; $j < $name_field_init; $j++){   

        if($i == $form_state->getCompleteForm()['wrapper']['accordion']["container$j"]["sort_order$j"]['#value']){

            foreach ($form_state->getValues()['wrapper']['accordion']["container$j"] as $key => $value) {
                $dataArray[$i][$key] = $value;
            }
        }//if
    }//for j
}//for i

$i = 0;
foreach($dataArray AS $row){

    $dataVal = "test$i";

    $form['wrapper']['accordion']["container$i"] = array(
      '#type' => 'container',
      '#id' => "container_$i",
      '#name' => $i,
      '#attributes' => array(
        'class' => array(
          'container_l_01',
        ),
      ),
    );

    $form['wrapper']['accordion']["container$i"]["sort_order$i"] = array(
    '#type' => 'hidden',
    '#value' => $i,
    '#attributes' => array(
      'class' => array(
        'sort-order',
      ),
    ),
    );  

    $form['wrapper']['accordion']["container$i"]["title$i"] = array(
      '#markup' => "<h3>$dataVal</h3>",
    );

    $form['wrapper']['accordion']["container$i"]["textbox$i"] = array(
      '#type' => 'textfield',
      '#title' => "$dataVal field",
      '#default_value' => $row["textbox$i"],
    );

    $i++;

}//foreach

这是javascript：

(function ($) {

  'use strict';

  Drupal.behaviors.mymodule = {
    attach: function(context, settings) {
      $(document).ready(function () {

        $('#accordion').accordion({
          collapsible: true,
          active: false,
          height: 'fill',
          header: 'h3'
        }).sortable({
          items: '.container_l_01',
          stop: function(event, ui) {
            var data = "";

            $(".container_l_01").each(function(i, el){
                data += $(el).attr('id') + '=' + $(el).children('.sort-order').val() + ',';            
            });

            alert(data);
          }
        });

        $('#accordion').on('accordionactivate', function (event, ui) {
          if (ui.newPanel.length) {
            $('#accordion').sortable('disable');            
          } 
          else {
            //alert("entered the else");
            $('#accordion').sortable('enable');            
          }
        }); 

      });
    }
  }
})(jQuery);

如何将数据从JavaScript发送到Drupal 8表单

0 个答案: