Xử lý Ajax events trên entity reference (autocomplete) trong Drupal 8

Xử lý Ajax events trên entity reference (autocomplete) trong Drupal 8

In this short article I will show you something that amazed me when I discovered it. You’ll maybe say: boh, I already knew this from way back or really, that amazed you? But nonetheless, I found it cool because it really fit my needs. And like many many other things, I had no clue about this.

We all know how we can easily ajaxify our forms for quite a lot of uses cases. I talk about some of them in this Sitepoint article for example. But the other day I had a few entity autocomplete elements that needed to trigger an Ajax callback using the regular form API when the user made a selection. So I started with the regular “change” event like you normally have on other elements such as select. And it did the job…but not really. I mean, the user would look for the entity, select it, get the box filled, but no Ajax request. Only after the focus left the input would the callback kick in. This can work, maybe, but you are relying on the user’s intuition to unfocus from that form element. And that’s a nono.


Then I realised that the entity autocomplete element uses the jQuery UI autocomplete widget for finding entities. And this widget fires some events of its own. Enter autocompleteclose. This event is fired when the user has made the selection, the autocomplete closed, the selection was made and the element populated. Exactly what I needed and I guess many people need. So my form element #ajaxdefinition now looks like this:

My form element definition now looks like this:

'#ajax' => [
  'callback' => '::ajaxRebuild',
  'event' => 'autocompleteclose',
  'wrapper' => 'form-container',

And this did the trick royally. The user would find the entity, click on it, the event would fire and my form rebuild with all the values available. Super.

Some hours of totally unrelated development later, I tried clearing the value of the element once selected. Oops, nothing would happen. But it should, at least in my case. The Ajax callback should be triggered to update stuff based on the (un)selected value. Hm…the changeevent would do that. Now what?!

Turns out you can use multiple events in one single Ajax definition. So I could use both of them which would trigger the same Ajax callback. Another freebie. So with the new element definition like this:

'#ajax' => [
  'callback' => '::ajaxRebuild',
  'event' => 'autocompleteclose change',
  'wrapper' => 'form-container',

Everything was peachy. Working seamlessly as the user would select something or erase the selection.

I hope this helps you as well, discovering it maybe a bit faster than it took me. Because you have it right here! :)

Do you know the event triggered when a file has been uploaded & validated with a managed_file form element ?

If you try something like this, nothing happen. My trigger is... never triggered :

'#required' => true,
'#prefix' => '',
'#suffix' => '',
'#type' => 'managed_file',
'#title' => $this->t('Uploader votre fichier CSV'),
'#description' => [
  '#theme' => 'file_upload_help',
  '#upload_validators' => $validators
'#upload_location' => 'public://csvfiles',
'#upload_validators' => $validators,
'#attributes' => [
  'class' => [
'#ajax' => [
  'event' => 'change',
  'callback' => '::refreshPreview',
  'wrapper' => 'preview',
  'progress' => [
    'type' => 'throbber',
    'message' => t('Verifying entry...'),
Bạn thấy bài viết này như thế nào?: 
Average: 5 (1 vote)
Ảnh của Tommy Tran

Tommy Tran owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy
  • Phone/Zalo: (+84) 944 225 212
  • WhatsApp: (+84) 944 225 212
  • Line Messenger: (+84) 944 225 212
  • Email: [email protected]
  • Telegram Messenger: https:/t.me/tommytran0401

Quảng cáo việc làm


Thích hợp các bạn nữ mảng thợ may làm việc tại nước NGA

Đơn hàng Tuyển dụng 100 Thợ may đi Nga(đợt 1 tháng 3.2021, đợt 2 tháng 5.2021). Lương thực lãnh 800 USD, bao ăn ở, vé máy bay và visa, phí xuất cảnh(1800 USD)trả khi đi làm có lương. Bạn có thể liên hệ CÔNG TY qua Phone/Zalo: (+84) 944 225 212. Công ty sẽ tư vấn cho bạn.

Xem chi tiết: >>> https://bit.ly/3o9NOfR

Tìm kiếm bất động sản





Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

Best Features of Angry Birds for Android

Best Features of Angry Birds for Android

Angry Birds falls in the Action category and has been rated as one of the most entertaining games ever.

Virus "dễ thương" tấn công Facebook dịp Giáng sinh

Virus "dễ thương" tấn công Facebook dịp Giáng sinh

Hiện nay, dân Facebook đang loan báo rầm rộ về loại virus mang tên Christmas Tree. Chúng được coi là thủ phạm khiến máy tính gặp sự cố và đi kèm lời cảnh báo...

Twitter “phản đòn” Facebook?

Twitter “phản đòn” Facebook?

Twitter vừa cho ra mắt một trang web con với tên gọi Twitter Stories. Liệu đây có là một “cú phản đòn” mà Twitter dành cho Timeline của Facebook – đối thủ nặng kí nhất của mình?

Wordpress Freelancer


Wordpress Freelancer