JqxGrid editable don't refresh

[eck8torParticipant]

Hello,

I know i’m not the first one to ask but I can’t find the answer. I also try so many things, maybe I don’t put the right code to the right place.

When I load my page (jqxgrid + mysql + php) all data appears correctly.

i add the Editable on two columns and it’s working if I press F5 to refresh my page. Otherwise, It will change the information next time I will refresh my page. It’s not a big problem but I really want to be refresh when I finished editing one cell.

Here my code:

       $(document).ready(function () 
	{
	    // prepare the data
	    var data = {};
            var theme = 'classic';
        
            var source =
            {
                datatype: "json",
                datafields:
                [
		    { name: 'host', type: 'string'},
		    { name: 'site', type: 'string'},
		    { name: 'budget', type: 'string'},
		    { name: 'os_type', type: 'string'},
		    { name: 'last_reboot', type: 'string'},
		    { name: 'last_update', type: 'string'},
		    { name: 'nb_updates', type: 'string'},
		    { name: 'contacts', type: 'string'},
		    { name: 'comments', type: 'string'},
		    { name: 'backup', type: 'string'}
                ],
		id: 'host',
		cache: false,
		url: 'data-editable.php',
		updaterow: function (rowid, rowdata, commit) 
		{
                    // synchronize with the server - send update command
                    var data = "update=true&contacts=" + rowdata.contacts + "&comments=" + rowdata.comments + "&host=" + rowdata.host;
                    $.ajax(
		    {
                        dataType: 'json',
                        url: 'data-editable.php',
                        data: data,
                        success: function (data, status, xhr) 
			{
			    // update command is executed.
                            commit(true);
                        },
                        error: function () 
			{
                            // cancel changes.
                            commit(false);
                        }
                    });
                }
            };
			
	    $("#jqxgrid").jqxGrid('updatebounddata', 'cells');

	    //var dataadapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
		width: '94%',
		height: 600,
		selectionmode: 'singlecell',
		source: source,
                theme: theme,
		editmode: 'click',
		editable: true,
                columns: 
		[
                    { text: 'Server Name', datafield: 'host', width: '10%' },
		    { text: 'Site', datafield: 'site', width: '6%' },
		    { text: 'Budget', datafield: 'budget', width: '6%' },
                    { text: 'OS Type', datafield: 'os_type', width: '25%' },
                    { text: 'Last Reboot', datafield: 'last_reboot', width: '7%' },
                    { text: 'Last Update', datafield: 'last_update', width: '10%' },
                    { text: 'NB Updates', datafield: 'nb_updates', width: '7%' },
                    { text: 'Contacts', datafield: 'contacts', width: '10%' },
		    { text: 'Comments', datafield: 'comments', width: '25%' },
                    { text: 'Type of Backup', datafield: 'backup', width: '7%' }
                ]
            });
        });

Any idea ?

By the way, it’s so cool working with JQWidget !

Kind Regards,

Eric

[HristoParticipant]

Hello Eric,

You could add to the wanted column – cellendedit callback and then refresh data.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[eck8torParticipant]

Hello Hristo,

Thanks for your answer.

I removed the line:
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘cells’);

I try to add this:

$('#jqxgrid').on('cellendedit', function (event) {
	$("#jqxgrid").jqxGrid('updatebounddata');
 });

At the end of the script and it’s not working.

Could you provide the full syntax of what I need to add please.

Kind Regards,

Eric

[HristoParticipant]

Hello Eric,

You could use $("#jqxgrid").jqxGrid('refreshdata'); in the updaterow callback.
Could you give us more details – what is the goal and what you want to achieve to provide you a better solution?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[eck8torParticipant]

Hello Hristo,

Thanks for your answer. It was not working but I modified like this and it’s working !

updaterow: function (rowid, rowdata, commit) 
{
   // synchronize with the server - send update command
   var data = "update=true&contacts=" + rowdata.contacts + "&comments=" + rowdata.comments + "&host=" + rowdata.host;
   $.ajax(
   {
      dataType: 'json',
      url: 'data-editable.php',
      data: data,
      success: function (data, status, xhr) 
      {
	 // update command is executed.
         commit(true);
	 <strong>window.location.reload();</strong>
	 <strong>$("#jqxgrid").jqxGrid('refreshdata');</strong>
      },
      error: function () 
      {
         // cancel changes.
         commit(false);
	 <strong>window.location.reload();</strong>
	 <strong>$("#jqxgrid").jqxGrid('refreshdata');</strong>
      }
   });
}

Thanks Again for your help !

Kind Regards,

Eric

[Author]

Posts