jQuery UI Widgets Forums DataTable getCellValue 'null' Value on Inline Edit Delete

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • cpuzzuol
    Participant

    When the “delete” button is clicked in the code below, the getCellValue function is supposed to get the value of the ‘id’ field from the table. This value is then sent to an external script to delete the record from the database. This works for a few records, but then begins returning NULL as the ‘id’ of every field. If I re-load the page, the script beings working properly again but only for a few records at a time.

    jQuery(document).ready(function () {
    // prepare the data
    var source =
    {
    dataType: “json”,
    dataFields: [
    { name: ‘id’, type: ‘number’ },
    { name: ‘lastName’, type: ‘string’ },
    { name: ‘firstName’, type: ‘string’ },
    { name: ‘jobTitle’, type: ‘string’ },
    { name: ‘phone’, type: ‘string’},
    { name: ‘office’, type: ‘string’ },
    { name: ’email’, type: ‘string’ }
    ],
    url: “<?php echo LIBSTAFF__PLUGIN_URL; ?>data/results.json”,
    deleteRow: function (rowID, commit) {
    // synchronize with the server – send delete command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failed.
    var recordId = jQuery(“#dataTable”).jqxDataTable(‘getCellValue’, rowID, ‘id’);
    alert(recordId);
    jQuery.ajax({
    method: ‘post’,
    url: ‘<?php echo LIBSTAFF__PLUGIN_URL; ?>data/process.php’,
    data: {
    staffrow: ‘delete’,
    data: recordId
    },
    cache: false,
    success: function (data, status, xhr) {
    // insert command is executed.
    console.log(“success deleting record ID ” + recordId);
    commit(true);
    jQuery(‘#dataTable’).jqxDataTable(‘refresh’);

    },
    error: function(jqXHR, textStatus, errorThrown)
    {
    console.log(“error deleting”);
    commit(false);
    }
    });
    }
    };
    var dataAdapter = new jQuery.jqx.dataAdapter(source,
    {
    loadComplete: function () {
    console.log(“DATA ADAPTER load complete!”);
    },
    loadError: function(jqXHR, status, error)
    {
    console.log(status);
    },
    }
    );
    jQuery(“#dataTable”).jqxDataTable(
    {
    width: ‘95%’,
    pageable: true,
    sortable: true,
    editable: true,
    pagerButtonsCount: 10,
    source: dataAdapter,
    showToolbar: true,
    altRows: true,
    columnsResize: true,
    ready: function()
    {
    // called when the DataTable is loaded.
    console.log(“fertig”);
    },
    pagerButtonsCount: 8,
    toolbarHeight: 35,
    renderToolbar: function(toolBar)
    {

    var rowIndex = null;
    jQuery(“#dataTable”).on(‘rowSelect’, function (event) {
    var args = event.args;
    rowIndex = args.index;
    updateButtons(‘Select’);
    });
    jQuery(“#dataTable”).on(‘rowUnselect’, function (event) {
    updateButtons(‘Unselect’);
    });
    jQuery(“#dataTable”).on(‘rowEndEdit’, function (event) {
    updateButtons(‘End Edit’);
    });
    jQuery(“#dataTable”).on(‘rowBeginEdit’, function (event) {
    updateButtons(‘Edit’);
    });
    jQuery(“#dataTable”).jqxDataTable(‘hideColumn’,’id’);

    deleteButton.click(function () {
    if (!deleteButton.jqxButton(‘disabled’)) {
    alert(rowIndex);
    jQuery(“#dataTable”).jqxDataTable(‘deleteRow’, rowIndex);
    updateButtons(‘delete’);
    }
    });
    },
    columns: [
    { text: ‘id’, dataField: ‘id’},
    { text: ‘Last Name’, dataField: ‘lastName’},
    { text: ‘First Name’, dataField: ‘firstName’},
    { text: ‘Job Title’, dataField: ‘jobTitle’},
    { text: ‘Phone’, dataField: ‘phone’},
    { text: ‘Office’, dataField: ‘office’},
    { text: ‘Email’, dataField: ’email’},
    ],
    });
    });


    Dimitar
    Participant

    Hello cpuzzuol,

    If you set the source object’s id property to the ‘id’ datafield, the rowID argument of the deleteRow callback will be the same as the value of the row’s ‘id’ cell and you would not need to call getCellValue at all. Here is how to implement this approach:

    var source = {
        dataType: "json",
        dataFields: [{
            name: 'id',
            type: 'number'
        }, {
            name: 'lastName',
            type: 'string'
        }, {
            name: 'firstName',
            type: 'string'
        }, {
            name: 'jobTitle',
            type: 'string'
        }, {
            name: 'phone',
            type: 'string'
        }, {
            name: 'office',
            type: 'string'
        }, {
            name: 'email',
            type: 'string'
        }],
        id: 'id',
        url: "<?php echo LIBSTAFF__PLUGIN_URL; ?>data/results.json",
        deleteRow: function(rowID, commit) {
            // synchronize with the server – send delete command
            // call commit with parameter true if the synchronization with the server is successful
            // and with parameter false if the synchronization failed.
            alert(rowID);
            jQuery.ajax({
                method: 'post',
                url: '<?php echo LIBSTAFF__PLUGIN_URL; ?>data/process.php',
                data: {
                    staffrow: 'delete',
                    data: rowID
                },
                cache: false,
                success: function(data, status, xhr) {
                    // insert command is executed.
                    console.log("success deleting record ID " + rowID);
                    commit(true);
                    jQuery('#dataTable').jqxDataTable('refresh');
    
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log("error deleting");
                    commit(false);
                }
            });
        }
    };

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.