JQuery Datatables - Need Dialog that pops up value from hidden column

I am attempting to build an FAQ tool using dataTables and I am trying to add code that will display a dialog box when a row is clicked on the table.

However, the field (Column 4) is hidden using the dataTables configuration and I wanted  to display this value in a pop up dialog.  Code is below for the table and the click function. Right now it is not triggering at all and now the Search box can't be used anymore.

I am trying to validate the value first by just displaying it as an alert.  Let me know if I am missing a component.

$(document).ready(function() {
    $('#faq_table').DataTable( {
      "columns": [
    { "bSortable": false },
    { "bSortable": false },
    { "visible": false },
    { "visible": false },
    { "visible": false },
    { "visible": false }
  ],
   "columnDefs": [
    { "width": "50px", "targets": 2 }
  ],
        "bPaginate": false,
        "bInfo": false    
    } );

$('#faq_table tbody td').click( function () {
    // Get the position of the current data from the node
    dataTable = $('#faq_table');
    var aPos = dataTable.fnGetPosition( this );
     
    // Get the data array for this row
    var aData = dataTable.fnGetData( aPos[4] );
    alert(aData);

} );

});

Open in new window



THIS IS THE HTML for the page if it helps.

<style>

#faq_table {
    width: 75% !important;
}
.ui-widget {
        font-size: .7em !important;
}

.datatables_filter {
position:absolute;
float: left;
top: -40px;
left: 10px;
}

td 
{ font-size: 14px !important; }

th {    
    display:none;   
}

.dumbBoxWrap { /* The div that shows/hides. */ display:none; /* starts out hidden */ z-index:40001; /* High z-index to ensure it appears above all content */ } 

.dumbBoxOverlay { /* Shades out background when selector is active */ position:fixed; width:100%; height:100%; background-color:black; opacity:.5; /* Sets opacity so it's partly transparent */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE transparency */ filter:alpha(opacity=50); /* More IE transparency */ z-index:40001; } 

.vertical-offset { /* Fixed position to provide the vertical offset */ position:fixed; top:30%; width:100%; z-index:40002; /* ensures box appears above overlay */ } 

.dumbBox { /* The actual box, centered in the fixed-position div */ width:400px; /* Whatever width you want the box to be */ position:relative; margin:0 auto; /* Everything below is just visual styling */ background-color:white; padding:10px; border:1px solid black; } 

</style>

<link rel="stylesheet" type="text/css" href="http://pghcc.jnj.com/Style%20Library/Includes/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://pghcc.jnj.com/Style%20Library/Includes/datatables/jquery.dataTables-1.10.5.min.css">
<link rel="stylesheet" type="text/css" href="http://pghcc.jnj.com/Style%20Library/Includes/tabletools/dataTables.tableTools.css">


<textarea id="jsoninfo"></textarea>
<textarea id="jsoninfo2"></textarea>
 
<script type="text/javascript" src="http://pghcc.jnj.com/Style%20Library/Includes/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://pghcc.jnj.com/Style%20Library/Includes/jquery.SPServices-0.7.2.min.js"></script>
<script type="text/javascript" src="http://pghcc.jnj.com/Style%20Library/Includes/jquery.SPServices-0.7.2.min"></script>
<script type="text/javascript" src="http://pghcc.jnj.com/Style%20Library/Includes/json2.js"></script>
<script type="text/javascript" src="http://pghcc.jnj.com/Style%20Library/Includes/omreports_faq.js"></script>
<script type="text/javascript" src="http://pghcc.jnj.com/Style%20Library/Includes/jquery-ui.js"></script>
<script type="text/javascript" src="http://pghcc.jnj.com/Style%20Library/Includes/datatables/jquery.dataTables-1.10.5.min.js"></script>

<script type="text/javascript"> 

$(document).ready(function() {         

//Show modal box         
$('#openModal').click(function()
{
$('.dumbBoxWrap').show();
});         

//Hide modal box         
$('#closeModal').click(function() 
{
$('.dumbBoxWrap').hide();
});
}); 
</script> 

<table>
<tr>
<td height="100px"><b>O&M Reports FAQ Search (Beta)</b></td>
</tr>
</table>
<p>

<table id="faq_table" class="display">
<thead>
<tr>
<th id="question">Question</th>
<th id="answer">Answer</th>
<th id="keywords">Keywords</th>
<th id="cat1">Category1</th>
<th id="cat2">Category2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

<div class="dumbBoxWrap"> 
<div class="dumbBoxOverlay">&nbsp;</div>     
<div class="vertical-offset"> 
<div class="dumbBox">Content goes here</div> 
</div> 
</div>

Open in new window

aehrenwoTechnology AnalystAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

F IgorDeveloperCommented:
Try using index 0 instead of 4. When you select from cells (TD) the function returns an array with one item (row). And then you can access the cell using aData[cellPosition].


Try this code

....
//get Row
var aData = dataTable.fnGetData( aPos[0] );
console.log(aData);
//get cell position 4
var celldata=aData[4]);
console.log(cellData);

Open in new window

0
aehrenwoTechnology AnalystAuthor Commented:
I am assuming I needed to define what "dataTable" is in the code, Also I am getting this error in the Console... Uncaught ReferenceError: aPos is not defined

What needs to be adjusted?  for the final code I am trying to click on a cell and then get a value from a different (hidden) column in the same row.  Would the "this" reference work for that purpose?

/get Row
oTable = $('#faq_table');
var aData = oTable.fnGetData( aPos[0] );
console.log(aData);
//get cell position 4
var celldata = aData[4];
console.log(cellData);

Open in new window

0
aehrenwoTechnology AnalystAuthor Commented:
I was able to get the value using instruction from API once i knew where to look... thanks for suggestion

$(document).ready(function() {
var table = $('#faq_table').DataTable();
 
$('#faq_table tbody').on( 'click', 'tr', function () {
var rowval = table
        .row( this )
        .index();

    console.log(rowval);
    console.log(table.cell( rowval, 3 ).data());  
});
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
aehrenwoTechnology AnalystAuthor Commented:
I was able to locate the necessary code  from DataTables API reference
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

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.