Post row datas from DataTable to an Ajax Form

Question

I have a set of JSON data that are displayed using datatables. In one of the columns, I add a button and a text box only if the value in that column and another column meets a certain condition. this is the bit of code I used to do this:

    $(document).ready(function (){
        var alertTable = $('#alert-table').DataTable({
            "jQueryUI": true,
            "order": [ 3, 'desc' ],
            "columns": [
                { "data": "source", "visible": false },
                { "data": "host" },
                { "data": "priority" },
                { "data": "ack", "render": function( data, type, row ) {
                    if (row.ack == "0" && row.priority > "2") {
                        return '<form><input class="ackname" type="text" value="Enter your name"><input class="ackbutton" type="button" value="Ack Alert" onclick="<get all items for that row and POST to a URL>"></form>';
                        }
                        return data;
                    }
                },
            ],
            "language": {
                "emptyTable": "No Alerts Available in Table"
            }
        });
    });

This works fine by adding a button and text in the cell. What I am looking to achieve is, when any of the button is been clicked, it should POST all the values for that row including what is typed in the text box to a URL which has another function that would extract those details and update the database and send back the refreshed data. I am new to datatables and jquery, any guide would be highly appreciated.

Answer 1

Have made some changes to the code, instead of form you can use div.

$(document).ready(function (){
    var alertTable = $('#alert-table').DataTable({
        "jQueryUI": true,
        "order": [ 3, 'desc' ],
        "columns": [
            { "data": "source", "visible": false },
            { "data": "host" },
            { "data": "priority" },
            { "data": "ack", "render": function( data, type, row ) {
                if (row.ack == "0" && row.priority > "2") {
                    return '<div><input class="ackname" type="text" value="Enter your name"><input class="ackbutton" type="button" value="Ack Alert"></div>';
                    }
                    return data;
                }
            },
        ],
        "language": {
            "emptyTable": "No Alerts Available in Table"
        }
    });
    $(document).on("click",".ackbutton",function() {
        var currentIndex = $(this).parent().parent().index();
        var rowData = alertTable.row( index ).data();

        //extract the textbox value
        var TextboxValue = $(this).siblings(".ackname").val();
        var objToSave = {}; //Create the object as per the requirement
        //Add the textbox value also to same object and send to server
        objToSave["TextValue"] = TextboxValue;
        $.ajax({
              url: "url to another page"
              data: JSON.stringify({dataForSave : objToSave}),
              type: "POST",dataType: "json",
              contentType: "application/json; charset=utf-8",                 
              success: function(datas) {
                  //Your success Code
              },
              error: function(error) {
                  alert(error.responseText);
              }
          });
    });
});

Since both the pages are in same project, you can also do it using single ajax, passing all the values to server at once and then calling the other page internally from server and passing in the values using query string.

This is not a running code, rather to give you a basic idea on how to proceed.

Hope this helps :)