1

I'm submitting a form via AJAX.

$response = new AjaxResponse();

It's not using the Drupal default dialog, so I can't use $response->addCommand(new CloseModalDialogCommand()); after all validation is done. It's using jQuery Modal.

Validation is working fine. After all things done I want to execute Javascript in submitForm function.

Which function should I use? I need to check for example alert(1).

I have to close window using Javascript & Alert message as well. I tried AlertCommand but not working.

Following this example: https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Ajax%21InvokeCommand.php/class/InvokeCommand/8.2.x But not working

I have below code

modules/demo_test/src/Form/DemoTestForm.php

namespace Drupal\demo_test\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\InvokeCommand;

class DemoTestForm extends FormBase {


  public function buildForm(array $form, FormStateInterface $form_state) {


    $form['#prefix'] = '<div id="demo-test--modal-form">';
    $form['#suffix'] = '</div>';

    $form['firstname'] = [
      '#type' => 'textfield',
      '#title' => $this->t('First name'),
      '#required' => TRUE,
    ];

    $form['actions'] = [
      '#type' => 'actions',
    ];

    $form['actions']['submit'] = [
      '#name' =>'submit',
      '#type' => 'submit',
      '#value' => $this->t('Submit'),
      '#ajax' => [
        'callback' => '::ajaxSubmitForm',
        'event' => 'click',
      ],
    ];

    $form['#attached']['library'][] = 'demo_test/demo';

    return $form;
  }

  public function ajaxSubmitForm(array &$form, FormStateInterface $form_state) {
    drupal_get_messages();

    $response = new AjaxResponse();
    if ($form_state->getErrors()) {
      unset($form['#prefix']);
      unset($form['#suffix']);
      $form['status_messages'] = [
        '#type' => 'status_messages',
        '#weight' => -10,
      ];
      $response->addCommand(new HtmlCommand('#demo-test-modal-form', $form));
    }
    return $response;
  }

  public function getFormId() {
    return 'demo_test_form';
  }

  public function submitForm(array &$form, FormStateInterface $form_state) {
    $response = new AjaxResponse();
    $response->addCommand(new InvokeCommand('html', 'trigger', array(
      'triggerName',
      array(
        'foo' => 'bar',
      ),
    )));
    return $response;
  }
}

modules/demo_test/js/demo.js

(function ($, Drupal) {

  'use strict';

  Drupal.behaviors.demo = {
    attach: function (context, settings) {

      $(document).on('triggerName', function(e, data) {
        alert('data.foo'); // alerts string 'bar'
      });
    }
  };

})(jQuery, Drupal);

jQuery(document).on('triggerName', function(e, data) {
    alert(1);
    alert('data.foo'); // alerts string 'bar'
});

It's not going in JS file & alert. JS file is loading fine.

  • You need to define what "not working" means and show your code. InvokeCommand definitely works and is exactly how you would communicate from an AjaxResponse to trigger any arbitrary Javascript function or method. – Kevin Nov 18 '17 at 18:05
  • Also it is perfectly fine if you aren't using modals and JS UI elements that Drupal uses. You can go off and define 100 AjaxCommands of your own and do whatever you please, just like CloseModalDialogCommand. Two modules I wrote showing an example of this are iGrowl and SweetAlert. drupal.org/project/igrowl & drupal.org/project/sweetalert – Kevin Nov 18 '17 at 21:08
  • @Kevin I added the code. Please look in to that – Mike Nov 19 '17 at 4:59
  • Whats with the function outside of your behavior scope? – Kevin Nov 19 '17 at 5:48
  • Anyway I think what you are missing is that your function is not an extension of jQuery and cannot be called. See this comment on the doc page: api.drupal.org/comment/62911#comment-62911 – Kevin Nov 19 '17 at 19:25
2

Best way is probably to add your own custom command :

<?php
namespace Drupal\demo_test\Ajax;
use Drupal\Core\Ajax\CommandInterface;
class DemoTestJsCommand implements CommandInterface
{
    public function render(){
        return [
            'command' => 'demoTestJsCommand',
        ];
    }

}

And JS :

Drupal.AjaxCommands.prototype.demoTestJsCommand = function (ajax, response) {
    alert(1);
};

Then, you just have to add

$response->addCommand(new DemoTestJsCommand());

in you form's response.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.