Drupal 8在Ajax回调后添加Ajax表单元素 [英] Drupal 8 add ajax form element after ajax callback

问题描述

我正在构建具有多个启用了Ajax的表单元素的Drupal表单.

I am building a drupal form with multiple ajax enabled form elements.

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

I have one select list that does an ajax callback after change. The problem is that it adds a new select list to the page, which is also ajax enabled. This does not seem to work, which seems logical to me because the ajax is actually bundled an added to the page so it is lost in the replacecommand.

有没有人对此有经验，并且有人有解决方案吗?

Is there anyone experienced with this, and does anyone have a solution ?

这是我的代码

  /**
     * {@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;
    }

推荐答案

我遇到了类似的问题，我通过在buildForm中添加元素并为其添加包装器并通过 HtmlCommand发送form元素来解决了该问题.代码>

I had a similar issue and i resolved it by adding the element in buildForm and adding a wrapper for it and sending the form element via 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;
}

像这样尝试.我尚未测试代码.

Try it like this. I have not tested the code.

这篇关于Drupal 8在Ajax回调后添加Ajax表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！