Rendered input radio undefined when selected
Rendered input radio undefined when selected
bbrindza
Posts: 316Questions: 73Answers: 1
This is a tough one ...at least for me. I have a simple input radio button that is available in every row which is created in a column render. The problem is when the radio is selected it does not have the 'checked' attribute associated to it, however if i pre-set the radio value as 'checked' it the column render it does have the 'checked' attribute associated to it. I was able to test this with a button that iterates over the table rows and checks the value of each button. I hope someone can help me out with this.
This does not work...
{sortable: false,
"render": function ( data, type, full, meta ) {
return '<input type="radio" id="plantManagerApprovalRadio_'+ table.data().count() +'" >'
}// End - "render": function ( data, type, full, meta )
},
This does work...
{sortable: false,
"render": function ( data, type, full, meta ) {
return '<input type="radio" id="plantManagerApprovalRadio_'+ table.data().count() +'" checked >'
}// End - "render": function ( data, type, full, meta )
},
Full script
<script type="text/javascript" src="/js/jquery-current.min.js"></script>
<script type="text/javascript" src="/jquery-ui-1.12.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="/DataTables_Editor/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="/js/dataTables.rowGroup.min.js"></script>
<script type="text/javascript">
var editor; //global for the submit and return data rendering
var table; // global for the data table
//****************************************************************************
//** $(document).ready(function()
//****************************************************************************
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "ssp_xxxxxxx.php",
table: "#approvalTable",
fields: [{label: "Percent of Increase",
name: "xxxPER",
attr: {maxlength:4,
style:"height:20px; width:50px",}
},
{label: "Review Score",
name: "xxxWREV",
attr: {maxlength:3,
style:"height:20px; width:35px",}
},
{label: "Effective Date",
name: "xxxEDT",
attr: {style:"height:20px; width:80px",},
type: "datetime"
},
{label: "Comments",
name: "xxxCOM",
attr: {maxlength:500},
type: "textarea"
},
]
} );
// Activate an inline edit on click of a table cell
$('#approvalTable').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this, {
onBlur: 'submit'
} );
} );
table = $('#approvalTable').DataTable( {
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
fixedColumns: {
leftColumns: 6,
rightColumns: 5
},
scrollX: true,
ajax: "ssp_xxxxxxxx.php",
type: 'POST',
order: [[2, 'asc']],
columns: [
// *** Fixed left columns
{ data: "numeric_month", "visible": false },
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: "xxxLOCD"},
{ data: "month_name"},
{ data: "xxxEMPN" },
{ data: "xxxNAME" },
// *** Scrollable columns
{ data: "xxxMGNA" },
{ data: "xxxMGN2" },
{ data: "xxxMGN3" },
{ data: "xxxMGN4" },
{ data: "xxxMGN5" },
{ data: "xxxRWPER" },
{ data: "xxxWREV" },
{ data: "xxxDNAM" },
{ data: "xxxTITL" },
{ data: "xxxJBGD" },
{ data: "xxxYREG" },
{ data: "xxxWNEW" },
{ data: "xxxWAMT" },
{ data: "xxxDLIN" },
{ data: "xxxSEDT" },
{ data: "xxxMIN" },
{ data: "xxxMID" },
{ data: "xxxMAX" },
{ data: "xxxOCOM" },
{ data: "xxxNCOM" },
// *** Fixed Right columns
// ** Comments Button
{sortable: false,
"render": function ( data, type, full, meta ) {
if(full.xxxWCOM.trim() == ""){
return '<button class="gray button" onclick="openCommentDialog('+ full.xxxEMPN +', \''+ full.xxxNAME +'\' )">Comments</button>';
}else{
return '<button class="blue button" onclick="openCommentDialog('+ full.xxxEMPN +', \''+ full.xxxNAME +'\' )">Comments</button>';
}
}// End - "render": function ( data, type, full, meta )
},
// ** Plant Manager Approval Button
{sortable: false,
"render": function ( data, type, full, meta ) {
return '<input type="radio" id="plantManagerApprovalRadio_'+ table.data().count() +'" >'
}// End - "render": function ( data, type, full, meta )
},
],
columnDefs: [
{"targets": [ 0 ],
"orderData": [ 0, 2 ]
},
{"targets": [ 2 ],
"orderData": [ 0, 2 ]
},
{"className": 'dt-center',
"targets": [ 25, 26, 27, 28, 29, 28]
},
{"targets": [25, 26, 27, 28, 29,28],
"orderable": false
},
{
'targets': [4],
'createdCell': function (td, cellData, rowData, row, col) {
$(td).attr('id', 'employeeID_' + table.data().count());
}
}
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
// { extend: "create", editor: editor },
{ extend: "edit", editor: editor },
// { extend: "remove", editor: editor }
]
} );
} );//END $(document).ready(function()
//************************************************************************
function approveIncrease(){
var rows = table.data().count();
for (i = 1; i < rows; i++) {
var isChecked = $("#plantManagerApprovalRadio_"+ i).attr('checked');
alert(isChecked);
}//* End - for (i = 1; i < row; i++)
}//*End - approveIncrease
</script>
This discussion has been closed.
Replies
Correct - see this article for a full description of the issue.
Basically the user interaction of checking the checkbox does not set the attribute. Instead it sets the property. In jQuery you need to use
$().prop().See also the jQuery documentation on this topic.
Allan
Allan .
Makes sense so I tried...
But even id the user select the button it still shows 'false'
This is driving my batty.
I'd need a link to a page showing the issue please. Or can you create a test case showing the problem using http://live.datatables.net or JSFiddle?
Allan
Allan and I worked off line on this. Fixheader was the culprit.