DataTables

jmichaels

I am currently using DataTables for a project along with the jeditable plugin.
My table renders beautifully.
I can edit and save values in cells.
My table on the database gets updated correctly.

But after I update the cell I get 'Click to Edit' in the cell and the new value is not visible until I refresh the page. I have been scouring the web trying to get fnDraw and some other things to work but I am unable to figure it out, I am pretty new to jQuery, am a PHP developer.

The only thing I need it to do is re-draw the table after the values are submitted.
Here is my code:

$(document).ready(function() {
	/* Init DataTables */
	var oTable = $('#district').dataTable();
	
	/* Apply the jEditable handlers to the table */
	$('#district', oTable.fnGetNodes()).editable( 'editable_ajax.php', {
		tooltip   : 'Click cell to edit value...',
		indicator : 'Saving...',
        style   : 'display:block;',
		 submit    : 'OK',
         cancel    : 'Cancel',
		 data   : " {'PDC 30':'PDC 30','PDC 14':'PDC 14','PDC 81':'PDC 81','PDC 58':'PDC 58'}",
		 type    : 'select',
		"Callback": function( sValue, x) {
			var aPos = oTable.fnGetPosition( this );
			oTable.fnUpdate( sValue, aPos[0], aPos[1]);
			
            /* Redraw the table from the new data on the server */
			oTable.fnClearTable( 0 );
			oTable.fnDraw();
		},
		"submitdata": function ( value, settings ) {
			var aPos2 = oTable.fnGetPosition( this );
			var id2 = oTable.fnGetData( aPos2[0] ); 
			return {
				"row_id": this.parentNode.getAttribute('id'),
			    "id2": id2[0],
				"column": oTable.fnGetPosition( this )[ 2 ]			
			};
		},
		"height": "14px",
	} );
} );

btz

Why callback is in quotation marks?

 $('.editable').editable('http://www.example.com/save.php', { 
     type     : 'textarea',
     submit   : 'OK',
     callback : function(value, settings) {
         console.log(this);
         console.log(value);
         console.log(settings);
     }
 });

jmichaels

I've taken off the qoutes and now when I make a change to a cell and hit ok the table disappears from view and isnt redrawn?

Here is my code for that portion:

		
callback: function( sValue, x) {
			var aPos = oTable.fnGetPosition( this );
			oTable.fnUpdate( sValue, aPos[0], aPos[1]);
            /* Redraw the table from the new data on the server */
			oTable.fnClearTable();
			oTable.fnDraw();
		},

btz

How about


 callback : function(sValue, x) {
        oTable.fnDraw();
    }

jmichaels

No dice, it will process the update, update the mySQL table, the value will disappear from the cell and you get the 'Click to Edit" text until you refresh the page, then you see the updated value.

damon83

Im having exactly the same issue, any solution to this problem??

DanMorin

Likewise, I have a dialog for editing a row for a table, and when the user click on OK, I update values to the server. To make sure the values have been properly updated, I want to reload/refresh the entire table, as when the page loads. Any simple suggestion? Technically, it should be a single line of code to perform this.

$('#idDialog').dialog(
    {
    autoOpen: true,
    width: 500,
    height: 400,
    modal: true,
    buttons:
        {
        OK: function() 
            {
            $.ajax(
                {
                url: strUrl, // The URL to update the table
                success: function(data)
                    {
                    g_oTable.fnReloadAjax();
                    $('#idDialog').dialog('close');
                    }
                 });
           },                      
        Close: function() 
            {
            $(this).dialog('close');
            }                           
        } // buttons
    });
    
    g_oTable = $('#table').dataTable(
        {
        "bJQueryUI": true,
        "bAutoWidth": false,
        "iDisplayLength": 100,
        "sPaginationType": "full_numbers",
        "sAjaxSource": '/ajax/Data.ashx' + window.location.search,
        "fnRowCallback": function(oRow, aData)
            {
            $(oRow).bind('click', function()
                {
                OpenDialog(aData);
                });
            },

allan

Does your fnReloadAjax line not do it? That should go to the server, reload the entire table with the new values and display them. What does happen with that line at the moment?

Allan

DanMorin

I am looking for a method like fnReloadAjax() which will call the sAjaxSource and re-initialize the table. Do you have such a method?

allan

I don't quite understand I'm afraid - that is exactly what fnReloadAjax does - it goes to the Ajax source, gets the new data, clears the data from the table that is currently in it and then populates the table with the new data. Is that not what you are looking for?

Allan

DanMorin

Do you have an 'official' implementation of fnReloadAjax() ?

allan

http://datatables.net/plug-ins/api#fnReloadAjax - that's the current one. As with all software, it is possible there is a bug somewhere in it, but I'm not aware of any issues at the moment.

Allan

chris_n

The problem here seems rooted in the fact that sValue (which is pretty much undocumented afaict) is always passed in empty, so doing this:

                            "callback"      : function( sValue, y) {
                                                    var aPos = oTable.fnGetPosition( this );
                                                    oTable.fnUpdate( sValue, aPos[0], aPos[1] );
                                              },

Results in nothing being passed in as the first param of fnUpdate being basically null and leaving the contents of the referenced cell as it was before (which in this case is your value for jEditable's 'placeholder.'

Unless I've missed something here, I tend to think this is a bug. But perhaps more documentation on sValue and/or this example: http://datatables.net/release-datatables/examples/api/editable.html

chris_n

Actually, this looks like it might be a problem with JEditable. When the jEditable callback fires, it seems jEditable is passing in a null value for the first param which is not true. Interestingly enough, the correct value is passed back to the server, just not to the callback.

chris_n

SOLVED!

Your server-side script *must* return the "value" of the cell as passed in. jEditable grabs this return value and assigns it to a string "results" which is then passed into the callback along with the jEditable settings object. If you don't pass the value back out, it will not show up in your callback (sValue) and thus will not be pushed back out to the edited cell.

chris_n

This actually eliminates the need for the jEditable callback altogether. (Perhaps I'm displaying my ignorance here, but hopefully it will help some poor soul in the future... ;-)

DataTables

Howdy, Stranger!

Support

Categories

In this Discussion