Datatable Editor modal doesn't close after "Create" is pressed.

ajm27

I've been researching the issue and it sounded like I had to return the data of the changed rows in a JSON object, which I have done. Except I am getting a 404 when I submit the new row.

error: "Not Found"
message:
"/WEB-INF/jsp/{"data":"the row's json data"}.jsp"
path: "/newscanner"
status: 404
timestamp: "2018-07-25T19:24:44.170+0000"

It appears like it is looking for a jsp to navigate to.. but when I provide it with one of the jsp pages it returns a different error.
Any ideas on what I might be doing wrong?

Thank you!

allan

Sounds like Editor is attempting to submit to "/WEB-INF/jsp/{"data":"the row's json data"}.jsp" which isn't available on the server. Were you expecting it to be?

What is the URL you are expecting it to submit to?

Can you show me your Editor initialisation code please?

Allan

ajm27

Of course:

var editor = new $.fn.dataTable.Editor( {
            ajax: {
                create: function ( method, url, data, success, error ) {
                    data.data[0].status = "new";
                    $.ajax({
                        type: "POST",
                        url:  "/createobjectendpoint",
                        contentType: "application/json",
                        dataType: "json",
                        data: JSON.stringify(data.data[0]),
                        success: function(reponse){
                            console.log("success");
                            console.log(response);
                        },
                        error: function(response){
                            console.log("error");
                            console.log(response);
                        }
                    });
                }
            },
            table: "#myTable",
            idSrc: "id",
            fields: [ {
                    type: "readonly",
                    label: "ID:",
                    name: "id",
                    def: changeList[changeList.length - 1 ].id
                }, {
                    label: "Description:",
                    name: "description"
                }, {
                    label:     "Enabled:",
                    name:      "enabled",
                    type:      "checkbox",
                    separator: "|",
                    options:   [
                        { label: '', value: 1 }
                    ]
                }, {
                    label:     "Testing:",
                    name:      "testing",
                    type:      "checkbox",
                    separator: "|",
                    options:   [
                        { label: '', value: 1 }
                    ]
                }]
        });

It submits just fine to the database, but the response errors out with what I posted above and the modal for creation just hangs there. I have to refresh the page to reuse the modal to insert more objects.

*Apologies is this is my third comment, my other two didn't seem to come up in the form.

allan

Hi,

I've just altered your account so it will bypass spam filters, which is probably what happended to your other posts - sorry!

You are passing in the success function on line 3 for the anon Ajax function, but it still isn't being called anywhere, so Editor can't know that the submission is complete. You need to add something like success( response ); around line 12-13, where response is the JSON Editor expects in response.

Allan

ajm27

It appears as if the same thing is happening for the 'remove' button option as well. The call is made and is successful, but the modal refuses to close.

ajm27

success: function(reponse){
      console.log("success");
      success(response);
}

I added the success(response) and it still seems to hang.

ajm27

So adding the success(reponse) to the 'remove' button seems to work now, so thank you for that! But I do still have the issue of the data being used to look up a jsp page and getting an error.

ajm27

Ah-ha! So after I returned null from the endpoint on my backend, it just tried to find the endpoint's jsp page, which didn't exist. So I made one, just a blank jsp file, and that got rid of the error.. however, I still get an error that I just found out is a "Unexpected end of JSON input"
Full error:

"SyntaxError: Unexpected end of JSON input
    at parse (<anonymous>)
    at Ut (https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/b-1.5.2/sl-1.2.6/datatables.min.js:14:73768)
    at k (https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/b-1.5.2/sl-1.2.6/datatables.min.js:14:77335)
    at XMLHttpRequest.<anonymous> (https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/b-1.5.2/sl-1.2.6/datatables.min.js:14:79907)"

Not sure what to do with this... but hopefully I can figure it out. If anyone has any pointers, please let me know!

ajm27

Figured that out too. Datatables apparently do not like when you try to tell them that your dataType is json.. so I removed dataType: "json", from my ajax call and that resolved the issue.

Bindrid2

if you created a blank page for data tables to use, then no data is being returned and that will cause an error.

allan

You are now using success(response); - what is contained in response? Does it match what Editor expects?

Allan

ajm27

@Bindrid2 That isn't the case as, I had created the blank page that the editor was looking for and it works just fine now. I'm not expecting any data to be returned as I am making a POST call.

@allan response contains the json data of the row that was affected in the database. The row that was updated or inserted.

allan

Can you show me that JSON please? The data for the row should be contained in a data array, as the documentation I linked to shows.

Allan

ajm27

Here is what comes back as the response:

"{"action":"create","data":"{\"var1\":\"84\",\"var2\":\"010\",\"var3\":\"0000000010\",\"var4\":\"10\",\"var5\":\"1\",\"var6\":\"1\",\"var7\":\"\",\"var8\":\"1\",\"var9\":\"1\"}"}"

ajm27

But when I have the back-end return that data, the modal refuses to close. When I have the back-end return nothing it closes just fine.
However, when I try to do (#table).DataTable().ajax.reload() I get an error about unable to read the length of undefined.

allan

Yup - that's not what Editor would expect. Try this:

success: function(response){
      var json = JSON.parse( response );
      var d = json.data;
      json.data = [ d ];

      success(response);
}

I just spotted as well that there is a typo in response in your sample code above.

Allan

ajm27

That gave me an "Unexpected end of JSON input" error.

ajm27

I got it to give me a "Unexpected token o of Jason at position 1" I'm not sure which is better to work with...

kthorngren

"{"action":"create","data":"{\"var1\":\"84\"

With the quotes being escaped (`\") it leads me to believe your server script is encapsulating the data in JSON twice before returning it to the web browser.

"Unexpected token o of Jason at position 1"

That error reinforces the double encapsulation.
Kevin

ajm27

 edit: function ( method, url, data, success, error ) {
                    //data.data[0].status = "changed";
                    var rowId = Object.keys(data.data)[0];
                    console.log(data.data[rowId]);
                    $.ajax({
                        type: "POST",
                        url:  "/scanner",
                        contentType: "application/json",
                        data: JSON.stringify(data.data[rowId]),
                        success: function(response) {
                            console.log( response );
                            var json = JSON.parse( response );
                            var d = json.data;
                            json.data = [ d ];
                       
                            success(response);
                        },
                        error: function(){
                            error(response);
                        }
                    }).done(function(){
                        //$('#scannerTable').DataTable().ajax.reload();
                    });
                },

This is what I have currently and I am getting the Uncaught TypeError: Cannot read property 'length' of undefined when I go to submit the edit

allan

This:

success(response);

Should be:

success(json);

That was an error in my code above, sorry.

Allan

ajm27

Spot on help, @allan
I am having some other difficulties, but I understand what the issue with them is so I will try to resolve them myself first.
Thank you very much for your help!

ajm27

For the error: DataTables warning: table id=table - Requested unknown parameter 'variable' for row 85, column 0.
Does that refer to the table or the editor, or does it depend on other context?

kthorngren

It is referring to the data returned from the ajax request. The returned data structure doesn't match what Datatables is expecting. The error has a link to troubleshooting steps. Have you tried those?
https://datatables.net/manual/tech-notes/4

Kevin

ajm27

I figured it out, I needed to provide it with json.data. Just json had the action: 'create' property and that was causing an issue.
Currently, having issue with reloading the table after submission. I'm getting "Cannot set property 'data' of null" when I try to call table.ajax.reload() this one has had me stumped.

ajm27

Turns out I was missing the ajax field within my table definition, however I have an exterior $.ajax() call that creates the table in .done(). If I remove the $.ajax() call, the table doesn't get populated to start.

ajm27

Got to a point where I have no errors when I make my edit, but table.ajax.reload() does not seem to reload the page.. any pointers?

ajm27

It appears that I had to clear the table, add the new rows, then redraw the table.

mytable.clear().draw();
mytable.rows.add(NewlyCreatedData);
mytable.columns.adjust().draw();

allan

That can be shortened to be:

mytable
  .clear()
  .rows.add(NewlyCreatedData)
  .columns.adjust()
  .draw();

Allan