Refresh data: php script

[k1mgyParticipant]

I switched from binding data using jqxGrid’s internal call, to using the jqx.dataAdapter. Reason: I need a means of refreshing the contents of the Data Grid when data is changed.

Unfortunately I cannot find a method that will trigger the Data Grid to command an update.

The dataAdapter is configured thusly:

var DataSource;
$(document).ready(function () {
            // prepare the data
            DataSource =
            {
                datatype: "json",
                datafields: [
                    { name: 'callsign' },
                    { name: 'first' },
                    { name: 'last' },
                    { name: 'email' },
                    { name: 'mphone'}
                ],
                id: 'id',
                url: 'data.php',
                root: 'data'
            };
            var dataAdapter = new $.jqx.dataAdapter(DataSource);           
           dataAdapter.dataBind();

Simple enough.

And it is bound to the DataGrid as follows:

$("#jqxgrid").jqxGrid({
                    source: DataSource,
                    sortable: true,
                    pageable: true,
                    autoheight: true,
                    width: 800,
                    columnsresize: true,    
                    theme: 'energyblue',
                    columns: [{ text: 'Callsign', datafield: 'callsign', width: 150 },{ text: 'First', datafield: 'first', width: 150 },{ text: 'Last', datafield: 'last', width: 180 },{ text: 'Email', datafield: 'email', width: 200 },{ text: 'Phone', datafield: 'mphone', width: 120 }]
                });
            });    

Dynamic Data Refresh does not work in this instance.

Any ideas?

[k1mgyParticipant]

Actually, I found some functions to help. Although the data updates in the database, it does not in the grid unless I reload the page, or
press a button used to trigger the update twice.

      $('#bUpdateCells').on('click', function () 
      {
                $.post("updatecells.php");
                $('#jqxgrid').jqxGrid('updatebounddata');
                $('#jqxGrid').jqxGrid('refresh');
                $('#jqxGrid').jqxGrid('render');
       });

On the second execution of the button, the cells refresh.

Hmmm…

[k1mgyParticipant]

Fixed.

Had to:

async: false,

in the DataSource specification and:

 $('#bValidateCalls').on('click', function () {
                $.post('validate.php');
                $('#jqxgrid').jqxGrid('refreshdata');
                $('#jqxgrid').jqxGrid('updatebounddata');
            });
            
            $('#bClearValidateCalls').on('click', function () 
            {
                $.post('clearvalidate.php');
                $('#jqxgrid').jqxGrid('refreshdata');
                $('#jqxgrid').jqxGrid('updatebounddata');
            });

in my action functions.

It seems one must refreshdata before updating the bindings! Who would have thunk!

[Peter StoevKeymaster]

I would suggest you to remove “refreshdata”.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[k1mgyParticipant]

That breaks it.

When I remove refreshdata, then I have to execute the call twice in order that the grid is refreshed.

It simply takes me back to the original problem.

[Peter StoevKeymaster]

$(‘#jqxgrid’).jqxGrid(‘updatebounddata’); is enough for refreshing the Grid’s data and re-rendering the Grid. That’s what this method does and it works well in all the samples which we have. dataAdapter.dataBind(); is also unnecessary to be called. I would suggest you to look at the Grid’s demos and especially its Documentation to learn how to use that widget and data bind it to various data source. There are several hundreds demos with that widget which demonstrate how to bind it and how to refresh its data.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts