Custom JQuery code does not load

Question

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 

Answer 1

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.