Variable not getting data on row click

bytec

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);
    });

    });
});

colin

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

bytec

Hi Colin,
Below is a link which contains a small data sample

https://live.datatables.net/bogageye/1/edit?html,css,js,console,output

allan

$('#myTabContent tbody')

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

bytec

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.

allan

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

bytec

Hi Allan, the edit you made produces the result I was trying to achieve. Many thanks for your time and second pair of eyes.