Hidden row details where user can change data

aeid

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

allan

Is there something in the form which says what ID is to be changed? It sounds to me like that isn't being updated. Firebug would confirm what data is being sent.

Allan

aeid

I confirm that the IDs are being changed correctly in the returned response. As a temporary workaround, I will allow the user to open one row at a time by adding the code below:

[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

aeid

Hello Allan,

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