Question

I have a Datatable created, and I’m using jeditable plugin to edit cells to push back data. I can edit the cells but when I hit enter and it sends back to my URL Rest endpoint (which I just have a System.out.println to see the data) I get this error from firebug

“NetworkError: 415 Unsupported Media Type – my rest endpoint url“

My endpoint is expecting an Object in JSON, jeditable is only sending some string parameters. So I need to wrap it up.
Let me post my datatable initialization along with jeditable init.

var computerTable = $("#table_computerTable ").dataTable({
           "bProcessing": true,
           "bServerSide": true,
           "bInfo":false,
           "bAutoWidth":false,
           "bScrollInfinite":true,
           "sAjaxSource": ApiUrl(),
           "aoColumns":[       // Maps <th> elements in html to JSON data
               {"mData": "id"},
               {"mData": "description","sClass" : "read_only"},
               {"mData": "serial"},
               {"mData": "daily"}
             ],
           "aoColumnDefs":[
               {"sName":"id","bVisible":false, "aTargets": [0]},
               {"sWidth": "55%","aTargets": [1]},
               {"sName":"serial","bVisible":false, "aTargets": [2]},
               {"sName":"daily","aTargets":[3]}
             ],
            "fnServerData": function ( sSource, aoData, fnCallback ) {
                   $.getJSON( sSource, aoData, function (json) { 
                       map = {};
                       map["aaData"] = json;
                       fnCallback(map);
                   });
            },
            "fnRowCallback": function(nRow, aData, iDisplayIndex ){
                $(nRow).attr("id",aData["id"]); // Change row ID attribute to match database row id
                return nRow;
            }
        }).makeEditable({
            sUpdateURL: getApiUrl() + "cpu/save",
            sReadOnlyCellClass: "read_only",
            ajaxoptions:{
                dataType: "json",
                type: 'POST'
            }
        });

This is the data I get back when I send the POST (read from firebug)

columnId    3
columnName  daily
columnPosition  2
id  24
rowId   0
value   50

What I would like to do is initialize an object and send back all the data I want in that. The ID / Serial / Hourly(the new value)

I don’t know enough jquery, javascript to know where to begin with that modification.

Any suggestions?

Answer 1

Edit your makeEditable like this:

makeEditable(
{
  sUpdateURL: function(value, settings)
  {
    var sentObject = {}
    var rowId = oTable.fnGetPosition(this)[0];
    var columnPosition = oTable.fnGetPosition(this)[1];
    var columnId = oTable.fnGetPosition(this)[2];
    var sColumnTitle = oTable.fnSettings().aoColumns[columnId].sTitle; 
    sentObject["rowid"]= rowId
    sentObject["columnpos"]= columnPosition
    sentObject["columnId"]= columnId
    sentObject["sColumnName"]= sColumnTitle
    sentObject["valueOfCell"]=value
    sentObject["Serial"]="serialnumber"
    sentObject["Hourly"]="somevalue"
    $.ajax({
    type: "POST",
    url: "url",
    data: "sentObj="+JSON.stringify(sentObject)
    })
    return value;
  },
  sSuccessResponse: "IGNORE"
 }
);

It’s like an own customization of ajax request for updating a cell.