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.

If the url you are specifying is of same project then this can be done using 2 ajax request, 1 inside another. First, define the button click of the button using its class. then find the row items using $(this).parent().parent() which will give u row. THen using $.ajax you can post the records — D.T.
– D.T., Commented Sep 5, 2014 at 13:36
Yes the URL is of same project. By any chance, is there any datatable example that I can study as a guide? Also how would I capture the value in the textbox since its not part of the table — Chelseawillrecover
– Chelseawillrecover, Commented Sep 5, 2014 at 13:40
no dear, i dont have any link as such. But any ways in the click event you can get the data of all rows using oTable.fnGetData() or of specific index using oTable.row( index ).data(). then you can use the usual ajax call to save the data — D.T.
– D.T., Commented Sep 5, 2014 at 13:44

D.T. · Accepted Answer · 2014-09-05 14:25:29Z

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 :)

edited Sep 5, 2014 at 14:25

answered Sep 5, 2014 at 13:59

D.T.

3501 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Chelseawillrecover Over a year ago

this is a good approach. I will adapt it and see how it goes. thanks so much

D.T. Over a year ago

welcome dear :), but let me know which approach was a success once ur done or if you have followed any other approach

Chelseawillrecover Over a year ago

sure I will. BTW, what is the purpose of the 2nd ajax?

D.T. Over a year ago

Plz correct me if im wrong, you want to save data in a page and also redirect to another page (url) and save data using a separate function. Keeping this in mind, i wrote it as first ajax to save in the page where you are currently and the 2nd one for the other url. But it would be easy if you transfer all the data to server and redirect to other page if required.

Chelseawillrecover Over a year ago

What I am doing is just passing the row values to the URL. This URL will use the values and handle the update. When the update is done, it will respond back to my code to say OK, then I will then refresh the tables so the new updates appears. All its doing is changing DB value from 0 to 1 to confirm the alert had been acknowledged

|

Collectives™ on Stack Overflow

Post row datas from DataTable to an Ajax Form

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related