Bootstrap, editor close button is multiplying

zajc

The issue is that editor "close" button is multiplying if we create table and subtable.

Very simple example: https://zajc.xyz/close/close.php

1.) Clik on the first row in the main table.
2.) Click on Edit button and close the editor.
3.) Click the "+" sign and then again select the first row of the main table and choose "Edit" again.
4.) Now you can see 2 close buttons for the editor on the main table.

This is the code for the close button:

<button class="close">×</button>
<button class="close">×</button>

I don't see what is the problem with the following JS:

function format(d) {
  // `d` is the original data object for the row
  return '<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="close2' +
    '" width="75%">' +
    '<thead>' +
    '<tr>' +
    '<th>Column1</th>' +
    '<th>Column2</th>'
  '</tr>' +
  '</thead>' +
  '</table>';
}
(function($) {
  $(document).ready(function() {
    var editor = new $.fn.dataTable.Editor({
      ajax: 'php/close.php',
      table: '#close',
      fields: [{
        "label": "Column1",
        "name": "column1"
      }, {
        "label": "Column2",
        "name": "column2"
      }]
    });
    var table = $('#close').DataTable({
      ajax: 'php/close.php',
      columns: [{
        "class": "details-control",
        "orderable": false,
        "data": null,
        "defaultContent": ""
      }, {
        "data": "column1"
      }, {
        "data": "column2"
      }],
      select: true,
      lengthChange: false
    });
    new $.fn.dataTable.Buttons(table, [{
      extend: "create",
      editor: editor
    }, {
      extend: "edit",
      editor: editor
    }, {
      extend: "remove",
      editor: editor
    }]);
    table.buttons().container()
      .appendTo($('.col-sm-6:eq(0)', table.table().container()));
    // Add event listener for opening and closing details
    $('#close tbody').on('click', 'td.details-control', function() {
      var tr = $(this).closest('tr');
      var row = table.row(tr);

      if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
      } else {
        var d = row.data();
        // Open this row
        row.child(format(d)).show();
        tr.addClass('shown');
        // Re-initialize DataTables for the child row(s)
        var editor2 = new $.fn.dataTable.Editor({
          ajax: {
            "url": "php/close.php",
          },
          table: '#close2',
          fields: [{
            "label": "Column1",
            "name": "column1"
          }, {
            "label": "Column2",
            "name": "column2"
          }]
        });
        var table2 = $('#close2').DataTable({
          ajax: {
            "url": "php/close.php"
          },
          columns: [{
            "data": "column1"
          }, {
            "data": "column2"
          }],
          select: true,
          lengthChange: false,
          searching: false,
          info: false,
          paging: false
        });
        new $.fn.dataTable.Buttons(table2, [{
          extend: "create",
          editor: editor2
        }, {
          extend: "edit",
          editor: editor2
        }, {
          extend: "remove",
          editor: editor2
        }]);
        table2.buttons().container()
          .appendTo($('.col-sm-6:eq(0)', table2.table().container()));
      }
    });
  });
}(jQuery));

allan

Thanks very much for letting me know about this! Its an error in the way the Editor / Bootstrap integration operates when multiple instances of Editor are used on a page.

I've committed the fix locally and it will be in 1.5.6 which I expect to release in a week or two, but in the mean time, if you'd like to apply the fix locally, if you open the file editor.bootstrap.js and find the init function and replace it with:

    "init": function ( dte ) {
        // init can be called multiple times (one for each Editor instance), but
        // we only support a single construct here (shared between all Editor
        // instances)
        if ( ! self._dom.content ) {
            self._dom.content = $(
                '<div class="modal fade">'+
                    '<div class="modal-dialog">'+
                        '<div class="modal-content"/>'+
                    '</div>'+
                '</div>'
            );

            self._dom.close = $('<button class="close">&times;</div>');

            self._dom.close.click( function () {
                self._dte.close('icon');
            } );

            $(document).on('click', 'div.modal', function (e) {
                if ( $(e.target).hasClass('modal') && self._shown ) {
                    self._dte.background();
                }
            } );

            dte.on( 'open.dtebs', function ( e, type ) {
                if ( type === 'inline' || type === 'bubble' ) {
                    $('div.DTE input[type=text], div.DTE select, div.DTE textarea').addClass( 'form-control' );
                }
            } );
        }

        return self;
    },

That will address the issue.

Regards,
Allan

zajc

I have added your fix and it is working now. Thank you for the quick response.