在删除Jtable（Jquery）中的动作时将csrf令牌设置为post参数

Question

Hi i'm trying to add csrf token in post while deleting record in jtable its not working but listAction & updateAction is working fine.

My Code snippets :-

$(document).ready(function () {
    $('#main-content').jtable({
        title: ' Data',
        selecting: true, //Enable selecting
        multiselect: true, //Allow multiple selecting
        selectingCheckboxes: true, //Show checkboxes on first column
        paging: true, //Enable paging
        pageSize: 10, //Set page size (default: 10)           
        actions: {
            listAction:"${pageContext.request.contextPath}/mycontroller/all"  ,
           // createAction:"${pageContext.request.contextPath}/mycontroller/create",
            updateAction:"${pageContext.request.contextPath}/mycontroller/edit",
            deleteAction:"${pageContext.request.contextPath}/mycontroller/delete"
        },
        fields: {
            code: {
                title:'Code',
                width: '25%',
                 key: true,

                edit:true,
                input: function (data) {
                    if (data.value) {
                        return '<input type="text" readonly class="jtable-input-readonly" name="code" value="' + data.value + '"/>';
                    }
                },

              },
            name: {
                title: 'Name',
                width: '25%',
                create:true,
                edit:true
            },
            craetedTs: {
                title: 'Created',
                width: '25%',
                edit:false
            },


            modifiedTs: {
                title: 'mdate',
                width: '25%',
                edit:true,
                input: function (data) {
                     if (data.value) {
                         mdate='';

                         var date = new Date();
                         var options = {
                             year: "numeric", month: "2-digit",
                             day: "2-digit", hour: "2-digit", minute: "2-digit" ,second:"2-digit"
                         };
                        today=date.toLocaleTimeString("en-us", options);
                        today=today.replace(',', '');
                      return '<input type="text" readonly class="jtable-input-readonly" name="modifiedTs" value="' + today + '"/>';
                     }
                } 
            },
             _csrf: {
                  visibility: 'hidden',
                  edit:true,
                  input: function (data) {
                      return '<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />';

                   }
            }

        }

    });
     $('#main-content').jtable('load',{'${_csrf.parameterName}' : '${_csrf.token}'});

  //Delete selected 
    $('#DeactiveID').button().click(function () {
           var $selectedRows = $('#main-content').jtable('selectedRows');
           $('#main-content').jtable('deleteRows', $selectedRows);
       });

});

Even i tried for deleting code bellow:-

deleteAction: function (postData) {
    return $.Deferred(function ($dfd) {
        $.ajax({
            url: '/Demo/DeleteStudent',
            type: 'POST',
            dataType: 'json',
            data: '${_csrf.parameterName}' + "=" +'${_csrf.token}' ,
            success: function (data) {
                $dfd.resolve(data);
            },
            error: function () {
                $dfd.reject();
            }
        });
    });
}

But when i checked delete action url the entire method was reflecting

Answer 1

Add meta elements to the page you are invoking the ajax method from

<meta name="_csrf" content="${_csrf.token}"/>
<meta name="_csrf_header" content="${_csrf.headerName}"/>

And make this change to your deleteAction

deleteAction: function (postData) {
    return $.Deferred(function ($dfd) {

var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
        $.ajax({
            url: '/Demo/DeleteStudent',
            type: 'POST',
            dataType: 'json',
            beforeSend: function (request)
                {
                    request.setRequestHeader(header, token);
                },
            success: function (data) {
                $dfd.resolve(data);
            },
            error: function () {
                $dfd.reject();
            }
        });
    });
}

Answer 2

If somebody is still wondering, Lalit got me going in the right direction, but my final solution is this:

deleteAction: function (postData) {
    return $.Deferred(function ($dfd) {

        postData.csrf_token = csrf_token;

        $.ajax({
            url: 'prizes/delete',
            type: 'POST',
            dataType: 'json',
            data: postData,
            beforeSend: function (request)
            {
                request.setRequestHeader("csrf_token", csrf_token);
            },
            success: function (data) {
                $dfd.resolve(data);
            },
            error: function () {
                $dfd.reject();
            }
        });
    });
}

This solves the issue with passing csrf, or any additional data, for that matter, in jTable AJAX delete call. As for the other cases. Putting this right after you include the jTable js foxes the initial load:

$.extend(true, $.hik.jtable.prototype.options, {
    ajaxSettings: {
        data: {csrf_token: csrf_token},
    }
});

And then there is this hidden field to add to the field list:

csrf_token: {
  visibility: 'hidden',
  edit:true,
  input: function (data) {
      return "<input type='hidden' name='csrf_token' value='" + csrf_token + "'/>";
      }
}

Here is my code as a full example:

 <!-- Include jTable script file. -->
 <script src="{{site.uri.public}}/jtable/jquery.jtable.js" type="text/javascript"></script>

 <script type="text/javascript">

    var csrf_token = $('meta[name=csrf_token]').attr("content");

    $.extend(true, $.hik.jtable.prototype.options, {
        ajaxSettings: {
            data: {csrf_token: csrf_token},
        }
    });
 </script>

 <script type="text/javascript">
    $(document).ready(function () {

        var csrf_token = $('meta[name=csrf_token]').attr("content");

        $("#PrizesTableContainer").jtable({
            title: 'Prizes',
            actions: {
                listAction: 'prizes/get',
                createAction: 'prizes/create',
                updateAction: 'prizes/update',
                deleteAction: function (postData) {
                    return $.Deferred(function ($dfd) {

                        postData.csrf_token = csrf_token;

                        $.ajax({
                            url: 'prizes/delete',
                            type: 'POST',
                            dataType: 'json',
                            data: postData,
                            beforeSend: function (request)
                            {
                                request.setRequestHeader("csrf_token", csrf_token);
                            },
                            success: function (data) {
                                $dfd.resolve(data);
                            },
                            error: function () {
                                $dfd.reject();
                            }
                        });
                    });
                }
            },
            fields: {
                id: {
                    key: true,
                    list: false
                },
                machine_name: {
                    title: 'Machine name',
                    width: '10%'
                },
                reel1: {
                    title: 'Reel1',
                    width: '15%'
                },
                reel2: {
                    title: 'Reel2',
                    width: '15%'
                },
                reel3: {
                    title: 'Reel3',
                    width: '15%'
                },
                payout_credits: {
                    title: 'Payout credits',
                    width: '15%'
                },
                payout_winnings: {
                    title: 'Payout winnings',
                    width: '15%'
                },
                probability: {
                    title: 'Probability',
                    width: '15%'
                },
                csrf_token: {
                  visibility: 'hidden',
                  edit:true,
                  input: function (data) {
                      return "<input type='hidden' name='csrf_token' value='" + csrf_token + "'/>";
                      }
                }
            }
        });

        $("#PrizesTableContainer").jtable('load');
    });

</script>