Undefined values using jQuery DataTable

Question

I'm Using jQuery DataTable to expose data in table form; on the table, I have a button that opens a Bootstrap Modal to modify two of these value and I use Ajax to send modified values to a Spring Controller.

This was the first columns definition in the data table:

"columnDefs": [
                        {
                           "targets": [ 0 ],
                           "visible": false
                           //"searchable": false
                        }],

                "columns":  [
                    { "data": "id" },
                    { "data": "date" },
                    { "data": "type" },
                    { "data": "name" },
                    { "data": "user_name" },
                    { "data": "status" },
                    { "data": "closing_date" },
                    { "data": "info" },
                    { "data": "note" },
                    { "render": function ( data, type, full, meta ) {


                        return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-id=\'" + data.id + "\' data-target='#myModal'> Edit </button>";

                    }

Cause I got, after loading the app, the console error:

"data is not defined"

I asked here on Stack and it was suggested to me to change the render function in:

{ "render": function ( data, type, full, meta ) {


                        return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-id=\'" + full[0] + "\' data-target='#myModal'> Edit </button>";

                    }

Now I have not the data error but when I try to use the button and modify the data, I get this output:

Object { newnote: "aaa", newstatus: "closed", idevent: undefined } <button type="submit" class="btn btn-success" data-dismiss="modal">

(please note that note and status are the variable that can be modified). Seeing in eclipse, I can note that the console error tells me, summing, that the id field is not passed to the controller.

Indeed, in the ajax function that I use to send data, that is:

$('#myModal').on('click', '.btn.btn-success', function(event) {
        var form = $('#updateeventsform');
        var formdata = form.serializeObject();
        formdata.idevent = $(this).data('id');
        console.log(formdata, this);
        event.preventDefault();

        $.ajax({
                url: "../updateevents.json",
                type: "post",
                data: formdata,
                success : function() {

                    console.log("Invio riuscito.");
                }

            });

        });

if I try to change formdata.idevent = $(this).data('id'); with some numeric value, for example: formdata.idevent = 1; I can send perfectly the data to controller and they are changed with no problems.

So, the issue is that the render function cannot take the id properly and this causes the ajax function not be able to take it and pass the controller; I have decided so to examine this function and I got two results that I cannot understand.

The code that I put here is in a file named eventsdetailsdatatable.js ; but, if I pass the mouse on the full[0] code, I got this message: Origin:

src/main/webapp/static/js/custom/firewalldatatable.js

This file is another data table definition, used for Firewall section. Why is this happening? Can depend on the structure of the app and how data are located in their folders?

The other strange things is that if I use, instead of full[0] , the previous form, data.id , passing the mouse on it I can read:

Returns:
service.$locale
Origin:
angular
Guess?:
true
See:
http://docs.angularjs.org/api/ng.$locale

but...I'm not using Angular; again, why is this happening?

Summing, I have a render function that does not set the data-id value properly, does not recognize the use of data or full and tell me that these values have an origin that they may have not.

Any idea?

Answer 1

You have to define data as null (I believe you not want the button to be placed in the note column) :

...
{ "data": "note" },
{ "data": null,
  "render": function ( data, type, full, meta ) {
    return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-id=\'" + full.id + "\' data-target='#myModal'> Edit </button>";
  }
}

and address full instead of data , ie data-id=\\'" + full.id + "\\'

---

$(this).data('id'); is wrong. It is jQuerys own invention of storing variables on an element. Unless you have added data-id with data() specifically you cannot retrieve it with data() . Use $(this).attr('data-id') instead.

Answer 2

Solved by myself. Speaking with a colleague, we suppose that, cause the modal has his activation button code on a file as string and the rest of code into another, this may take some problems. We don't know if thies hypotesis is correct, but starting from this assumption we formulate this solution:

1. we put a global variable id_event at the start of code;

2. in the render function, set this variable with the data.id value, without using the data-id field in the modal button, by onclick in the button:

   { "data": null, "render": function ( data, type, full, meta ) {

     return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-target='#myModal' onclick=\\'id_event="+data.id+"\\'> Edit </button>"; } 

3. In the ajax function for sending data to Controller, set with IDnumber the formdata.idevent field:

   formdata.idevent = id_event; //add the event id to form data, after setting it with the IDnumber variabile

This made our code perfectly working.