Home > Forum > Forms > Item list - action on ending or canceling edition?

Item list - action on ending or canceling edition?

0

29.01.2022

16:22

Hello,
I'm continuing my development of a form containing item list. The case is as follows:
I add an item to the item list and after it is added (upon ending the edition in one item edit mode) I want to automatically add an item that is dependant (dependancy is held in one of the items list fields of the idem being added). However if edition is canceled nothing should happen.
So, what approach would you advise?

I've tried using an external variable to hold the ID of the item that needs to be added, but it didn;t work well. I've tried to use callback, but no luck here either (as callback is triggered while still in the edit mode and what if I cancel the edition?).

The optimum would be if there could be a possibility to bind a form rule to ending the editin of an item in the list, but I guess there is no such possibility. Or am I wrong?

UPDATE: I managed to get on callback the list of dependant item IDs and the main item IDs both in separate attributes. I managed to create actions that I want to perform the desired tasks in a path. But this needs user to click the path button - how to automatically add the new items to the list on closing the edit window?

30.01.2022

01:59

Hi Michał,

I'm not sure that I understand everything, but the current question is: How to execute Javascript once the modal dialog for editing an item is closed.

My currently best bet is to use a mutation observer
I used this once to modify the behavior of an item list which is inside a tab. So it's not necessary visible /part of the DOM. With the observer you can react on DOM changes. Maybe you can create an observer which is only active when the user clicks on the edit icon. This observer could then watch for further changes. For example closing the modal, removing the modal from the DOM. Or you could trigger a set timeout which watches for the availability of the "closing" button to execute the original as well as your own logic. Or duplicate it and hide the original one

This link contains a stub for the mutation observer as well as one for a general timeout.

https://daniels-notes.de/posts/2021/javascript-form-rule-execution-on-page-load#reacting-on-createdremoved-elements

Best regards,
Daniel

Solution (0)

Helpful (0)

Wrong answer (0)

30.01.2022

09:04

In reply to: Daniel Krüger (Cosmo Consult)

Thanks Daniel,
Your code seems quite complicated :) I was thinking of something more like adding an event listener to the "End edit" button of the modal window. Something like:

endbutton.addEventListener("click", function(){ //here the function I want to execute; });

I will try this approach, as the eventlistener should work... I think it should.
Anyway, if this doesn't work I will try your solution Daniel :)

Solution (0)

Helpful (0)

Wrong answer (0)

30.01.2022

10:56

In reply to: Michał Ludwiczak

Hi Michał,

I would also use the same solution if it works. I don't remember whether I could overwrite the original event and add my own before calling the original one. One alternative would be to duplicate the button HTML, add your event which 'clicks' the button afterwards and hide the original one.

The question though is when do you know that the modal dialog had been created? Which would be a prerequisite for every solution.

I currently only have the ideas to either use settimeout or the observer. After all it should also work also when a new 'parent' row is created.

If you have another I will gladly use it.

Best regards,
Daniel

Solution (0)

Helpful (0)

Wrong answer (0)