Ajax to update single row on table using one-time ajax load
Ajax to update single row on table using one-time ajax load
Hi guys,
I am been trying to search for anyone who has posted about refreshing a single row in a table using ajax but I can't find anything. Kinda surprised actually.
I have a dataTable that uses a php file as the ajax source. The php file uses data from a php session and echos the desired information as json.
The dataTable has text inputs on it for updating the session data (by way of a jquery .change function that calls a .post). There's also a text input outside of the table for adding new data to the php session via .post. Each time data is edited or added I use fnReloadAjax() to refresh the table.
The problem with that is if you want to quickly change data in different rows by tabbing between them the table reloads which interrupts the flow of tabbing between inputs. It's also hard on the browser and looks bad to the user.
Is there a simple way to refresh a single row of the table using returned data from .post?
I was thinking of using fnUpdate on the matching row (the first column of each row is the key of the item in my php session). I haven't tried yet because I was hoping there's a way to do this without hardcoding the number of columns, etc. Perhaps if I return, say, 6 columns from my .post, then I can use fnUpdate and a .each to update 6 columns in the table? And if in another table there are only 3 columns, then it will still work since the loop would know there were only 3 columns of data returned from .post?
I'll see if I can get this going on my own, but just wanted to know if it's been done before and if there is already something whipped up or not.
Thanks!
I am been trying to search for anyone who has posted about refreshing a single row in a table using ajax but I can't find anything. Kinda surprised actually.
I have a dataTable that uses a php file as the ajax source. The php file uses data from a php session and echos the desired information as json.
The dataTable has text inputs on it for updating the session data (by way of a jquery .change function that calls a .post). There's also a text input outside of the table for adding new data to the php session via .post. Each time data is edited or added I use fnReloadAjax() to refresh the table.
The problem with that is if you want to quickly change data in different rows by tabbing between them the table reloads which interrupts the flow of tabbing between inputs. It's also hard on the browser and looks bad to the user.
Is there a simple way to refresh a single row of the table using returned data from .post?
I was thinking of using fnUpdate on the matching row (the first column of each row is the key of the item in my php session). I haven't tried yet because I was hoping there's a way to do this without hardcoding the number of columns, etc. Perhaps if I return, say, 6 columns from my .post, then I can use fnUpdate and a .each to update 6 columns in the table? And if in another table there are only 3 columns, then it will still work since the loop would know there were only 3 columns of data returned from .post?
I'll see if I can get this going on my own, but just wanted to know if it's been done before and if there is already something whipped up or not.
Thanks!
This discussion has been closed.
Replies
If anyone wants more detail on what I had to do if they are having trouble then just ask and by then I should have some nice code to show as an example.
Without fnRowCallback I lose editablity of any modified rows :(
[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull )
{
// wrap input tag around order column (not sortable if done on php-end)
$('td:eq(6)', nRow).html(""); //6th visible column, 8th actual column
// store the original value for use in case changed value is invalid
$('input.actual_order', nRow).data('original_value', aData[8]);
// if input value is changed do the ajax request
$('input.actual_order', nRow).change(function()
{
$.post("order_functions_ajax.php?action=update_order_count", { "id": aData[0], "value": $('input.actual_order', nRow).val() }, function(response)
{
// if the data was valid (as determined in php script)
if (response.success === true)
{
// refresh the modified row but don't redraw the table
dataTableProducts.fnUpdate(response.new_row, nRow, false);
// force the rowcallback to happen on the new row
dataTableProducts.fnSettings().fnRowCallback(nRow, aData, 0, 0);
}
// if the data was not valid (as determined in php script)
else if (response.success === false)
{
// change the input value back to what it was before being changed
$('input.actual_order', nRow).val($('input.actual_order', nRow).data('original_value'));
// custom function to alert the user that their data was not valid
show_status_bar(response.message, function()
{
show_errors(response.errors);
delayed_hide_status_bar(3000);
});
}
}, "json");
});
return nRow;
}
[/code]