Editor.remove sends empty ajax request

Rudi_Schloesser

Hi Allan,
I'm facing a strange problem:
In the table I have two buttons, one for editing, the other for deleting the entry.
$('#tbl').on('click', ...) is triggered for both and edit works perfectly fine. But...
Sometimes also editor.remove works as expected, but most of the time it's sending an empty POST request to the server.
In onPreSubmit in can see, that the JSON is ok, but nothing is send.
I'm using the same mechanism in several tables it working. Only in one specific table the problem occurs.

Best regards
Rudi

allan

Hi Rudi,

Can you give me a link to a page showing the issue so I can help to debug it?

Allan

Rudi_Schloesser

Further information:
Even if I try to send the ajax request from preSubmit directly, the response contains no data. So it looks like a problem with jQuery and ajax.

allan

jQuery is fairly thoroughly tested - I would be surprised if there was an Ajax bug in it. If you can give me a link to a page showing the issue I can take a look.

Allan

Rudi_Schloesser

Hi Allan,
thanks for your fast response. It's a little difficult to provide you a direct access, because it's running on an embedded system which doesn't have a connection to the internet.

But here the data (opts) directly before calling ajax(opts) in _ajax shown in the Firefox debugger once for the failing and the other for a working request:

Most often failing request (empty POST):
(opts : {…}
data : {…}
action : "remove"
data : […]
1 : {…}
etr : 0
id : 1
name : "Test"
scr : 0
src : "Test/Output"
src_id : 3
srv : 0
std : 257
ts_id : 0
proto : {…}
proto : {…}
proto : {…}
dataType : "json"
factory/Editor.prototype._submit/<()
factory/Editor.prototype._submit/<()
type : "POST"
url : "/config/mpeg/monitors"
proto : {…}
)

Working one:
opts : {…}
data : {…}
action : "remove"
data : […]
4 : {…}
chn : 5
id : 4
mpeg_rs : 0
name : "Test1"
rate : 0
stream : ""
stream_id : 0
tei : 1
type : "dvb-asi"
use : 0
proto : {…}
proto : {…}
proto : {…}
dataType : "json"
factory/Editor.prototype._submit/<()
factory/Editor.prototype._submit/<()
type : "POST"
url : "/config/mpeg/sources/dvbasi"
proto : {…}

allan

Perhaps you can show me your Editor code?

Allan

Rudi_Schloesser

Of course:

(```)

$(document).ready(function() {
    function editDeleteButtons() {
        return "<a href=\"\" class=\"editor_edit\"><button class=\"btn btn-default\">Edit</button></a> " +
            "<a href=\"\" class=\"editor_remove\"><button class=\"btn btn-default\">Delete</button></a>";
    }

    monEditor = new $.fn.dataTable.Editor({
        ajax: "/config/mpeg/monitors",
        table: "#mon",
        idSrc: "id",
        fields: [
            { name: "id", type: "hidden", def: 0 },
            { label: "Name", name: "name", required: true },
            { label: "MPEG-TS", name: "src_id", type: "select" },
            { label: "Standard", name: "std", type: "select", options: mpegStandardOptions, def: 0 },
            { label: "TS-ID", name: "ts_id", def: 0 },
            { label: "Scrambling", name: "scr", type: "select", options: scramblingModeOptions, def: 0 },
            { label: "Min. # of Services", name: "srv", def: 0 },
            { label: "ETR 290 Monitoring", name: "etr", type: "select", options: etrPriorityOptions, def: 0 }
        ],
    });

    // New record
    $("#editor_create").on("click", function (e) {
        e.preventDefault();
        monEditor.field("src_id").update(loadSources());
        monEditor.field("name").enable();
        monEditor.create({
            title: "Create new MPEG-TS Monitor",
            buttons: "Add"
        });
    });

    // Edit a record
    $("#mon").on("click", "a.editor_edit", function (e) {
        e.preventDefault();
        monEditor.field("src_id").update(loadSources());
        monEditor.field("name").disable();
        monEditor.edit($(this).closest("tr"), {
            title: "Edit MPEG-TS Monitor",
            buttons: "Update"
        });
    });

    // Delete a record
    $("#mon").on("click", "a.editor_remove", function (e) {
        var row;

        e.preventDefault();
        row = $(this).closest("tr");
        monEditor.remove( row, {
            title: "Delete MPEG-TS Monitor",
            message: "Are you sure you wish to delete this monitor ?",
            buttons: "Delete"
        });
    });

    $("#mon").on("click", "a.monitor_show", function(e) {
        e.preventDefault();
        window.open("/config/mpeg/monitor-screen?id=" + this.id, "", 
                    "titlebar=1,location=1,menubar=0,toolbar=0,status=0,resizable=1");
    });

    $("#mon").dataTable({
        dom: "Bfrtip",
        ajax: {
            url: "/config/mpeg/monitors",
            data: null,
            dataSrc: ""
        },
        order: [[1,"asc"]],
        deferRender: true,
        searching: false,
        info: false,
        lengthChange: false,
        paging: false,
        stateSave: true,
        select: true,
        columns: [
            {name: "id", data: "id", visible: false },
            {name: "name", data: "name" },
            {name: "src", data: "src" },
            {name: "src_id", data: "src_id", visible: false },
            {name: "std", data: "std", render: mpegStandard},
            {name: "ts_id", data: "ts_id"},
            {name: "scr", data: "scr", render: scramblingMode},
            {name: "srv", data: "srv"},
            {name: "etr", data: "etr", render: etrPriority},
            {data: null, orderable: false, render: function(val, type, row) {
               return '<a href="" class="monitor_show" id="' + row.id + '"><button class="btn btn-default btn-outline show"><i class="fa fa-desktop"></i></button></a>';
            {data: null, width: "110px", orderable: false, render: editDeleteButtons }
        ]
    })
});

(```)

allan

This is the one causing the issue I presume?

$("#mon").on("click", "a.editor_remove", function (e) {

So you click on that and then click on the confirm button to delete the row, and sometimes it sends an empty request? I really would need to see a test case to be able to debug that I'm afraid.

Does $(this).closest("tr"); always resolve to be a DataTables row? You don't have any inner tables or anything?

Allan

Rudi_Schloesser

Hi Allan,
yes, your assumptions are 100% correct. I'm always getting the correct row (no inner tables etc.), getting down to the ajax request with (to my opinion valid data) and getting a empty POST as a result of this.
I could give you access to a unit via TeamViewer, NoMachine, or RemoteDesktop, everything else would become a nightmare and take ages just because of our IT department.
The strange thing is, that the same mechanism work for all other tables and editors perfectly, just facing the problem with this particular table.

allan

If you could PM me the details (click my name above and then the "Send message" button, that would be great.

Thanks,
Allan