Solved

jquery datable not binding to dom

Posted on 2014-02-12
6
573 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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
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…

839 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