0

Iam trying to call custom JQuery code but its just not working

new HtmlCommand() and InvokeCommand(method:css) is just working fine, just my custom script is not executed:

Controller:

    <?php
    /** * @file * Contains Drupal\ajax_example\AjaxExampleForm */

    namespace Drupal\ajax_example\Form;

    use Drupal\ajax_example\Ajax\AjaxExampleCommand; use Drupal\Core\Ajax\AjaxResponse; 
    use Drupal\Core\Ajax\CommandInterface; 
    use Drupal\Core\Ajax\ChangedCommand; 
    use Drupal\Core\Ajax\CssCommand; 
    use Drupal\Core\Ajax\HtmlCommand; 
    use Drupal\Core\Ajax\InvokeCommand; 
    use Drupal\Core\Form\FormBase; 
    use Drupal\Core\Form\FormStateInterface;

    class AjaxExampleForm extends FormBase{

    /**
     * @param array $form
     * @param FormStateInterface $form_state
     *
     * @return array
     */
    public function buildForm(array $form, FormStateInterface $form_state) {

        $form['submit'] = array(
            '#type' => 'button',
            '#value' => 'Login',
            '#attached' => array(
              'library' => array(
                'ajax_example/ajaxCustom','core/jquery')),
            '#ajax' => array(
                'callback' => 'Drupal\ajax_example\Form\AjaxExampleForm::ajaxCallOwn',
                'event' => 'click',
                'progress' => array(
                    'type' => 'throbber',
                    'message' => 'ajaxOwn',
                ),
        ));
    }

public function ajaxCallOwn(array &$form, FormStateInterface $form_state)
  {
    $ajax_response = new AjaxResponse();

    //$ajax_response->addCommand(new HtmlCommand('#edit-user-name2--description', "changedDessrition!!!!"));

    $ajax_response->addCommand(new InvokeCommand(NULL,'changeDescription'));
    return $ajax_response;
  }

Command:

<?php

/**
 * @file
 * Contains Drupal\ajax_example\Ajax\AjaxExampleCommand
 */

namespace Drupal\ajax_example\Ajax;

use Drupal\Core\Ajax\CommandInterface;

class AjaxExampleCommand implements CommandInterface{

  /**
   * @var string
   */
  protected $blub;
  // Constructs a SystemBlubCommand object.

  /**
   * Constructs an SlideDownCommand object.
   * @param string $blub
   */

  public function __construct() {
    $this->blub = "changed!!!!";
  }

  public function render() {
    return array(
      'command' => 'changeDescription',
      'method' => NULL,
      'blub' => $this->blub,
    );
  }
}

ajaxCustom.js

(function ($, Drupal) {

    /**
     * Command to Slide Down page elements before removing them.
     *
     * @param {Drupal.Ajax} [ajax]
     * @param {object} response
     * @param {string} response.blub
     * @param {number} [status]
     */

    Drupal.AjaxCommands.prototype.changeDescription = function (ajax, response, status) {

        alert("asdfasdgf");
        $("#edit-user-name--description").remove();
        $("#edit-user-name--description").html(response.blub);

    };

})(jQuery, Drupal);

ajax_example.libraries.yml:

ajax_example:
  version: 1.x
  js:
    js/ajaxCustom.js: {}
  dependencies:
    - core/drupal
    - core/drupal.ajax
    - core/jquery

Tried so many things like : this with no success

This is the error I get in the Browser:

    Uncaught TypeError: Cannot read property 'apply' of undefined
    at Drupal.AjaxCommands.invoke (ajax.js?v=8.4.4:569)
    at Drupal.Ajax.success (ajax.js?v=8.4.4:407)
    at Object.success (ajax.js?v=8.4.4:222)
    at Object.t.success (jquery.form.min.js?v=3.51:11)
    at i (jquery.min.js?v=3.2.1:2)
    at Object.fireWith [as resolveWith] (jquery.min.js?v=3.2.1:2)
    at A (jquery.min.js?v=3.2.1:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js?v=3.2.1:4)
invoke @ ajax.js?v=8.4.4:569
Drupal.Ajax.success @ ajax.js?v=8.4.4:407
success @ ajax.js?v=8.4.4:222
t.success @ jquery.form.min.js?v=3.51:11
i @ jquery.min.js?v=3.2.1:2
fireWith @ jquery.min.js?v=3.2.1:2
A @ jquery.min.js?v=3.2.1:4
(anonymous) @ jquery.min.js?v=3.2.1:4
XMLHttpRequest.send (async)
send @ jquery.min.js?v=3.2.1:4
ajax @ jquery.min.js?v=3.2.1:4
e.fn.ajaxSubmit @ jquery.form.min.js?v=3.51:11
Drupal.Ajax.eventResponse @ ajax.js?v=8.4.4:316
(anonymous) @ ajax.js?v=8.4.4:255
dispatch @ jquery.min.js?v=3.2.1:3
q.handle @ jquery.min.js?v=3.2.1:3

If I use InvokeCommand error in recent logs:

Deprecated function: call_user_func_array() expects parameter 1 to be a valid callback, non-static method Drupal\ajax_example\Form\AjaxExampleForm2::ajaxCallOwn() should not be called statically in Drupal\Core\Form\FormAjaxResponseBuilder->buildResponse() (line 69 of /Applications/MAMP/htdocs/core/lib/Drupal/Core/Form/FormAjaxResponseBuilder.php) #0 
8
  • InvokeCommand invokes a jQuery function on the elements, so you'd need $.fn.changeDescription = function(data) { alert(data); };. Otherwise you should use the command you've created: $ajax_response->addCommand(new AjaxExampleCommand());
    – Clive
    Jan 21, 2018 at 15:57
  • Clive beat me to it. Yes you want the PHP class command you made, not InvokeCommand that’s for arbitrary JS function calls.
    – Kevin
    Jan 21, 2018 at 16:00
  • Thanks for your anser, but I still get the error: Uncaught TypeError: Cannot read property 'apply' of undefined Even in another Controller where new AppendCommand works fine. And I alway do: drush cc drush and drush cr This really drives me nuts since 3 days
    – verklixt
    Jan 21, 2018 at 20:47
  • Why is method null and what is “blub”? You can compare it here to a module I wrote: cgit.drupalcode.org/sweetalert/tree
    – Kevin
    Jan 22, 2018 at 1:14
  • Should be 'library' => array('module_name/library_name')), So in your case, since the library name is the same as the module name, 'library' => array('ajax_example/ajax_example')),
    – No Sssweat
    Jan 22, 2018 at 1:57

1 Answer 1

0

Thanks to No Sssweat, that was the problem!

I thought it should be:

'library' => array('module_name/nameOfJSFile'));

Thanks to Kevin as well, your module sweetalert gave me the right hint.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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