Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 665
  • Last Modified:

jquery datable not binding to dom

New to jquery datables, I need to expand some existing code and revise a table.  There need to be 2 check boxes and one dropdown added per row.  I expanded the aoColumns section of the datable definition using fnRender to return the html for the controls with a unique name for each control.  The checkboxes and dropdown display correctly.

But I'm unable to get the results of the user's actions.  Every row has a button to click that in effect processes what the user has done in that row.  In fnDrawCallback, is a click event for that button.

The click event starts like this:

                    var aPos = oTable.fnGetPosition(this.parentNode);
                    var aData = oTable.fnGetData(aPos[0]);
                   
but the aData value for the columns I'm interested is just the original html returned from fnRender.  I tried this using a key that I confirmed in the F12 Developer Tools output, but both are null or undefined:

            var trade = $('#cbTrade-700-068616-2124:checked').val();
            var trade2 = document.getElementById('cbTrade-700-068616-2124');

Thinking that the it's an issue with the timing of events, I tried to set a handler for the checkbox with an event under fnDrawCallback:

$('#example tbody td.cbox').click(function(sValue) {
                   
I'm expecting that sValue represents the user's actions on the control but again it's just the original html from fnRender.  

I think that I'm missing something basic here but just not sure what it is.
0
jkavx
Asked:
jkavx
  • 3
  • 3
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I don't think you should rely on what you see in the console for data tables.  Instead, treat it as if you were using just your raw table code.  I created a shortened example from their zero config sample http://jsbin.com/budaz/1/

You can see I can easily get the data from the checked value.

$(document).ready(function(){
  $('#example').dataTable();
});
$('.engine').change(function(){
   alert($(this).val());
  
});

Open in new window

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
 
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
 
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

  <meta charset="utf-8">
  <title>padas</title>
</head>
<body>
  <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
  <thead>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</thead>
	<tbody>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="engine" value="234">234</td>
			<td>Internet
				 Explorer 4.0</td>
			<td>Win 95+</td>
			<td class="center"> 4</td>
			<td class="center">X</td>
		</tr>
		<tr class="even gradeC">
			<td><input type="checkbox" class="engine" value="352">352</td>
			<td>Internet
				 Explorer 5.0</td>
			<td>Win 95+</td>
			<td class="center">5</td>
			<td class="center">C</td>
		</tr>
		<tr class="odd gradeA">
			<td><input type="checkbox" class="engine" value="923">923</td>
			<td>Internet
				 Explorer 5.5</td>
			<td>Win 95+</td>
			<td class="center">5.5</td>
			<td class="center">A</td>
		</tr>
      
  </tbody>
    <tfoot>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</tfoot>
  </table>
</body>
</html>

Open in new window

Perhaps update the jsbin I created with a shortened version of your own code and lets take a look at what you are doing.
0
 
jkavxAuthor Commented:
Thx.  Sorry for the slow response.  Here's a portion of the code.  The table displays correctly and the checkbox on click event gets the value for the user action.  But the problem is with the addRowSubmit click event in fnDrawCallback.  I'm unable to get the checkbox value from the row.

function LoadGridData() {
    $("#example").dataTable().fnDestroy();
    $("#example").attr('width', 1240);
    var oTable = $('#example').dataTable({ "bPaginate": true,
        "sPaginationType": "bootstrap",
        "bAutoWidth": "false",
        "sAjaxSource": "data/acc_data.json",
        "aoColumns": [{
            "mData": "AccountNumber", "sClass": "read",
            "fnRender": function(oObj) {
                var string = oObj.aData.AccountNumber;
                var length = string.length;
                var str = string.substr(0, 3) + '-' + string.substr(3, length);
                var account = str + ' / ' + oObj.aData.AccountDetailsObject.NM_AcctLong;
                return (account);
            }
        }, {
            "mData": "AccountDetailsObject.CanWire", "sClass": "read",
            "fnRender": function(oObj) {
                strVal = "N";
                strChecked = "";
                if (oObj.aData.AccountDetailsObject.CanWire) {
                    strVal = "Y";
                    strChecked = "checked ";
                }

                var account = (oObj.aData.AccountNumber).split(' /');
                var sKey = account[0] + '-' +
                    oObj.aData.AccountDetailsObject.ContactId;
                
                return ('<input type="checkbox" ' + strChecked +
                            'onclick="fnCbClicked(\'' + account[0] + '\', ' +
                                oObj.aData.AccountDetailsObject.ContactId + ', this.checked, \'W\')" name="cbTrade-' +
                                sKey + '" value="' + strVal + '"></input>');
            }
        }, { "mData": null, "sClass": "addRow alignCenter", "bSortable": false,
            "fnRender": function(oObj) {
                return ('<div class="addRowSubmit addIcon" id="addButton-' + account[0] + '-' + oObj.aData.AccountDetailsObject.ContactId + '" ></div>');
            }
}],
            "fnDrawCallback": function(oSettings, json) {
                $('#example tbody td div.addRowSubmit').click(function(sValue) {
                    var commonAccountNumber = [];
                    editedRow = [];
                    var aPos = oTable.fnGetPosition(this.parentNode);
                    var aData = oTable.fnGetData(aPos[0]);
                    editedRow = aData;
                    
????? how to get the checkbox value at this point.  The code below is not working
                    
                    var val = $(editedRow).find('input:checked').is(':checked');
                    if (val) {
                                var checkedRows = $(row).find('input:checked')[0].id;
                                var value = ($(row).find('input:checked')[0].value).split(',');
                                var checkedValue = checkedRows.split('-');
                                alert(checkedValue[0]);
                    }

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Please update this bin http://jsbin.com/sujete/1/edit with your complete example and I will take a look.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
jkavxAuthor Commented:
Thanks but this is a corporate project so I can't upload much more than I did above.  Possibly someone will see what's wrong at the end of what I uploaded - why can't I get information about the controls in the row?
0
 
jkavxAuthor Commented:
I've requested that this question be deleted for the following reason:

No answer after weeks.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The idea is to create test data so we can see what the issues are.  We don't expect you to give us your private data.  However,  you can easily create a test case just using sample data http://www.sscce.org/.    The reasons for things not working are many times beyond the code you think it is.

While setting up a test case could take a bit of work on your part, I think you would have more participation in this question with a full sample and especially in working with a project like datatables.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now