title: jQuery Data Table error 7: 404 on app loading
body: <p>I have a singular situation in my app.</p>
  
  <p>I added a new section on it and I must use, jQuery Data Table to show results. </p>
  
  <p>On app loading, i got an alert error about my table:</p>
  
  <blockquote>
    <p>DataTables warning: table id=scansdetailsdata - Ajax error. For more
    information about this error, please see <a href="http://datatables.net/tn/7" rel="nofollow noreferrer">http://datatables.net/tn/7</a></p>
  </blockquote>
  
  <p>So I have seen what Firefox console tell me and I got a 404 error on an URL:</p>
  
  <pre><code>http://localhost:8080/getscans.json
  </code></pre>
  
  <p>So, first of all, I checked the ajax parameters in my Data Table and the value of <code>@PostMapping</code> in my controller and they seem ok.</p>
  
  <p>The strange thing is that if I go on and use my app, querying for data that must be showed to that URl, the app works perfectly, without problem: I can show data, edit them and save changes in my DB without problems. This impressed me particularly because in my previous encounter with this situation, if I tried to use the app anyway, it does not works properly.</p>
  
  <p>Anyway, this is the "guilty" code.</p>
  
  <p>Table populated by Data Table:</p>
  
  <pre><code>&lt;script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css"&gt; 
  &lt;script type="text/javascript" class="init" src="../../static/js/custom/scansdetailsdatatable.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" class="init" src="../../static/js/custom/moment.js"&gt;&lt;/script&gt;
  
      &lt;div class="container" align="center"&gt;
              &lt;h1&gt;Scans Details List&lt;/h1&gt;
                  &lt;table class = "table table-bordered" id="scansdetailsdata"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Scan Items ID&lt;/th&gt;
                          &lt;th&gt;Edit&lt;/th&gt;
                          &lt;th&gt;Tag&lt;/th&gt;
                          &lt;th&gt;Date&lt;/th&gt;
                          &lt;th&gt;Status&lt;/th&gt;
                          &lt;th&gt;Closing Date&lt;/th&gt;
                          &lt;th&gt;Host&lt;/th&gt;
                          &lt;th&gt;Port&lt;/th&gt;
                          &lt;th&gt;Severity&lt;/th&gt;
                          &lt;th&gt;Plugin ID&lt;/th&gt;
                          &lt;th&gt;Info&lt;/th&gt;
                          &lt;th&gt;Notes&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
  
                   &lt;tbody&gt;&lt;/tbody&gt;      
  
                  &lt;/table&gt; 
       &lt;/div&gt;
  
       &lt;div id="myModalForScansSearch" class="modal fade" role="dialog"&gt;
                          &lt;div class="modal-dialog"&gt;
                          &lt;div class="modal-content"&gt;
                                &lt;div class="modal-header"&gt;
                                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                                  &lt;h4 class="modal-title"&gt;Editing Menu&lt;/h4&gt;
                                &lt;/div&gt;
                                &lt;div class="modal-body"&gt;
                                &lt;form id="updatescansearchform" class="form-horizontal"&gt;
                                &lt;div class="form-group"&gt;
                                  &lt;label  class="col-sm-2 control-label"
                                            for="inputNotes"&gt;Notes&lt;/label&gt;
                                  &lt;div class="col-sm-10"&gt;
                                      &lt;input type="text" class="form-control" 
                                      id="newscanitemsnote" name ="newscanitemsnote" placeholder="Put here the note"/&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                  &lt;label for = "type" class = "col-sm-2 control-label"&gt;Status&lt;/label&gt;
                               &lt;div class = "col-sm-10"&gt;
                              &lt;select class = "form-control" id = "newscanitemsstatus" name="newscanitemsstatus"&gt;
                              &lt;option value="open"&gt;open&lt;/option&gt;
                                  &lt;option value="closed"&gt;closed&lt;/option&gt;
                              &lt;/select&gt;
                           &lt;/div&gt;
                                &lt;/div&gt;
                               &lt;/form&gt;
                              &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="modal-footer"&gt;
                                &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;Close&lt;/button&gt;
                                &lt;button type="submit" class="btn btn-success" data-dismiss="modal"&gt;Save&lt;/button&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                            &lt;/div&gt;
  </code></pre>
  
  <p>Data Table code:</p>
  
  <pre><code>/**
   * This script define the use of jquery DataTable for scans response,
   * used to format faster and simpler the table showed in table.
   * 
   * @author cte0324
   */
  var DTscans = false;
  var id_scan_items = 0; //this variable is used to check the data column id and pass it to controller via ajax
  var closing_date; //this variable is used to set up the closing date of events after System Administrator action.
  
  $(document).ready(function() {  
  
      DTscans = $('#scansdetailsdata').DataTable( 
              { 
                  "serverSide": true,
                  "ajax":{
                              url: "../getscans.json",
                              type: "post",
                              "data": function (d)
                              {
  
                                   var param = {tag :  $('#tag').val(), scanstatus :  $('#scanstatus').val(), scanseverity :  $('#scanseverity').val(), scanhost: $('#scanhost').val(), 
                                                scanport: $('#scanport').val(), pluginid: $('#pluginid').val(), scaninfo : $('#scaninfo').val()};
  
  
                                   return $.extend(d, param);
                              }
  
                         },
  
                         "columnDefs": [
                          {
                             "targets": [ 0 ],
                             "visible": false
                          }],
  
                  "columns":  [
                      { "data": "id" },
                      { "data": null,
                        "render": function ( data, type, full, meta ) {
  
                            return "&lt;button type='button' class='btn btn-info btn-md' data-toggle='modal' data-target='#myModalForScansSearch' onclick=\'id_scan_items="+data.id+"\'&gt; Edit &lt;/button&gt;";
  
                        }
                      },
                      { "data": "scans_name" },
                      { "data": "scans_date",
                          "render": function(data){
                              return (moment(data).isValid()) ? moment(data).format("DD MMM YY") : "-";}
                      },
                      { "data": "status" },
                      { "data": "closing_date",
                          "render": function(data){
                              return (moment(data).isValid()) ? moment(data).format("DD MMM YY") : "-";}
                      },
                      { "data": "name" },
                      { "data": "port" },
                      { "data": "severity" },
                      { "data": "pluginID" },
                      { "data": "info" },
                      { "data": "note" }
                  ]
              } );
  
      //This function is used to send the form data to Spring controller; cause we use a modal, with code that must be put in the file with html table head,
      //we must replace the use of view made by jsp using an ajax function
      $('#myModalForScansSearch').on('click', '.btn.btn-success', function(event) {
          var form = $('#updatescansearchform'); //recover the form inside modal by using id
          var formdata = form.serializeObject(); //use the serializeObject function to prepare data for Json format
          closing_date = new Date().getTime(); //set up the closing date with the current date
          formdata.idscanitems = id_scan_items; //add the event id to form data, after setting it with the IDnumber variabile
          formdata.new_closing_date = closing_date; //add the closing date to form data
          console.log(formdata, this);
          event.preventDefault();
  
          //here starts the code to sending data to Spring controller
          $.ajax({
                  url: "../updatescannoteandstatus.json",
                  type: "post",
                  data: formdata,
                  success : function() {
  
                      console.log("Invio riuscito.");
                      console.log(moment(closing_date).format('DD/MM/YYYY'));
                      DTscans.ajax.reload( null, false ); //we reload the table, showing immediately the data updated.
                  }
  
              });
  
          });
  
  } );
  </code></pre>
  
  <p>Spring Controller:</p>
  
  <pre><code>/**
       * Return the details of scans, based on joining scans with
       * scan_items and hosts.
       * 
       * @param model
       * @param request
       * @param name
       * @param type
       * @param date
       * @return
       * @throws IOException
       */
      @PostMapping(value="/getscans.json")
      @ResponseBody
      public ModelAndView getScansDetails(ModelAndView model, HttpServletRequest request,
              @RequestParam(name="tag") String tag,
              @RequestParam(name="scanstatus") String scanstatus,
              @RequestParam(name="scanseverity") String scanseverity,
              @RequestParam(name="scanhost") String scanhost,
              @RequestParam(name="scanport") String scanport,
              @RequestParam(name="pluginid") String pluginid,
              @RequestParam(name="scaninfo") String scaninfo) throws IOException
      {   
  
  
          //First, we pass the data to DAO method
          List&lt;ScanItems&gt; listScanItems = networks.joinScanItemsAndScansAndHosts(tag, scanhost, scanport, scanstatus, scanseverity, pluginid, scaninfo);
  
          //Second, we put results in the model, with a map, and set properties for jquery datatables
          model.addObject("recordsTotal", listScanItems.size());
          model.addObject("recordsFiltered", listScanItems.size());
          model.addObject("data", listScanItems);
  
  
          //Finally, we return the model
          return model;
      }
  </code></pre>
  
  <p>If you need other details, please tell me and I'll provide them.</p>