Hiding element in row details (Server-side)

culter

Hi, I have implemented this Ajax loaded row details https://datatables.net/blog/2017-03-31.
I would like to hide part of the row details and unhide it after click on a button. I tried to create function and add the button in the rows detail, but it's not working properly.

When I click on the button, it hides the div element I want, but when I open another row detail, the next button is showing/hiding the element in previous row.

This is my script:

function format (rowData) {
        var div = $('<div/>')
        .addClass( 'loading' )
        .text( 'Loading...' );

    $.ajax( {
        url: 'scripts/details.php',
        data: {
            name: rowData[0]
        },
        dataType: 'json',
        type: 'post',
        success: function ( json ) {
            console.log(json);
            var childTable = '<div id="rowdetails">';
            childTable = childTable.concat(
                '<div class="row rdstyle">' +
                '<button onclick="myFunction()">Click Me</button>' +
                '<div id="myDIV">' +
                'This is my DIV element.' +
               '</div>'
              ...
}


function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

and also an error is raised :Uncaught TypeError: Cannot read property '0' of undefined on line 9

Thank you

colin

Hi @culter ,

There's a lot going on there - it would help if you could link to your page or create a test case. 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.

Cheers,

Colin