AJAX doesn't work in custom form element

Question

I want to create a custom form element for email that have a textfield and button and when click button send an email but ajax not working inside form elemen class. I test it in form api and it's ok but when move in form element on button click nothing happend this is my code

<?php
/**
 * Created by IntelliJ IDEA.
 * User: peter
 * Date: 24/12/18
 * Time: 13:59
 */

namespace Drupal\aqr_basic\Element;


use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Render\Element\FormElement;

/**
 * Provides a form element to display a email.
 *
 *
 * @FormElement("aqr_email")
 */
class EmailElement extends FormElement {


  public function getInfo() {
    $class = get_class($this);
    return [
      '#pre_render' => [
        [$class, 'preRenderSelect'],
      ],
    ];
  }


  public static function preRenderSelect($element) {
    dump($element);
    $email = [
      '#type' => 'email',
      '#title' => $element['#emailTitle'],
    ];
    $email = array_merge($email,$element['email']);
    $btnSendCode = [
      '#type' => 'ajax_button',
      '#value' => $element['#btnSendCodeTitle'],
      '#ajax' => [                  //////this ajax not work
        'callback' => '::email',
        'event' => 'click',
      ],
    ];

    $btnSendCode = array_merge($btnSendCode,$element['btnSendCode']);
    $verifyGroup = [
      '#type' => 'fieldgroup',
      '#attributes' => ['class' => ['hidden']],

    ];
    $verifyGroup['emailCode'] = [
      '#type' => 'textfield',
      '#title' => $element['#emailCodeTitle'],
    ];
    $verifyGroup['emailCode'] = array_merge($verifyGroup['emailCode'],$element['verifyGroup']['emailCode']);
    $verifyGroup['btnVerifyCode'] = [
      '#type' => 'ajax_button',
      '#value' => $element['#btnVerifyCodeTitle'],
      '#suffix' => '<div class="verification-desc email_verify">' . $element['#description'] . '</div>',
    ];
    $verifyGroup['btnVerifyCode'] = array_merge($verifyGroup['btnVerifyCode'],$element['verifyGroup']['btnVerifyCode']);

    $element = [
//      '#attached'=>[
//        'library' => ['aqr_basic/state'],
//        'drupalSettings' => [
//          'id' => $element['#id'],
//          'cities' => json_encode($cities),
//        ],
//      ],
      'email' => $email,
      'btnSendCode' => $btnSendCode,
      'verifyGroup' => $verifyGroup,
      '#attributes' => ['id' => ['email-wrapper-id'], 'class' => ['email_verify']],
    ];
    dump($element);
    return $element;
  }


  /**
   * {@inheritdoc}
   */
  public static function valueCallback(&$element, $input, FormStateInterface $form_state) {
    return $input;
  }

  public static function email(array &$form, FormStateInterface $form_state) {

    dump($form);

    return $form;
  }
}

Answer 1

I believe you may need this syntax as your callback, I think because everything went to being 'static' when you moved your demo code from a form to a Element.

 $btnSendCode = [
  '#type' => 'ajax_button',
  '#value' => $element['#btnSendCodeTitle'],
  '#ajax' => [                  
    'callback' => ['\Drupal\aqr_basic\Element\EmailElement', 'email'],
    'event' => 'click',
  ],
];

Answer 2

You need to add a wrapper and div ID to where you want the ajax to load

  '#ajax' => [               
    'callback' => '::email',
    'wrapper' => 'load-me-here', // we tell ajax to target this ID
    'event' => 'click',
  ],
  // attach the ID you targeted above to some element.
  '#attributes' => ['id' => 'load-me-here'],

  // you could create a new element if you want.
  // there is so many variations you can do to add the ID.

  //  $element['load'] = [
  //   '#type' => 'fieldset',
  //   '#title' => t('Load the stuff here'), 
  //   '#attributes' => ['id' => 'load-me-here'],
  //  ];

  // OR

  //  $element['load'] = [
  //   '#type' => 'markup',
  //   '#title' => t('Load the stuff here'), 
  //   '#markup' => '<div id="load-me-here"></div>', 
  //  ];

  // OR

  //  $element['load'] = [
  //   '#type' => 'fieldset',
  //   '#title' => t('Load the stuff here'), 
  //   '#prefix' => '<div id="load-me-here">',
  //   '#suffix' => '</div>',
  //  ];

Also, remove the dump($form); from your ajax email callback function, this prevents it from working.

You'll have to install Devel and use dpm($form); if you want to see the structure of the array. Also, note that Devel's kint($form); wont work on ajax callback either.