ajax - Drupal 8 在 ajax 回调后添加 ajax 表单元素

Question

我正在构建一个包含多个支持 ajax 的表单元素的 drupal 表单。

我有一个选择列表，它在更改后执行 ajax 回调。问题是它向页面添加了一个新的选择列表，该页面也启用了 ajax。这似乎不起作用，这对我来说似乎合乎逻辑，因为 ajax 实际上被捆绑并添加到页面中，因此它在 replacecommand 中丢失了。

有没有人有这方面的经验，有没有人有解决办法？

这是我的代码

  /**
     * {@inheritdoc}
     */
    public function buildForm(array $form, FormStateInterface $form_state)
    {
        $form['city'] = [
            '#type' => 'select',
            '#title' => $this->t('Station'),
            '#description' => $this->t('City'),
            '#options' => array(
                'Aalst' => $this->t('Aalst'),
                'Brussel' => $this->t('Brussel'),
                'Hasselt' => $this->t('Hasselt'),
                'Leuven' => $this->t('Leuven'),
            ),
            '#ajax' => [
                'callback' => array($this, 'extendFormAjax'),
                'event' => 'change',
                'progress' => array(
                    'type' => 'throbber',
                    'message' => t('Choose City'),
                ),
            ],
            '#suffix' => '<div id="extended-form"></div>',
        ];

        $form['submit'] = [
            '#type' => 'submit',
            '#value' => t('Submit'),
        ];

        return $form;
    }

    /**
     * Ajax callback to validate the email field.
     */
    public function extendFormAjax(array &$form, FormStateInterface $form_state)
    {
        $parking = [
            '#type' => 'select',
            '#title' => $this->t('Parking'),
            '#description' => $this->t('Parking'),
            '#options' => [
                'P1' => $this->t('P1'),
                'P2' => $this->t('P2'),
            ],
            '#ajax' => [
                'callback' => array($this, 'extendFormAjax'),
                'event' => 'change',
                'progress' => array(
                    'type' => 'throbber',
                    'message' => t('Choose parking'),
                ),
            ],
        ];

        $response = new AjaxResponse();
        $response->addCommand(new InsertCommand('#extended-form', $parking));

        return $response;
    }

Answer 1

我有一个类似的问题，我通过在 buildForm 中添加元素并为其添加包装器并通过 HtmlCommand 发送表单元素来解决它

  /**
 * {@inheritdoc}
 */
public function buildForm(array $form, FormStateInterface $form_state)
{
    $form['city'] = [
        '#type' => 'select',
        '#title' => $this->t('Station'),
        '#description' => $this->t('City'),
        '#options' => array(
            'Aalst' => $this->t('Aalst'),
            'Brussel' => $this->t('Brussel'),
            'Hasselt' => $this->t('Hasselt'),
            'Leuven' => $this->t('Leuven'),
        ),
        '#ajax' => [
            'callback' => array($this, 'extendFormAjax'),
            'event' => 'change',
            'progress' => array(
                'type' => 'throbber',
                'message' => t('Choose City'),
            ),
        ],
    ];
     $form['parking'] = [
        '#prefix' => '<div id="extended-form">',
        '#suffix' => '</div>',
        '#type' => 'select',
        '#title' => $this->t('Parking'),
        '#description' => $this->t('Parking'),
        '#options' => [
            'P1' => $this->t('P1'),
            'P2' => $this->t('P2'),
        ],
        '#ajax' => [
            'callback' => array($this, 'extendFormAjax'),
            'event' => 'change',
            'progress' => array(
                'type' => 'throbber',
                'message' => t('Choose parking'),
            ),
        ],
    ];

    $form['submit'] = [
        '#type' => 'submit',
        '#value' => t('Submit'),
    ];

    return $form;
}

/**
 * Ajax callback to validate the email field.
 */
public function extendFormAjax(array &$form, FormStateInterface $form_state)
{
    $parking = [
        '#type' => 'select',
        '#title' => $this->t('Parking'),
        '#description' => $this->t('Parking'),
        '#options' => [
            'P1' => $this->t('P1'),
            'P2' => $this->t('P2'),
        ],
        '#ajax' => [
            'callback' => array($this, 'extendFormAjax'),
            'event' => 'change',
            'progress' => array(
                'type' => 'throbber',
                'message' => t('Choose parking'),
            ),
        ],
    ];

    $response = new AjaxResponse();
    $response->addCommand(new HtmlCommand('#extended-form', $parking));

    return $response;
}

试试看。我没有测试代码。