Solved

jquery datable not binding to dom

Posted on 2014-02-12
6
566 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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

707 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

12 Experts available now in Live!

Get 1:1 Help Now