Answers

• kthorngren Posts: 21,327Questions: 26Answers: 4,949

  February 2023

  The 400 bad request error is being returned by the server. You will need to look at the server logs to find out why its returning this error. There is no way to tell by looking at the client side code.

  Kevin
• kthorngren Posts: 21,327Questions: 26Answers: 4,949

  February 2023

  Looking closer at your config you are using jQuery ajax() to fetch the data. Datatables is not sending an ajax request or any other redirection.

  Kevin
• dsand Posts: 18Questions: 5Answers: 1

  February 2023

  Sorry, here's my latest code. It calls a post handler and then I redirect it to another page in that handler.

  <script>
  
          $(document).ready(function () {
  
           $.ajax({
           serverSide: false,
           url: '?handler=Json',
           type: "POST",
           dataType: "json",
           success: OnSuccess,
           beforeSend: function (xhr) {
           console.log('before send')
           xhr.setRequestHeader("XSRF-TOKEN",  $('input:hidden[name="__RequestVerificationToken"]').val());
  
            //   $('#loadModal').show();
                 $('#modal').show();
                  },
                  complete: function () {
                  console.log('complete send')
                 // $('#loadModal').hide();
                  $('#modal').hide();
                  }
                  });
                  });
  
                   function OnSuccess(response) {
                    console.log(response.data)
  
                   ('#myTable').DataTable(
                   {
                      "dom": '<"top"Blf>rt<"bottom"rip><"clear">',
                       buttons: [
                      'excel', 'pdf', 'print', 'colvis'
                       ],
                       deferRender: true,
                       autoWidth:false,
                       scrollY: "500",
                       scrollX: true,
                       pageLength: 50,
                       data: response.data,
                       /*  order: [[1, 'desc']],*/
                       columns: [{
                       className: 'details-control',
                       orderable: false,
                       data: null,
                       defaultContent: ''
                       },
                       {
                         "data": "Id",
                          "title": "Number",
                          "render": function (data, type, row, meta) {
                           if (type === 'display') {
                           data = '<form name="testForm" action="?handler=Details" method="post"> <input name="id" hidden value="' + data + '" /><button type="submit" class="btn btn-link">' + data  + '</button> </form>';
                           }
                          return data;
                          }
                          },
                           { "data": "name" },
                            { "data": "desc" },
                            { "data": "address" },
                            { "data": "Type" },
                            ],
  
                           initComplete: function (settings, json) {
                            $('#dt_container').show();
                            var btns = $('.dt-button');
                            btns.addClass('btn btn-success btn-sm');
                            btns.removeClass('dt-button');
                            $('#srchDiv').show();
                            $('#srchAcc').show();
                            $("form[name='testForm']").each(function (index) {
                            $("form[name='testForm']")[index].innerHTML = $("form[name='testForm']")[index].innerHTML + document.getElementById("AntiForgeryToken").innerHTML;
                            })
  
                            $('#myTable').DataTable().columns.adjust();
                            $('#myTable').DataTable().fixedHeader.adjust();
                            },
                         });
  
                       $('#myTable tbody').on('click', 'td.details-control', function () {
                         var table = $('#myTable').DataTable();
                         var tr = $(this).closest('tr');
                         var row = table.row(tr);
  
                        if (row.child.isShown()) {
                         row.child.hide();
                         tr.removeClass('shown');
                       }
                       else {
                       row.child(format(row.data())).show();
                       tr.addClass('shown');
                       }
                     });
  
                     };
  
               function format(rowData) {
  
              return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
              '<tr>' +
              '<td>Date:</td>' +
              '<td>' + rowData.Date + '</td>' +
               '</tr>' +
              '<tr>' +
             '<td>Type:</td>' +
              '<td>' + rowData.type + '</td>' +
              '</tr>' +
              '<tr>' +
              '<td>DateEnd:</td>' +
             '<td>'+ rowData.DateEnd + '</td>' +
             '</tr>' +
             '</table>';
             return div;
             }
  
             $(document).ready(function () {
               $('#sidebarCollapse').on('click', function () {
               $('#sidebar').toggleClass('active');
               });
               });
              </script>
             }
  
• colin Posts: 15,240Questions: 1Answers: 2,599

  February 2023

  I see there's a solution on SO, so glad all sorted,

  Colin
• dsand Posts: 18Questions: 5Answers: 1

  February 2023

  HI Colin, It still does not work.
• kthorngren Posts: 21,327Questions: 26Answers: 4,949

  February 2023

  Did you look at the server logs to see why its returning the 400 error? Let us know what you find.

  Kevin
• dsand Posts: 18Questions: 5Answers: 1

  February 2023

  This is what I found in the server logs
  400 0 0 150
• dsand Posts: 18Questions: 5Answers: 1

  February 2023

  It does not say anything else. Could it be because I am not using the XSRF token properly?
• kthorngren Posts: 21,327Questions: 26Answers: 4,949

  February 2023

  Hmm. Maybe you need to enable more detailed logging for the web server you are using. The error can happen for any number of reasons. Here are some ideas:
  https://kinsta.com/knowledgebase/400-bad-request/

  Kevin
• dsand Posts: 18Questions: 5Answers: 1

  February 2023 Answer ✓

  I figured it out. It was not including the antiforgery token when it sorts. So, I had to take it out of the init complete and put it in the draw event function

    $('#myTable').on('draw.dt', function () {
              $("form[name='testForm']").each(function (index) {
                  $("form[name='testForm']")[index].innerHTML = $("form[name='testForm']")[index].innerHTML + document.getElementById("AntiForgeryToken").innerHTML;
              })
          });