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

ajm27 · July 2018

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 · July 2018

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 · July 2018

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 · July 2018

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 · July 2018

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 · July 2018

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

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

ajm27 · July 2018

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 · July 2018

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 · July 2018

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 · July 2018

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

allan · July 2018

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

Allan

ajm27 · July 2018

@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 · July 2018

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 · July 2018

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 · July 2018

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 · July 2018

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 · July 2018

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

ajm27 · July 2018

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 · July 2018

"{"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 · July 2018

 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 · July 2018

This:

success(response);

Should be:

success(json);

That was an error in my code above, sorry.

Allan

ajm27 · July 2018

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 · July 2018

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 · July 2018

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 · July 2018

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 · July 2018

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 · July 2018

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 · July 2018

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 · July 2018

That can be shortened to be:

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

Allan

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

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

Answers

Howdy, Stranger!

Categories

DataTables

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

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

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables