System Error on Ajax Response

Benjamin Legrand

Hi,

I’m a licenced user and have been implementing DataTables and Editor for an internal project. I’ve prechecked the documentation / forums and can’t get my head around this issue.

I have a Editable datatable, which is loading JSON data successfully from the server.

JSON from server:

{
"data": [
{
"DT_RowId": "row_3",
"FUND_MANAGER": "Graham K4-D15 (Innocap Track)",
"NO_MULTI_MGR_OR_PORT_ALPHA": "ABC",
"PERCENT_SUBINVESTMENT_GRADE": "DEF",
"BENCHMARK_DRIVEN": "",
"MINIMU_SIZE": "",
"UCITS_III": "",
"TOTAL_ASSETS_FUND": "",
"SCORE": "",
"COMMENT": ""},
{
"DT_RowId": "row_1",
"FUND_MANAGER": "SPDR Gold Tracker",
"NO_MULTI_MGR_OR_PORT_ALPHA": "",
"PERCENT_SUBINVESTMENT_GRADE": "",
"BENCHMARK_DRIVEN": "",
"MINIMU_SIZE": "",
"UCITS_III": "",
"TOTAL_ASSETS_FUND": "",
"SCORE": "",
"COMMENT": ""},
{
"DT_RowId": "row_2",
"FUND_MANAGER": "Transtrend (Innocap Track)",
"NO_MULTI_MGR_OR_PORT_ALPHA": "",
"PERCENT_SUBINVESTMENT_GRADE": "",
"BENCHMARK_DRIVEN": "",
"MINIMU_SIZE": "",
"UCITS_III": "",
"TOTAL_ASSETS_FUND": "",
"SCORE": "",
"COMMENT": ""}
],
"options": [],
"files": []
}

On inline editing a cell value and then clicking out, the AJAX request is sent and the server returns the expected JSON but the rows are not being updated. Instead, I get an error message: ‘A system error has occurred (More information)’ under the field taking me to: https://datatables.net/manual/tech-notes/12.

JSON returned:
Have tried returning the above JSON (using the same URL for param ajax: under editor), as well as the following:

{
   "data":    [
        {
            "DT_RowId": "row_3",
            "FUND_MANAGER": "Graham K4-D15 (Innocap Track)",
            "NO_MULTI_MGR_OR_PORT_ALPHA": "ABC",
            "PERCENT_SUBINVESTMENT_GRADE": "DEF",
            "BENCHMARK_DRIVEN": "GEF",
            "MINIMU_SIZE": "",
            "UCITS_III": "",
            "TOTAL_ASSETS_FUND": "",
            "SCORE": "",
            "COMMENT": ""
        }
    ]
}

• I have extracted the HTML and javascript from our page and can be viewed here: https://jsfiddle.net/zsaeed/39brvysm/4/#
• This being an internal application is not accessible outside the site.
• The response headers shown by the browser are correct too:
  Content-type: application/json
• A thought, could it be a version issue with Jquery?

Kind regards

tangerine

Have you followed the diagnostic steps advised at https://datatables.net/manual/tech-notes/12 ?
If so, with what result?

Benjamin Legrand

Yes I have. These were the first checks I made.

allan

A thought, could it be a version issue with Jquery?

What version of jQuery are you using? And also what version of Editor? 1.6.0 had problems with jQuery older than 1.12, but that was resolved in 1.6.1.

Allan

Benjamin Legrand

I am using jquery 1.7.1 with Editor 1.6.10
Thanks

allan

jQuery 1.7.1 should be okay with Editor 1.6.1.

Could you give me a link to the page so I can debug it please?

Allan

Benjamin Legrand

Hi Allan,

Thank you for your reply earlier. The links to simpler version of our page are below (Both versions of Jquery have the same issues)

http://www.bfinance.co.uk/bug2/index.jquery.1.7.1.html
http://www.bfinance.co.uk/bug2/index.jquery-1.12.4.html

The page loads all the JSON correctly, but
1- When a field is edited, AJAX request is sent to the server but the row doesn’t get updated (Even though JSON for the whole row is responded back). For this example, we respond with the same static JSON every time.
2- When updating a complex field, like ckeditor or datepicker (column no 8 and 9 ), no AJAX request is sent to the server at all.
3- When scrolling to the bottom of the page, the 2 left fixed columns are out of vertical-sync with the rest of the columns.
4- When clicking on ckeditor or any other large field, the 2 left fixed columns stay the same but the rest of the row expands vertically, again setting out of vertical-sync with the rest of the columns.

Kind regards

allan

Thanks for the links! The page shows that you are currently using Editor 1.6.0 ($.fn.dataTable.Editor.version). There was a bug in 1.6.0 that would cause the error you are seeing. Could you update to 1.6.1 please?

3- When scrolling to the bottom of the page, the 2 left fixed columns are out of vertical-sync with the rest of the columns.

Could you update DataTables to 1.10.13 please? I'm not sure that will resolve the issue, but it would be worth checking as a first step.

4- When clicking on ckeditor or any other large field, the 2 left fixed columns stay the same but the rest of the row expands vertically, again setting out of vertical-sync with the rest of the columns.

This is a major disadvantage of inline editing with complex fields and is the reason why Editor has its bubble() method available. You would need to call the fixedColumns().update() method after inline editing has been activated to keep the row heights in sync.

Thanks,
Allan

Benjamin Legrand

Hi Allan,

Thank you for your help.

The scripts have been updated. The status is as follows:
1- When a field is edited, AJAX request is sent to the server but the row doesn’t get updated (Even though JSON for the whole row is responded back). For this example, we respond with the same static JSON every time.
–This issue is gone now and WORKS well with the version update. Cheers

2- When updating a complex field, like ckeditor or datepicker (column no 8 and 9 ), no AJAX request is sent to the server at all.
-WORKS when using bubble(this). But quick keyboard-only editing is a requirement so might will have to work with inline.
-When using inline(), no AJAX request gets sent at all no ckeditor or date fields.

3- When scrolling to the bottom of the page, the 2 left fixed columns are out of vertical-sync with the rest of the columns.
-When I change the height for:
<div class="DTFC_LeftBodyLiner" style="position: relative; top: 0px; left: 0px; overflow-y: scroll; width: 210px; height: 281px;">
To: “height:0px”, the vertical scroll is fine

4- When clicking on ckeditor or any other large field, the 2 left fixed columns stay the same but the rest of the row expands vertically, again setting out of vertical-sync with the rest of the columns.
**-Since we wanted to use inline instead of bubble (quick keyboard entry), I’ve used **

table.fixedColumns().update();
$(this).resize();

on line 194, 195 but it doesn’t do the trick.

The above tests are with Jquery 1.7.1.
All 4 issues still there on JQuery 1.12.14. (TypeError: selector is undefined -- jquery-1.12.4.js (line 1888, col 5) )

Code updated on:
http://www.bfinance.co.uk/bug2/index.jquery.1.7.1.html
http://www.bfinance.co.uk/bug2/index.jquery-1.12.4.html

allan

2) Could you try using the nightly version of KeyTable please.

3) Thanks - I'll take a look into that for the next release.

4) That is basically the code I was going to suggest. To be honest I'd strongly suggest against using something as complex as ckeditor inline since it will always seriously disrupt the table flow. I suspect that the issue will be related to when that code is executed. If you run it on the console when you can see the misalignment, it might resolve the issue.

Allan

Benjamin Legrand

Hi Allan,

Thank you for your feedback and help.

The script is now using nightly versions of KeyTables and everthing else but the issue persists.

2) None of the Javascript based fields, tinymce, ckeditor, date o datetime are submitting any request to AJAX in inline mode.

Code updated at:
http://www.bfinance.co.uk/bug3/index.jquery.1.7.1.html

Kind regards

allan

Hi,

Sorry for the delay in replying!

Could you remove this please:

                $("#example").on( 'click', 'tbody td.editable', function (e) {
                    editor.inline( this );
                    //table.fixedColumns().update();
                    //$(this).resize();
                });

Both KeyTable and that event are doing something on the click at the moment, which is causing overlapping issues.

Thanks,
Allan

Benjamin Legrand

Hi Allan,

The code has been removed and updated on the server as requested.

The good: The JS fields have started posting the contents.

The bad: Since the code was removed, no field appears when a cell is selected. Input fields show only on keyboard key press.
and when it comes to the datetime field,
1- click any datetime cell
2- press any key on keyboard for the datetime popup to open
3- select datetime and click out to post.
4- JS sends the keyboard entered value from step-2 above, instead of the selected datetime value.

Kind regards,
Zach

allan

no field appears when a cell is selected. Input fields show only on keyboard key press.

That's correct. That's what happens in my demo as well.

Let me get back to you on this one - there is a way of doing it, but I can't remember the exact code off the top of my head. I'll experiment a little and let you know what I fine.

Allan