By sadeghpro


2019-01-06 09:55:54 8 Comments

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;
  }
}

1 comments

@No Sssweat 2019-01-06 13:22:48

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.

@sadeghpro 2019-01-07 04:58:23

tnx I test your code but not help me and wrapper only for when you want replace html. see api.drupal.org/api/drupal/core!core.api.php/group/ajax/8.2.x

@No Sssweat 2019-01-07 05:19:28

@sadeghpro how else do you expect to see your dump dpm($form); and your return $form if there is no new html?

@sadeghpro 2019-01-07 05:34:16

my problem is there is no ajax call to have response. nothing happened when click a button. if ajax send request then I must change dump($form) and set up it.

@No Sssweat 2019-01-07 05:48:24

@sadeghpro like I mentioned dump($form) causes issues. Try with just return $form and get that working first.

@sadeghpro 2019-01-07 06:06:52

ok I remove dump($form) and only return form but nothing change. I tell you I use firefox inspect network tab there is no ajax request when click button.I think render api don't add ajax to element when I use element in another custom element

Related Questions

Sponsored Content

1 Answered Questions

ajax modified form drop down doesn't save

  • 2014-10-31 16:49:29
  • user1015214
  • 398 View
  • 0 Score
  • 1 Answer
  • Tags:   ajax forms

0 Answered Questions

How to force form_state['input'] to form_state['values']

  • 2015-08-21 03:13:20
  • noah
  • 487 View
  • 2 Score
  • 0 Answer
  • Tags:   forms ajax

3 Answered Questions

[SOLVED] How to give custom function in D8 custom field widget class?

  • 2016-08-16 10:09:40
  • Jitha M Saroj
  • 694 View
  • 0 Score
  • 3 Answer
  • Tags:   8

1 Answered Questions

[SOLVED] How to validate all elements in Custom Widget

  • 2016-08-19 06:18:23
  • Jitha M Saroj
  • 574 View
  • 1 Score
  • 1 Answer
  • Tags:   8

0 Answered Questions

Custom Fields not displayed

  • 2016-08-10 11:53:46
  • Jitha M Saroj
  • 675 View
  • 1 Score
  • 0 Answer
  • Tags:   8

0 Answered Questions

#states in formElement for a FieldWidget

  • 2016-10-28 20:32:41
  • Malabya Tewari
  • 88 View
  • 3 Score
  • 0 Answer
  • Tags:   8 entities

0 Answered Questions

How to access the values of custom Widget form fields?

  • 2016-08-25 10:37:31
  • Jitha M Saroj
  • 648 View
  • 0 Score
  • 0 Answer
  • Tags:   8

0 Answered Questions

How to build ajax "Add More" form bean?

  • 2016-01-22 03:50:27
  • Henry Tran
  • 106 View
  • 2 Score
  • 0 Answer
  • Tags:   ajax blocks

2 Answered Questions

[SOLVED] dependent dropdowns in ajax

  • 2011-10-27 11:29:00
  • jan
  • 2630 View
  • 0 Score
  • 2 Answer
  • Tags:   7 ajax

Sponsored Content