An issue with individual column searching in Editor

coderx

Hi Allan,

when I use Individual column searching (text inputs) with Editor I can search the table nicely – the table is redrawn correctly using draw() method.

But when I click on edit link (created with In table form controls") and try to update that row, this error pops out:

"Uncaught TypeError: Cannot read property 'DT_RowId' of undefined".

If I open the edit form via the link, then close it and open the form again via the edit link, it works – but this procedure might be confusing for users (it works on second time only).

This happens only after using the column search – it seems that first click on table row immediately loses focus and it can not read any property.

Could you help me out? If you need any other information, I will gladly provide it. :)

Peter

PS: This issue does not exist when using "main" search input field but I would like to use column search.

allan

Hi,

Are you able to give me a link to the page showing the issue please? It sounds like there might be some missing data somewhere.

Allan

coderx

Hi,

please visit: [retracted]

Username: allan.jardine

Password: [retracted]

Example of steps:

1. Try to search in first column PN, e.g. enter string "ee".

2. Click on an edit link in a row, edit form appears.

3. Click on "Update" and in console this error shows up: "Uncaught TypeError: Cannot read property 'error' of undefined".

Note 1: This happens for any column search.

Note 2: The default "big" search works without problem.

allan

Hi,

Thanks for the link and instructions (I've removed the password from the post - let me know if you want the URL removed as well).

The issue doesn't appear to be related to the filtering (although that could be what is making it noticeable), but rather the JSON return from the server:

{"fieldErrors":[{"name":"unit_price","status":"This field is required"}]}

The JSON is fine, but the data contained in it refers to a field that doesn't exist in the form. There doesn't appear to be a unit_price named field, which is what is causing the error to occur.

Regards,
Allan

coderx

Hi,

please remove the link too. :)

I added unit_price to table and to editor, but the error still occurs. What else could cause the error?

Regards,
Peter

coderx

Another note: when you use column search, then immediately click on a row, it is selected for a short period, then it loses focus. If you click on it again everything works well.

It seems to me that first click does not work when using column search, but I do not know how to repair it.

allan

Hi Peter,

Link removed :-). I've just tried the page again and it appears to work okay. Did you clear your browser's cache?

The row selection issue is caused by the searchDelay option which is set to default of 250mS (I think, might be 200) when using server-side processing. That is causing the table to redraw and the row selection is lost.

You could try setting searchDelay to 0, or something smaller to mitigate the effect. I'm working on a replacement for TableTools' row selection that should have a fix for that built in.

Allan

coderx

Hi Allan,

I just tried it in Mozilla Firefox (clean) and in Chrome (incognito) but the issue persists for me. :(

1. I opened the view.
2. I searched first column PN, I searched for ee.
3. I clicked on first row Edit link (without clicking anywhere else).
4. I clicked on Update.
5. The row was not updated, this error shows up: "Uncaught TypeError: Cannot read property 'DT_RowId' of undefined".

Figure 1 – my steps in two pictures: https://drive.google.com/file/d/0B0jSdNO7d12gZGNOT3k5UC1wOHc/view?usp=sharing

Peter

allan

Could you drop me a PM with the link and login details so I can take a look again please? To do so, click on my name above and then "Send Message".

Thanks,
Allan

allan

Hi,

Thanks for the PM! I've just tried the exact steps above - it edits a row with the id 1201 and it actually appears to run through correctly. I don't see any errors occurring.

Is that the row id you would expect to have been edited based upon the above instructions?

Thanks,
Allan

coderx

Hi,

this is strange. When I logged in, opened the view, it worked for the fist time only (with the steps above).

When I repeated the process (after refreshing the page), it did not work.

I tried to experiment a bit:

1. When I search, then leave the search input field and after that I click Edit, it works well. I can click somewhere else or use Tab button.

2. When I search but I do not leave the input field first, and then click on Edit, it does not work.

Is this somehow workable? :) Would it help if I would put some JS code for focus removal while clicking on Edit?

P.

allan

When I search but I do not leave the input field first, and then click on Edit, it does not work.

I'm not abel to reproduce that I'm afraid. I search for ee in the first column and then immediately click on the "Edit" link for the first row while the input element for the first column's search has focus.

The editing window appears as expected for the first row shown in the table.

This is using Chrome 42 Mac.

Allan

coderx

The editing window appears as expected for the first row shown in the table.

And when you change some fields and click on Update, do the changes save correctly?

allan

No actually. I get an error reported in the browser's console:

Uncaught TypeError: Cannot read property 'DT_RowId' of undefined

I see the issue now. There is a change event on the input filter that causes the table to redraw. So if you change the value and then click outside of it, it will redraw the table.

If you click the "Edit" button immediately it will redraw while the edit form is shown. The result is that the original row being edited is no longer present in the table, hence the error.

This is happening as the row node is being used to trigger the edit .edit($(this).closest('tr')); . Instead, try passing in the row's DataTables index:

.edit( table.row( $(this).closest('tr') ).index() );

The index will survive the data reload, while the node doesn't.

The other option is to not use server-side processing.

Allan

coderx

Thank you very much, Allan! :) This seems to be the solution. :) I tried to change JS code and it works well.