infinite select/deselect loop

louking

Link to test case: http://live.datatables.net/mesorudu/1/edit

Description of problem:

I've copied the code from https://datatables.net/blog/2019-01-11. In my case I want to allow display of the table for the click event on the + details-control field, and edit of the table when the user selects the row.

I've removed the editor function in the child row for now, as this doesn't seem to be related to the problem.

In http://live.datatables.net/mesorudu/1/edit, when the user selects the row, the code goes into an infinite select / deselect loop.

Any guidance would be appreciated.

Possibly I need to stop propagation in the select and/or deselect handler if some condition is met?

[note: if I remove the table.detach call in destroyChild, the select only fires once but deselect/select events are lost - see http://live.datatables.net/mofumuzi/1/edit -- having said that I think we should try to understand the infinite loop when most closely based on the example in https://datatables.net/blog/2019-01-11]

kthorngren

Thanks for the test case. Interesting problem. In looking at your first link I found that the ajax request in the child Datatable seems to cause the parent Datatable to deselect all rows then re-select them. Not sure why this would affect the parent table. To show this I removed the ajax request and replaced it with one row of data. Using data the issue doesn't appear. Hopefully @allan or @colin can explain why this occurs in your [test case](http://live.datatables.net/mesorudu/1/edit with ajax but not in this example using data:
http://live.datatables.net/tafihida/1/edit

I guess you could use a jQuery ajax() request then in the success function use data. However using the user-select event might be better. You can use select.selector to allow for row selection except for the details-control column using 'td:not(.details-control)'. Then in the user-select event determine if the child row is shown or not and perform the appropriate action. This event runs whether the row is selected or not. Also remove the call to destroyChild() from the deselect event. See this example:
http://live.datatables.net/tocavuqa/1/edit

Hopefully this takes care of your issues.

Kevin

louking

http://live.datatables.net/tocavuqa/1/edit mostly works, but behaves funny if + is clicked then select. I found I had to use the user-select event to avoid that.

One key point in this code vs mine is my code creates an ID for the child table, and this code does not. With the specified id, my code was behaving funny if I removed the call to destroyTable because it left dangling events which fired multiply.

This definitely gets me closer to working so I'll mess around with it and see if I can combine your suggestions with my code to get something which doesn't behave bizarrely with odd combinations of + and select clicking.

louking

http://live.datatables.net/tocavuqa/1/edit also behaves funny if I select another row when the first one was selected. Leaves the first row highlighted unless I select the second row again, at which point it closes the second row.

Sigh.

Hopefully we can get an answer from @allan or @colin why the first example doesn't work.

kthorngren

I can see where using two different event handlers might be confusing. If you want to keep only one child row open at a time you will probably need to add code to keep track of the currently opened child row and make sure to close it if another is selected via either details-control or row selection. Also you will probably want to deselect that row. This should also take care of the case where you open the row with one method and close with the other.

Kevin

louking

I don't mind multiple rows being opened (for display by the +/- button) but I want the currently selected row to be in edit mode. I think when I set select: 'single' I should see only one row selected at a time. I should see a deselect event on the row I'm leaving edit mode and select (or user-select) on the row I'm entering edit mode. This is the other (possibly the main) reason why I was using select: 'single' and user-select.dt to parse out the +/- (display-control) behavior vs true row select.

Thanks, and hoping @allen or @colin has time to look at the infinite loop in the original example, as I'd rather not get to far afield from that implementation if possible.

kthorngren

Looks like its a race condition in my example. May have something to do with the child ajax request. Put a small setTimeout when calling createChild() when the row is selected.
http://live.datatables.net/tocavuqa/3/edit

Still looks like there is work needed to keep track of previous selected rows. For example:

• Select the first row, it becomes selected and opens.
• Select the second, it now becomes the only selected row and opens. the first remains open.
• Select the first, it now becomes the only selected but the child closes.

Kevin

allan

Kevin zeroed in on the problem with this comment:

In looking at your first link I found that the ajax request in the child Datatable seems to cause the parent Datatable to deselect all rows then re-select them. Not sure why this would affect the parent table.

It shouldn't! But what was happening was that the preXhr event bubbles, so the listener that Select places on the parent table was seeing that event triggered for the child row. Thus it thought there was a reload on its own table - causing items to be reselected (new rows, so they'd need to be selected again).

That is wrong - it should only listen for preXhr on its own table - I've committed a fix and updated the example with that latest code. It will be in the nightly soon.

I've also reduced the event listeners to just those for select and deselect. Like Kevin, I'd suggest against using two overlapping listeners.

Allan

louking

Thanks. I'll patch my version of select until a new release is available. The example doesn't quite work (e.g., deselect event throws an error, details-control click causes select), but I'm sure I will be able to get my code working with this fix.

Thanks for your quick attention to this!

For anyone following http://live.datatables.net/fuxemufo/1/edit is better, although needs some action when display-control is clicked.