Solved

jquery datable not binding to dom

Posted on 2014-02-12
6
569 Views
Last Modified: 2014-04-16
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
Comment
Question by:jkavx
  • 3
  • 3
6 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39855679
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
 

Author Comment

by:jkavx
ID: 39860943
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39860995
Please update this bin http://jsbin.com/sujete/1/edit with your complete example and I will take a look.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:jkavx
ID: 39861083
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
 

Author Comment

by:jkavx
ID: 40004726
I've requested that this question be deleted for the following reason:

No answer after weeks.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40003440
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

948 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now