Hidden row details where user can change data
Hidden row details where user can change data
Hello,
I am using ajax to populate the hidden row data. The code is as follows
[code]
function fnFormatDetails ( oTable, nTr ){
//aData[1] contains the envId which is hidden
var aData = oTable.fnGetData( nTr );
return aData[1];
}
$(document).ready( function () {
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
$('#envs thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#envs tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
var oTable = $('#envs').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "main/jquery/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "copy",
"sButtonText": "Copy to clipboard"
},
{
"sExtends": "csv",
"sButtonText": "Export to CSV"
},
{
"sExtends": "pdf",
"sButtonText": "Export to PDF"
},
{
"sExtends": "print",
"sButtonText": "Print"
}
]
}
} );
oTable.fnSetColumnVis( 1, false );
$('#envs tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "main/jquery/DataTables-1.9.2/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "main/jquery/DataTables-1.9.2/examples/examples_support/details_close.png";
envId = fnFormatDetails(oTable, nTr);
var newRow = oTable.fnOpen( nTr, "Loading data..." );
$.ajax( {
type: "POST",
url: "env_details.php",
data: { envId : envId },
success: function ( newHTML ) {
$('td', newRow).html( newHTML );
}
} );
}
} );
} );
[/code]
env_details.php contains input boxes where the user can change values and save them into the database (please note that envId is used to get the data from the database and display it when the row is shown. It is also used to give the inputs unique ids in env_details.php)
If I open one row and save the data everything works fine, however, if I open row1 then I open row2, then I go back to row1 change the data and save it, here the values are taken from the inputs of row2 and saved in the database (instead of being taken from row1).
Any ideas about why this is happening?
Thanks,
Alain
I am using ajax to populate the hidden row data. The code is as follows
[code]
function fnFormatDetails ( oTable, nTr ){
//aData[1] contains the envId which is hidden
var aData = oTable.fnGetData( nTr );
return aData[1];
}
$(document).ready( function () {
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
$('#envs thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#envs tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
var oTable = $('#envs').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "main/jquery/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "copy",
"sButtonText": "Copy to clipboard"
},
{
"sExtends": "csv",
"sButtonText": "Export to CSV"
},
{
"sExtends": "pdf",
"sButtonText": "Export to PDF"
},
{
"sExtends": "print",
"sButtonText": "Print"
}
]
}
} );
oTable.fnSetColumnVis( 1, false );
$('#envs tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "main/jquery/DataTables-1.9.2/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "main/jquery/DataTables-1.9.2/examples/examples_support/details_close.png";
envId = fnFormatDetails(oTable, nTr);
var newRow = oTable.fnOpen( nTr, "Loading data..." );
$.ajax( {
type: "POST",
url: "env_details.php",
data: { envId : envId },
success: function ( newHTML ) {
$('td', newRow).html( newHTML );
}
} );
}
} );
} );
[/code]
env_details.php contains input boxes where the user can change values and save them into the database (please note that envId is used to get the data from the database and display it when the row is shown. It is also used to give the inputs unique ids in env_details.php)
If I open one row and save the data everything works fine, however, if I open row1 then I open row2, then I go back to row1 change the data and save it, here the values are taken from the inputs of row2 and saved in the database (instead of being taken from row1).
Any ideas about why this is happening?
Thanks,
Alain
This discussion has been closed.
Replies
Allan
[code]
$('#envs tr').each( function () {
if($(row).index() != $(this).index()){
oTable.fnClose( $(this)[0] );
}
} );
$('#envs img').each( function () {
this.src = "main/jquery/DataTables-1.9.2/examples/examples_support/details_open.png";
} );
this.src = "main/jquery/DataTables-1.9.2/examples/examples_support/details_close.png";
[/code]
Man! This is not making any sense or I am just tired :)
Thanks,
Alain
I checked the response using firebug, the ids are being changed successfully.
Below is the content of env_details.php
Chunk from row 1
[code]
Edit
[/code]
Chunk from row 2
[code]
Edit
[/code]
Thanks,
Alain