Quantcast
Channel: DataTables 1.10 — DataTables forums
Viewing all articles
Browse latest Browse all 2364

How to Display a server side error right underneath the row?

$
0
0

I have inline edit implemented on the Data Table. There is an Edit button on each row and when user clicks on it, the columns change into editable text boxes/drop downs. User enters the data and clicks on 'Update' (Edit button label changes to Update) and I make an ajax call and save the edited data.

If there is a server side error on the edit/update, I need to display the error message, right underneath the edited row in question. This is because I have 100's of rows on the datatable and if I add a row to the bottom/top of the table, then the user has to scroll all the way up/down to find his row and re-edit to fix the error and all that.

How can I add a blank row right underneath the edited row dynamically when the error happens? Obviously I don't need to add a blank row underneath each row "before" the error happens.

I tried this on "fnCreatedow". But it obviously append the div tag within the <tr></tr>. But I need a full <tr> with a colspan of 8 underneath the edited row, as the error messages could be really long in some cases.

If I have to add a new <tr> right underneath that row just to display my server side error message, which event should I use to append a tr or a div tags? fnCreatedRow seems to fire before the tr closes.

I want to add that row preferably on ajax:error but I don't know how to go about finding that row and so, I would somehow want a placeholder in place underneath each row, so that I can just get a handle of that element on my ajax:error and just do 'that element',text('error message');

Please ignore the console.log and commented lines from the below code.

    "initComplete": InitComplete,

                        "fnCreatedRow": function (row, data, dataIndex) { 
                        var br = document.createElement("br");
                        var div = document.createElement("div");
                        div.setAttribute("id", "error_" + data['ID']);
                         div.setAttribute("class", "text-danger");
                        console.log($(row).children("td").eq(9));
                        //$(row).children("td").eq(9).append(div);
                         $(row).append(br);
                         $(row).append(div);
                    }

Thanks


Viewing all articles
Browse latest Browse all 2364

Trending Articles