Rendered input radio undefined when selected

Rendered input radio undefined when selected

bbrindzabbrindza Posts: 299Questions: 68Answers: 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>

Replies

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    edited December 2017

    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

  • bbrindzabbrindza Posts: 299Questions: 68Answers: 1

    Allan .
    Makes sense so I tried...

     var isChecked = $("#plantManagerApprovalRadio_"+ i).prop('checked');
      alert(isChecked);
    

    But even id the user select the button it still shows 'false'

    This is driving my batty.

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    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

  • bbrindzabbrindza Posts: 299Questions: 68Answers: 1

    Allan and I worked off line on this. Fixheader was the culprit.

This discussion has been closed.