opening en closing child windows

Ficos

I would like the old child window (when open) to be closed on opening a new one.

    var oldRow = null;
    
    // Add event listener for opening and closing details
    $('#client10 tbody').on('click', 'td.details-control', function () {
        var tr = $(this).parents('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
            oldRow = null;
        }
        else {
          if (oldRow != null){
            jQuery('#client10 > tbody > tr > td:first-child > img').attr('src', '../images/details_open.png');
            //    oTable.fnClose( oldRow );          
            oldRow.child.hide();
            tr.removeClass('shown');
            oldRow = null;
          }
          // Open this row
          row.child( format(row.data()) ).show();
          tr.addClass('shown');
          oldRow = row;
        }
    });

I tried to combine the old (1.9) version with this new one. It works, but the image (details_open.png) is not replaced.

allan

Here is a modification of my example which will hide any other open rows: http://live.datatables.net/waburuz/1/edit .

It does this but finding any rows which have the class .shown and then simply triggering the click function to hide them:

          if ( table.row( '.shown' ).length ) {
              $('td.details-control', table.row( '.shown' ).node()).click();
          }

Regards,
Allan

Ficos

in this:
http://localhost/oostveen-advies-secure/faktuur10/ix_faktuur.html?id=fbp7p8l06kph8v0j8104n7ala2
there is no data of the selected row available....

Can you help me?

Ficos

In the child there seems no data available. Maybe I forgot something, but pressing the selection button does n't give the detail information. Error: undefined.

allan

Hi,

The link given was to localhost - could you possibly update it to a publicly accessible URL so I can take a look?

Thanks,
Allan

Ficos

Sorry, https://www.ficos.nl/oostveen-advies/faktuur10/ix_faktuur.html?id=5h7vub6oooaf197b0a65fg2ks5

In the child there seems no data available. Maybe I forgot something, but pressing the selection button does n't give the detail information. Error: undefined.

tangerine

@Ficos:
According to the console, the first item in the table returns this data for its child:

{"aaData":[{"id":"5806","FAKTUURNR":"3719","SOORT":"68","OMSCHRIJVING":"jaaraangifte omzetbelasting","FISCJR":"2012","NETTO":"75","BTWCODE":"1","BTW":"15.75"},{"id":"5807","FAKTUURNR":"3719","SOORT":"200","OMSCHRIJVING":"informatieverstrekking","FISCJR":"","NETTO":"22","BTWCODE":"1","BTW":"4.62"},{"id":"5808","FAKTUURNR":"3719","SOORT":"300","OMSCHRIJVING":"aangifte inkomstenbelasting","FISCJR":"2011","NETTO":"160","BTWCODE":"1","BTW":"33.6"}]}

But your alert asks for something else:
alert(data[1].OMSCHRIJVING);

But I might be misunderstanding the chain of events.

Ficos

0 // Add event listener for opening and closing details
    $('#faktuur04 tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        alert(row.OMSCHRIJVING);
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );

the problem is that row should contain the data of the selected row, but it's empty.

mxsquid

Thank you Allan. Your readers should be made aware that your change should be applied to examples/api/row_details.html at about line 77 for DT 1.10.0

Ficos

Problem solved:

 // Add event listener for opening and closing details
    $('#faktuur04 tbody').on('click', 'td.details-control', function () {
      var tr = $(this).parents('tr');
      var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
          if ( table.row( '.shown' ).length ) {
              $('td.details-control', table.row( '.shown' ).node()).click();
          }
          
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );

allan

@Ficos - to confirm, is your fix to use $().parents() rather than $().closest()? The latter should work!

In the example link you have d.FAKTUUNR in the format function, but the variable is called FAKTUURNR (extra R) in the data object.

Might that be the problem?

Regards,
Allan