How do I invoke JavaScript in AjaxResponse?

Question

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
– Kevin, Commented Nov 18, 2017 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
– Kevin, Commented Nov 18, 2017 at 21:08
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
– Kevin, Commented Nov 19, 2017 at 19:25

Oulalahakabu · Accepted Answer · 2017-11-23 07:33:52Z

4

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.

answered Nov 23, 2017 at 7:33

Oulalahakabu

1,3538 silver badges14 bronze badges

Add a comment |

Stack Exchange Network

How do I invoke JavaScript in AjaxResponse?

1 Answer 1

Your Answer

Hot Network Questions

How do I invoke JavaScript in AjaxResponse?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions