Call rest service on field blur event and update editor fields

Red Sniper

I'd need some explanations on what the workflow with dt and editor would be to add the features explained below.

In the table shown in the image, the user can insert values for columns Val A , B , E while adding a new row.
When the user digits a number (id) in "Val B" and triggers a blur event on that field , a REST api is called , which returns an object with values for columns "Val C", "Val D", and "Val G".
Otherwise, if the user doesn't remember/know the id , he can click the search button (next to the field) which opens a modal , where he can basically do the same kind of search. As he receives a response, he can choose a record which should update the same columns as if a blur event happened (Val C, D, G).

I've read the doc about the blur , but it seems it only applies to the editor form.
I've also read about dependent(), but couldn't figure out how to implement it (I may avoid using it , if I manage to manually update the editor data for the new row, maybe with a preEdit)

Questions are:
- How can i make the 3rd column show the search button on inlineCreate() ?
- How do I trigger a blur event which calls a REST service , and its result updates values of the editor data and immediately update the editor line?

Many thanks in advance!!

allan

How can i make the 3rd column show the search button on inlineCreate() ?

There isn't a built in way to do that I'm afraid. However, how are you calling createInline()? Immediately after that call you could modify the HTML row that was created for the inline create and add the search icon. The tr for the row with the inline create action has a class name of dte-inlineAdd.

How do I trigger a blur event which calls a REST service

You wouldn't trigger a blur call, but rather call the submit() method when you want to submit the form.

Regards,
Allan

Red Sniper

how are you calling inlineCreate()?

with a click event on the "plus" button in the top right corner.

but rather call the submit() method when you want to submit the form.

Unfortunately I can't wait for the form to be submitted, as I have to update the values as soon as the user types the id value in colB and receives a rest response (this is a pretty critical feature, as this form has to behave like its counterpart of our desktop sw)
So , if I understand correctly, I have to manually attach a blur event on that input field and manually update each columns' html with the values received from the rest ?

thanks again Allan !

allan

Right - I think I'm following a bit better now. So when the user moves out of the B input (which is presumably how you know when they have finished typing) then you make an Ajax call to get data to fill other things in. In that case yes, adding your own event listener to that element would be the way to do it. You could use field().input() to get the input element so you can do:

editor.field('B').input().on('blur', function () {
  // ... ajax call
});

Allan

Red Sniper

Hello Allan ,
today I managed to test your advices, and they work !
Unfortunately I have encountered only a little issue.

The blur event is correctly applied to the input element.
However, it is triggered only when the user is adding a new row. If he "blurs" out of the element while he is just editing an already existing row, the blur event doesn't trigger (but I have noticed it is somehow triggered when I open dev tools in the browser....).

I'm going to post a test case later
In the meanwhile thanks again for your help!

allan

Good to hear we made a step forward. Yes, if you are able to show me a test case with the new issue, that would be great.

Thanks,
Allan

Red Sniper

I think I have found where the issue is.
It seems that the blur event isn't triggered when the user blurs out a field after he edited a single cell, (perhaps because the input field is disconnected from the dom at that time). Instead, while adding a new row with inlineCreate() , the input field remains until form submit, so the blur event is correctly triggered

However, I am posting the datatable config I have in my js. I couldn't reproduce the issue because in the datatable bin page, when you tab out of a field it goes to other DOM elements (it focus the "AutoRun with JS"), so that the input field remains instead of being disconnected from the dom. In my page, when I tab out a field, it automatically goes to the next editable field of the same row, causing the issue

http://live.datatables.net/gesifuqa/2/edit

Red Sniper

---

Here is another issue.
The search icon opens on click a modal where the user can search for a record.
How do I update the data of the row upon which the user clicked the button after I chose the record received from my rest call?

I thought that a simple rows(rowNr).data(newData).draw() would do it. Infact it updates the row data but it doesn't update the cell value

Thanks Allan

allan

The search icon opens on click a modal where the user can search for a record.

Sorry if I'm being blind - what search icon?

How do I update the data of the row upon which the user clicked the button after I chose the record received from my rest call?

Your row().data() should indeed do it. However, is the editor already active at that point? The row().data() method won't change data in a form that is already displayed.

Allan

Red Sniper

what search icon?

Ops, you're not blind Locally I use other fontawesome classes. The link below has the search icon in the 3rd column.

is the editor already active at that point?

The editor might not be active. The user could click the search button both while editing the field or not. Should this be a issue, It's not a problem make the search icon clickable only when editing the cell of the previous column

The row().data() method won't change data in a form that is already displayed.

You mean it won't update the editor field ? If so , ok, that makes sense (I can update it manually in case). The issue, though, was that I managed to update the dt data (editor not active), but the draw() didn't update the displayed value. Nevertheless, if I click the cell to edit its value, the editor input will show the updated value

updated link: http://live.datatables.net/gesifuqa/3/edit

allan

Thanks for the update. Changing the icon click event handler to i.fa-magnifying-glass so it picks up that new class now results in $(...).modal() is not a function in the console. Is it working for you?

http://live.datatables.net/gesifuqa/4/edit

Allan

Red Sniper

The bootstrap js was missing (I've forgot to add it).
Now it should work.
I have simplified the code wherever i could , to help u look into
However, some issue disappeared (the draw() not updating the displayed value) .
I 'd look into it a bit, as previous code has fns that are super tested in my codebase (otherwise, i would have seen errors in the browser console and got them fixed already).
The difference I see is that in live.datatables I have to specify this code to make the table editable, while in my local js i don't have to. Is there a reason?

          .on('click', 'tbody td:not(:last-child)', function(e) {
            modelObj.editor.inline(this); 
          })

http://live.datatables.net/gesifuqa/5/edit

thanks for your patience!

allan

The difference I see is that in live.datatables I have to specify this code to make the table editable, while in my local js i don't have to. Is there a reason?

Without being able to see your other page, I can't say I'm afraid. I'd guess something else is activating the inline editor.

For the "Unable to detect field" error message, add a return false; to your magnifying glass event handler: http://live.datatables.net/gesifuqa/6/edit

That tells jQuery to immediately stop event bubbling and works with its delegated events as well (which is why e.preventDefault() isn't enough in this case).

Allan

Red Sniper

Hi allan, i managed to solve the draw() issue I had.
The only issue I would ask for help now is the blur() that should trigger the rest

In my datatable , when i tab out of an editable field, it automatically moves to the next editable one. In this case, the blur isn't triggered even though the event is correctly assigned to the input field when editor creates it.
Only while adding a new row with inlineCreate() , the blur is triggered when I tab out of that field.

I couldn't reproduce the issue in the live.datatable page, because when you tab out of a field it focuses the "AutoRun with JS", instead of moving to the next editable field of the same row

http://live.datatables.net/gesifuqa/7/edit?js,output

allan

I've put an input element after the table, so the next tabbable element isn't the Run with JS button: http://live.datatables.net/gesifuqa/9/edit .

Now when I click to edit a cell and press tab, the blur happens - the event is fired and focus moves to the new input element.

On your real page, where would the focus move to if you press tab? What are you using to do that - KeyTable or some custom code?

Allan

Red Sniper

focus moves to the next editable field (in my case column "imposta") .
Editor and dt config is the same as my original js.

Anyway, I did further tests with "good" results.
1) I thought your input wasn't enough for a proof because out of the form (the issue in my case happens only when moving form a field to another, but if form is blurred, the event is triggered correctly). So i have added an extra column in the dt, and it works. So it definitely isn't the dt/editor config.
2) I have inspected the input element being added to the dom in my page and the one in live.datatables. In my page webpack (damn you!) adds a function that (as far as I could "debug" it ) prevents other fns to be executed in some cases ($.isTrigger is one of these).
3) I have tried using the open to manually remove events from the input, and add the blur back to it, but webpack interferes again.
This should definitely state the issue is webpack adding that fn (as it's the only difference in live.datatables and my page).
http://live.datatables.net/gesifuqa/10/edit

Shouldn't this be the case, I' ll let you know
Thank again for your patience Allan!

Red Sniper

focus moves to the next editable field (in my case column "imposta") .
Editor and dt config is the same as my original js.

Anyway, I did further tests with "good" results.
1) I thought your input wasn't enough for a proof because out of the form (the issue in my case happens only when moving form a field to another, but if form is blurred, the event is triggered correctly). So i have added an extra column in the dt, and it works. So it definitely isn't the dt/editor config.
2) I have inspected the input element being added to the dom in my page and the one in live.datatables. In my page webpack (damn you!) adds a function that (as far as I could "debug" it ) prevents other fns to be executed in some cases ($.isTrigger is one of these).
3) I have tried using the open to manually remove events from the input, and add the blur back to it, but webpack interferes again.
This should definitely state the issue is webpack adding that fn (as it's the only difference in live.datatables and my page).
http://live.datatables.net/gesifuqa/10/edit

Shouldn't this be the case, I' ll let you know
Thank again for your patience Allan!

allan

It would be really odd if Webpack was messing with JavaScript events. It should just be bundling different modules together. Do you have any Webpack plug-ins configured that might be changing the code - even a minification? Could they be disabled to see if it is them that is messing with the code?

Allan

Red Sniper

Sorry Allan, I missed the notification.
I confirm the webpack is messing with the editor plugin.
I am in contact with the devs I bought their bootstrap theme from, and as they stated, it can be that webpack modifies the included jss, so some plugins may need some custom workarounds.
At the moment, they are working on the issue, and will let me know asap.