Cannot reload data in Fuelux Datagrid

Question

I have tried to reload the data populated by an ajax call but I cant get it to work, it shows the old data even after using the reload method. The thing is that if I change some variables to populate a different data and try to call the following code without refreshing the page it does not reload the updated data =/ Here is my code:

function populateDataGrid() {
   $.ajaxSetup({async: false}); 
   var gridinfo="";
   $.post("lib/function.php",{activity: activity, shift: shift, date: date}, 
      function (output){
         gridinfo = JSON.parse(output);
   });
   $.ajaxSetup({async: true});

    // INITIALIZING THE DATAGRID
        var dataSource = new StaticDataSource({
          columns: [
            {
              property: 'id',
              label: '#',
              sortable: true
            },
            {
              property: 'date',
              label: 'date',
              sortable: true
            },
            ....
          ],

          formatter: function (items) {
                var c=1;
              $.each(items, function (index, item) {
                item.select = '<input type="button" id="select'+c+'" class="select btn" value="select" onclick="">';
                c=c+1;
              }); 
         },
            data: gridinfo,
            delay:300
        });

        $('#grid').datagrid({
          dataSource: dataSource
        });

        $('#grid').datagrid('reload');

        $('#modal-fast-appointment-results').modal({show:true});
}

Answer 1

I found a solution... I had to create a new DataSource (lets call it "AjaxDataSource") and add the ajax request functionality within the data constructor:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['underscore'], factory);
    } else {
        root.AjaxDataSource = factory();
    }
}(this, function () {

    var AjaxDataSource = function (options) {
        this._formatter = options.formatter;
        this._columns = options.columns;
        this._delay = options.delay || 0;
        this._data = options.data;
    };

    AjaxDataSource.prototype = {

        columns: function () {
            return this._columns;
        },

        data: function (options, callback) {
            var self = this;

            setTimeout(function () {
                var data;
                $.ajax({
                    url: 'getdata.php',
                    type: 'POST',
                    data: 'param1:param1,param2,param2,...,paramN:paramN', // this is optional in case you have to send some params to getdata.php
                    dataType: 'json',
                    async: false,
                    success: function(result) {
                        data = result;
                    },
                    error: function(data){
                        //in case we want to debug and catch any possible error
                        // console.log(data);
                    }
                });

                                    // SEARCHING
                if (options.search) {
                    data = _.filter(data, function (item) {
                        var match = false;

                        _.each(item, function (prop) {
                            if (_.isString(prop) || _.isFinite(prop)) {
                                if (prop.toString().toLowerCase().indexOf(options.search.toLowerCase()) !== -1) match = true;
                            }
                        });

                        return match;
                    });
                }


                var count = data.length;

                // SORTING
                if (options.sortProperty) {
                    data = _.sortBy(data, options.sortProperty);
                    if (options.sortDirection === 'desc') data.reverse();
                }

                // PAGING
                var startIndex = options.pageIndex * options.pageSize;
                var endIndex = startIndex + options.pageSize;
                var end = (endIndex > count) ? count : endIndex;
                var pages = Math.ceil(count / options.pageSize);
                var page = options.pageIndex + 1;
                var start = startIndex + 1;

                data = data.slice(startIndex, endIndex);

                if (self._formatter) self._formatter(data);

                callback({ data: data, start: start, end: end, count: count, pages: pages, page: page });

            }, this._delay)
        }
    };

    return AjaxDataSource;
}));

After defining the new DataSource, we just need to create it and call the datagrid as usual:

function populateDataGrid(){

// INITIALIZING THE DATAGRID
        var dataSource = new AjaxDataSource({
          columns: [
            {
              property: 'id',
              label: '#',
              sortable: true
            },
            {
              property: 'date',
              label: 'date',
              sortable: true
            },
            ....
          ],

          formatter: function (items) { // in case we want to add customized items, for example a button
                var c=1;
              $.each(items, function (index, item) {
                item.select = '<input type="button" id="select'+c+'" class="select btn" value="select" onclick="">';
                c=c+1;
              }); 
         },
            delay:300
        });

        $('#grid').datagrid({
          dataSource: dataSource
        });

        $('#grid').datagrid('reload');

        $('#modal-results').modal({show:true});
}

So now we have our datagrid with data populated via ajax request with the ability to reload the data without refreshing the page.

Hope it helps someone!