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.

cherry_quahst

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' => [
    'file-import-input',
  ],
],
'#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 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

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

 

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

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

 
PHP – Ruby – Python

Sự khác nhau giữa các ngôn ngữ PHP – Ruby – Python

Cũng giống như Tiếng Việt, Tiếng Anh, Tiếng Nhật… trong lập trình cũng có rất nhiều ngôn ngữ. Mỗi ngôn ngữ đều có những ưu điểm, khuyết điểm, và các thế mạnh cũng như môi trường, mục đích sử dụng khác nhau

System76 Bonobo Extreme - MTXT chơi game chạy Ubuntu

System76 Bonobo Extreme - MTXT chơi game chạy Ubuntu

Ubuntu là nền tảng hệ điều hành dễ sử dụng, được cập nhật thường xuyên, nhận được sự hỗ trợ bởi cộng đồng người dùng và nhiều hơn nữa.

11 Sản phẩm "bèo bọt" trong quá khứ của Apple

11 Sản phẩm "bèo bọt" trong quá khứ của Apple

Nếu iPad và iPhone tạo nên sự thay đổi ngoạn mục trong lịch sử công nghệ tiêu dùng thế giới, thì một số sản phẩm xa xưa của Apple lại hoàn toàn bị lãng quên.

Công ty diệt chuột T&C

 

Diet con trung