Fail when using jTable in Fat-Free Framework

Question

I'm trying to load data with jTable in Fat-Free Framework but I can't. The web page has a button to perform the upload:

<form>
  <fieldset>
    <legend>Requests - Filter</legend>
    <label for="modali">Modality:</label><input type="text" id="modali" name="modali" style="width: 5ex"/>
    <input type="submit" id="requestFilter" value="Search"/>
  </fieldset>
</form>
<!-- table -->
<div id="instancias"></div>

The page also loads a javascript file called "career.js", which controls the button action and data loading:

function career() {
  $('button, input[type="button"], input[type="reset"], input[type="submit"]').button();
  $('select')
    .selectmenu();
  $('input:text, input:password, input[type="email"]')
    .button()
    .off('mouseenter')
    .off('mousedown')
    .off('keydown')
    .css('cursor', 'default');

  //'instancias' (requests) table
  $('#instancias').jtable({
    defaultDateFormat:  'dd-mm-yy',
    defaultSorting:     'ins.dni ASC',
    deleteConfirmation: false,
    jqueryuiTheme:      true,
    multiSorting:       true,
    pageSize:           100,
    paging:             true,
    sorting:            true,
    title:              'Instancias',
    actions: {
      listAction: function (postData, jtParams) {
        return $.Deferred(function ($dfd) {
          $.ajax({
            url: '/cgt/antiguedad?menuOpt=cgt_ant&accion=select&jtStartIndex=' + jtParams.jtStartIndex + '&jtPageSize=' + jtParams.jtPageSize + '&jtSorting=' + jtParams.jtSorting,
            type: 'POST',
            dataType: 'json',
            data: postData,
            success: function (data) {
                $dfd.resolve(data);
            },
            error: function () {
                $dfd.reject();
            }
          });
        });
      },
      createAction: 'none',
      updateAction: 'none',
      deleteAction: 'none'
    },//end actions
    fields: {
      codpro: {title: 'Prv.',        width: '5%', options: {'03': 'Alicante', '12': 'Castellón', '46': 'Valencia'}},
      codcue: {title: 'Crp.',        width: '5%', key: true},
      dni:    {title: 'DNI',         width: '7%', key: true},
      apell1: {title: '1º Apellido', width: '10%'},
      apell2: {title: '2º Apellido', width: '10%'},
      nombre: {title: 'Nombre',      width: '10%'},
      codmod: {title: 'Mod.',        width: '5%', type: 'date'},
      calmod: {title: 'Mod. *',      width: '5%', type: 'date', edit: false},
      pto111: {title: '1.1.1',       width: '7%', defaultValue: 0},
      cal111: {title: '1.1.1 *',     width: '7%', defaultValue: 0, edit: false},
      pto112: {title: '1.1.2',       width: '7%', defaultValue: 0},
      cal112: {title: '1.1.2 *',     width: '7%', defaultValue: 0, edit: false}
    }//end fields
  });//end 'instancias' table

  //$('#instancias').jtable('load');

  //Filtering
  $('#requestFilter').click(function (e) {
    e.preventDefault();
    $('#instancias').jtable('load', {menuOpt:'cgt_ant', accion:'select', modali:$('#modali').val()});
  });//end filtering
}//end 'career' function

career();

However, for some reason, when the button is clicked I always get this jTable error: "An error occured while communicating to the server."

My routes.ini file contains the following:

...
GET  /cgt/antiguedad=Gtc->career
POST /cgt/antiguedad [ajax] = Gtc->career
...

But it seems that this point is never reached.

Any help is welcome. Thanks in advance.

Note: if I paste the career.js url directly into the browser (http://localhost:8080/preceptor/cgt/antiguedad?menuOpt=cgt_ant&accion=select) the data is obtained.

I have tried setting a URL string as listAction, but without results.

Answer 1

Your POST route is set as Ajax only. Hence ensure that your ajax call in JS does send the following header:

X-Requested-With: XMLHttpRequest

Also sending a json via post is non standard and might require you to handle the incoming data differently. Parse the json yourself from BODY framework var or send the ajax request with content type header application/x-www-form-encoded or multipart/form-data