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

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

Hướng dẫn sử dụng Redux để quản lý hiệu quả trong ứng dụng React

Average: 7.7 (3 votes)

Cài đặt Webpack để viết Reactjs bằng ES6 và những thuận lợi của ES6

Average: 9.5 (2 votes)

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)




Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

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

 Hướng dẫn chung khi mua bộ chuyển đổi, sạc, bộ nguồn
Hướng dẫn chung khi mua bộ chuyển đổi, sạc, bộ nguồn

Adapter (bộ chuyển đổi, sạc, bộ nguồn) là bộ phận cung cấp nguồn điện cho laptop kiêm luôn chức năng sạc pin, đóng vai trò hết sức quan trọng, quyết định tính ổn định của laptop của bạn.

Áp dụng Drupal Patches mà không Coders

If you use Drupal regularly, this will happen to you at some point. However, one of the good things about using Drupal is there are so many other users that someone else may well have found and solved the error.

Android là hệ điều hành bị virus tấn công nhiều nhất
Android là hệ điều hành bị virus tấn công nhiều nhất

Hệ điều hành di động của Google, Android, thống trị thị trường và bị tấn công mạnh nhất bởi virus “con ngựa thành Troy” và hàng loạt virus khác.