Variable not getting data on row click
Variable not getting data on row click
bytec
Posts: 37Questions: 10Answers: 0
Hi,
I have the following script that checks if the table has been
initialized before a HTML tabbed menu is clicked, The script works
and produces a dataTables table with the correct data on eack tab click.
The issue I have is when a row is clicked it should open a windows
allowing the record to be edited, but the "recorddata" is not getting
the "RecordID" in this part of the script. Can anyone see why this is not working
$('#myTabContent tbody').on('click', 'tr', function(row, data, index) {
var recorddata = data.row(this).data();
var dataid = recorddata.RecordID;
console.log("You clicked on", dataid);
});
The Full Script
var tabledata;
var hopparecord;
$(document).ready(function() {
$('#myTab a').on('shown.bs.tab', function(event) {
$("#Route").show();
var target = $(event.target).attr("href");
if ($('#myTabContent').find('table').hasClass('table')) {
$('#myTabContent').find('table').DataTable().destroy();
}
// Initialize DataTable for the current tab
$('#myTabContent').find('table').DataTable({
responsive: true,
autoWidth: false,
retrieve: false,
paging: false,
searching: false,
ordering: false,
scrollY: "550px",
scrollCollapse: true,
ajax: {
type: 'POST',
data: {
tab: target
}, // Send tab identifier to the server
dataType: 'json',
url: 'get_hoppa_times.php',
dataSrc: '',
},
language: {
"emptyTable": "There are no times for " + target + ""
},
columnDefs: [{
],
columns: [{
{data: "BusNo",width: '10%'},
{data: "Terminal",width: '10%'},
{data: "BusTime",width: '33%'},
],
error: function(xhr, error) {
console.log(xhr);
console.log(error);
alert("An error occurred while fetching data.");
},
});
$('#myTabContent tbody').on('click', 'tr', function(row, data, index) {
var recorddata = data.row(this).data();
var dataid = recorddata.RecordID;
console.log("You clicked on", dataid);
});
});
});
This question has an accepted answers - jump to answer
Answers
Nothing looks obviously wrong. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Colin
Hi Colin,
Below is a link which contains a small data sample
https://live.datatables.net/bogageye/1/edit?html,css,js,console,output
There is no
id="myTabContent"element on that page. I don't see any Bootstrap tabs, or Bootstrap being loaded either.Can you update your test case to show the issue please?
Allan
Hi all
I have tried to create a test case but having never done one before it's the best I can do.
The issue I have with creating the test case is my scripts make a SLQ call to populate the Tabs. I now have Tabs in the test case but if I click on one it displays data from some where but not the data I have manually hard coded within the test case.
If someone could take a look it would be helpful, tanks.
Well I can make your example work easily enough - I just update the selectors and make a few small changes: https://live.datatables.net/bogageye/4/edit . Clicking on a row will show the data now.
However, that isn't a real reflection of what you are facing I suspect.
Perhaps you can create an example which uses Bootstrap tabs. If you want to Ajax load data, then you can do so based on this example.
I realise that spending time creating a test case is no fun. But I can't debug a problem that I can't see, and I can't create a test case for you when I don't know exactly what your setup is (it also isn't possible to provide that level of support for free since I often get 30+ support requests per day), so I'm afraid there needs to be a bit of onus on yourself to help me help you
The other option of course is just to give me a link to your page, but I know that might not always be possible.
Allan
Hi Allan, the edit you made produces the result I was trying to achieve. Many thanks for your time and second pair of eyes.