Backgrid.JS: How to push edits to server as POST requests to PHP

Question

I have an editable table. Below is a function that renders the table, given the Element ID to which the table is to be rendered, an array of columns, and a controller name, which is used in the construction of the URLs. The URLs are of the following format, where exampleController is an example controller:

• To Update: php/gateway.php?sender=exampleController&action=update
• To List: php/gateway.php?sender=exampleController&action=list

I want the POST request to contain the edited info, along with the respective row.

I've tried to do (something) in the code below. It makes the request but the POST is not included.

var initiateGrid = function(element_id, columns, controllerName) {
    var gridModel = Backbone.Model.extend({

        initialize: function() {
            Backbone.Model.prototype.initialize.apply(this, arguments);
            this.on("change", function(model, options) {
                if (options && options.save === false) {
                    return;
                }
                this.sync();
            });
        },
        sync: function(method, model, options) {
            var methodUpdateMethodUrl = 'php/gateway.php?sender=' + controllerName + '&action=update';
            options = options || {};
            options.url = methodUpdateMethodUrl;
            Backbone.sync(method, model, options);
        }
    });

    var gridCollectionModel = Backbone.Collection.extend({
        model: gridModel,
        url: 'php/gateway.php?sender=' + controllerName + '&action=list',
    });

    var gridCollection = new gridCollectionModel();

    var grid = new Backgrid.Grid({
        columns: columns,
        collection: gridCollection,
        emptyText: "No Data"
    });

    var gridContainer = $("#" + element_id);
    gridContainer.append(grid.render().el);

    gridCollection.fetch({
        reset: true
    });

};

And, of course, there is this error:

Uncaught TypeError: Cannot read property 'trigger' of undefined

Answer 1

The following code worked for me:

var initiateGrid = function(element_id, columns, controllerName) {

    var gridModel = Backbone.Model.extend({

        initialize: function() {
            Backbone.Model.prototype.initialize.apply(this, arguments);
            this.on("change", function(model, options) {
                this.sync("update", model, options);
            });
        },
        sync: function(method, model, options) {
            var methodUrl = {
                'update': 'php/gateway.php?sender=' + controllerName + '&action=update'
            };
            console.log(method, model, options);
            if (methodUrl && methodUrl[method.toLowerCase()]) {
                options = options || {};
                options.url = methodUrl[method.toLowerCase()];
            }
            Backbone.sync(method, model, options);
        }
    });

    var gridCollectionModel = Backbone.Collection.extend({
        model: gridModel,
        url: 'php/gateway.php?sender=' + controllerName + '&action=list',
    });

    var gridCollection = new gridCollectionModel();

    var grid = new Backgrid.Grid({
        columns: columns,
        collection: gridCollection,
        emptyText: "No Data"
    });

    var gridContainer = $("#" + element_id);
    gridContainer.append(grid.render().el);

    gridCollection.fetch({
        reset: true
    });

};

And the PHP to get an array:

function get_form_data() {
    $dump = json_decode(file_get_contents('php://input'));
    $transfer_info = array();
    foreach ($dump as $key => $value) {
        $transfer_info[$key] = $value;
    }
    return $transfer_info;
}