2

I'm having an issue with some modal dialogs in Drupal 8.3.5. My requirement says that when I'm on a particular form under a particular condition, then a modal dialog pops up and collects some additional information.

I can open the dialog, but I can't make the form actually do anything once it's up. Clicking the submit button doesn't actually fire anything on the server, but I do get "An AJAX HTTP error occurred".

The form itself is pretty simple:

public function buildForm(array $form, FormStateInterface $form_state, $options = NULL) {
  $form['#prefix'] = '<div id="modal_example_form">';
  $form['#suffix'] = '</div>';

  // The status messages that will contain any form errors.
  $form['status_messages'] = [
    '#type' => 'status_messages',
    '#weight' => -10,
  ];

  // A required checkbox field.
  $form['our_checkbox'] = [
    '#type' => 'checkbox',
    '#title' => $this->t('I Agree: modal forms are awesome!'),
    '#required' => TRUE,
  ];

  $form['actions'] = ['#type' => 'actions'];
  $form['actions']['send'] = [
    '#type' => 'submit',
    '#value' => $this->t('Submit modal form'),
    '#attributes' => [
      'class' => [
        'use-ajax',
      ],
    ],
    '#ajax' => [
      'callback' => [$this, 'submitModalFormAjax'],
      'event' => 'click',
    ],
  ];
  $form['#attached']['library'][] = 'core/drupal.dialog.ajax';

  return $form;
}

Here's the thing, though. When I open this form with a link, it works. When I open it with an OpenModalDialogCommand(), it doesn't.

The link that opens the form successfully and lets it submit:

$form['open_modal'] = [
  '#type' => 'link',
  '#title' => $this->t('Open Modal'),
  '#url' => Url::fromRoute('modal_form_example.open_modal_form'),
  '#attributes' => [
    'class' => [
      'use-ajax',
      'button',
    ],
  ],
];

And here is the OpenModalDialog() command that opens the form but doesn't let it submit:

function submitModalFormAjax(array &$form, FormStateInterface $form_state) {
  $response = new AjaxResponse();

  // Get the modal form using the form builder.
  $modal_form = \Drupal::formBuilder()->getForm('Drupal\modal_form_example\Form\ModalForm');

  // Add an AJAX command to open a modal dialog with the form as the content.
  $response->addCommand(new OpenModalDialogCommand('My Modal Form', $modal_form, ['width' => '800']));

  return $response;
}

Am I using the OpenModalDialog() wrong? Is there something I'm missing on my form to make it work correctly? Is there a different way I'm supposed to be calling the form?

How can I make my modal dialog submit buttons work when I call it with an OpenModalDialog() command?

  • This is tricky solving this with two forms. So I usually do this in a single form by delivering the modal parts of the form hidden in the main form and open them client side. If you need additional data from the server you can load new form elements for the modal segments the same as for the main form. You can stay in this kind of hybrid js/ajax mode as long as you like until the user hits the final submit button and you get delivered all collected input data in one piece. – 4k4 Aug 14 '17 at 18:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.