How to post a hidden column to a form
How to post a hidden column to a form
I have a DataTable with some visible columns (first name, last name) and one hidden column (id). I'm using the DataTable row select example to highlight the row that the user selects. When a button is pressed I am able to display the value in the hidden column for the selected row. What I'm trying to figure out is how to post that hidden value to another page as an input variable on my form.
Here's the function that my button calls, which simply displays the hidden id column that I want to post.
[code]
$('#select').click( function() {
var anSelected = fnGetSelected( oTable );
if ( anSelected.length == 0 ) {
alert('Please make a selection');
} else {
// Get data from the selected row
var aRow = anSelected[0];
var sFirstName = oTable.fnGetData( aRow, 0 );
var sLastName = oTable.fnGetData( aRow, 1 );
var sID = oTable.fnGetData( aRow, 2 );
alert('You have selected ' + sID);
}
} );
[/code]
I am unclear as to how to post this value as an input variable on a form.
I also found an example that attempts to address this but it fails to show how to actually post the value.
[code]
$(document).ready(function() {
var oTable;
$('#form').submit( function() {
var sData = $('input', oTable.fnGetNodes()).serialize();
alert( "The following would have been submitted to the form: \n\n"+sData );
return true;
} );
oTable = $('#example').dataTable();
} );
[/code]
I'm new to jQuery and DataTables, in case you hadn't guessed. :)
Thanks in advance for any help...
Brian
Here's the function that my button calls, which simply displays the hidden id column that I want to post.
[code]
$('#select').click( function() {
var anSelected = fnGetSelected( oTable );
if ( anSelected.length == 0 ) {
alert('Please make a selection');
} else {
// Get data from the selected row
var aRow = anSelected[0];
var sFirstName = oTable.fnGetData( aRow, 0 );
var sLastName = oTable.fnGetData( aRow, 1 );
var sID = oTable.fnGetData( aRow, 2 );
alert('You have selected ' + sID);
}
} );
[/code]
I am unclear as to how to post this value as an input variable on a form.
I also found an example that attempts to address this but it fails to show how to actually post the value.
[code]
$(document).ready(function() {
var oTable;
$('#form').submit( function() {
var sData = $('input', oTable.fnGetNodes()).serialize();
alert( "The following would have been submitted to the form: \n\n"+sData );
return true;
} );
oTable = $('#example').dataTable();
} );
[/code]
I'm new to jQuery and DataTables, in case you hadn't guessed. :)
Thanks in advance for any help...
Brian
This discussion has been closed.
Replies
The second code block you have is good, but fnGetNodes gets TR nodes, not TD, thus it doesn't help with the hidden columns. You would need to either use fnGetNodes on the hidden column or the fnGetTds API plug-in.
Allan
i found this somewhere in the docs
When DataTables removes columns from the display (bVisible or fnSetColumnVis) it removes these elements from the DOM,
effecting the index value for the column positions. This function converts the data column index (i.e. all columns regardless of visibility)
into a visible column index.
[code]
$.fn.dataTableExt.oApi.fnColumnIndexToVisible = function ( oSettings, iMatch )
{
return oSettings.oApi._fnColumnIndexToVisible( oSettings, iMatch );
};
[/code]
When DataTables removes columns from the display (bVisible or fnSetColumnVis) it removes these elements from the DOM,
effecting the index value for the column positions. This function converts the visible column index into a data column index
(i.e. all columns regardless of visibility).
[code]
$.fn.dataTableExt.oApi.fnVisibleToColumnIndex = function ( oSettings, iMatch )
{
return oSettings.oApi._fnVisibleToColumnIndex( oSettings, iMatch );
};
[/code]
(a) know which row the user has selected
(b) read the value of the hidden column for that row
(c) assign the value to a hidden form field
The difference between the two solutions is when the value is assigned. In the first solution the value is assigned when the user hits the submit button. In the second solution the value is assigned every time the user clicks a row.
Solution #1: This builds on my previously posted code. Here I have simply replaced the alert dialog box with a statement that assigns the hidden value to a hidden form field using the getElementById function.
[code]
$('#select').click( function() {
var anSelected = oTable.$('tr.row_selected');
if ( anSelected.length == 0 ) {
alert('Please make a selection');
} else {
// Get data from the selected row
var aRow = anSelected[0];
var sFirstName = oTable.fnGetData( aRow, 0 ); // Don't need this anymore
var sLastName = oTable.fnGetData( aRow, 1 ); // Don't need this anymore
var sID = oTable.fnGetData( aRow, 2 ); // Hidden column
document.getElementById('hiddenUserID').value = sID;
}
} );
[/code]
In my form I have a hidden input field and a submit button that calls the function above.
[code]
Select User
[/code]
Solution #2: In this solution I am assigning the value every time the user selects a row. The code borrows from the DataTables row select example, which can be found here:
http://datatables.net/release-datatables/examples/api/select_single_row.html
[code]
/* Add a click handler to the rows */
$("#example tbody tr").click( function( e ) {
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
} else {
oTable.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
// Get the data from the selected row
var sID = oTable.fnGetData( this, 2 );
document.getElementById('hiddenUserID').value = sID;
}
});
[/code]
My form has the same hidden input field as mentioned above. My submit button also calls the function in the first solution, but only to check that a row has been selected.
Both solutions work great. I suppose which one you use depends on personal preference and needs.
Regards,
Allan