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 '18 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 '18 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 '18 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 '18 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 '18 at 1:57
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, privacy policy and cookie policy

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