Answers

• allan Posts: 63,531Questions: 1Answers: 10,475 Site admin

  September 2019

  Are you using Editor's own modal or the integrated Bootstrap one? Bootstrap only allows a single modal at a time with its own control, so if you wanted multiple modals on screen at a time you'd need to use Editor own modal.

  You can ensure it has a high z-index to appear on top of other things using:

  div.DTED DTED_Lightbox_Wrapper {
    z-index: 65000;
  }
  

  Allan
• rldean1 Posts: 141Questions: 66Answers: 1

  September 2019

  Okay, so setting the css for div.DTED_Lightbox_Wrapper is an option, but I can't interact with the Editor form inputs, probably because Bootstrap's modal "still has control", and I would need to research that.

  I'd like to share with you and everyone else the strategy I came up with... It's probably stupid (and highly customized for my particular situation), but here it is:

  1) I destroy the table when the main modal is closed:

                      $("#universalModal").on("click", "button", function (e) {
  
                          // if the main bootstrap modal was explicitly closed
                          if (e.currentTarget.className == 'close') {
                              // destroy the table
                              if ($.fn.DataTable.isDataTable('#tblCluster')) { tblCluster.destroy(true) };
                          };
                      });
  

  2) If creating or removing a record, NOT inline editing, I expect an Editor form, so I hide the main modal

                      }).on('open', function (e, mode, action) {
                          // hide the Bootstrap modal to allow Editor form visibility
                          if (action == 'create' || action == 'remove') {
                              $("#universalModal").modal('hide');
                          };
  

  3) If the Editor form was closed, either manually, or through internal workings, go back to the main modal

                      }).on('close', function (e) {
                          // if the main modal is missing the show class, then show it
                          if (!$("#universalModal").hasClass('show')) {
                              $("#universalModal").modal('show');
                          };
                      });
  
• allan Posts: 63,531Questions: 1Answers: 10,475 Site admin

  September 2019

  Interesting. Thank you for sharing that.

  Allan
• rldean1 Posts: 141Questions: 66Answers: 1

  September 2019

  Hey @allan

  So...... I've run into the another problem, and I can't figure it out... Note: I'm using the Bootstrap-integrated forms.

  My example above kinda works, but the .modal-open class is being removed from body by something internal in Editor, I think.

  During the .on('close', function () event, I use .modal('show') to re-open the original modal. This is supposed to automatically add .modal-open to body, but I think something else in Editor is taking over...

  Basically, I can't get .modal-open to "stick" to body after Editor closes its own forms.

  What's the best way for me to re-open or call my original modal? How do I wait for the Editor close operations to be fully completed before I call my original modal $(#universalModal").modal('show') again?

  Note: I tried to listen for something like $("body").on('hidden.bs.modal', '.modal.DTED', function (e) {}, but I think that Editor is totally removing its own forms from the DOM completely, so the event never bubbles up anywhere.
• allan Posts: 63,531Questions: 1Answers: 10,475 Site admin

  September 2019

  Are you using Bootstrap 3 or 4? I've been working on an update for different issue which I think should also help here.

  Thanks,
  Allan
• rldean1 Posts: 141Questions: 66Answers: 1

  September 2019

  This particular scenario is using Bootstrap 4.
• Taylor74 Posts: 7Questions: 2Answers: 0

  April 2020

  Hi @allan ,

  I am running into the same issue as the original question on this post. The z-index modification brings the create/edit box in front of the bootstrap modal, but I am still unable to type in the input box until the bootstrap modal is closed (same issue that raydlevel5 mentioned above).

  Sorry if this is answered elsewhere, I searched quite a bit but this was the only thread I could find. Might you have any less "customized" suggestions at this point than what raydlevel5 has come up with? (I am using Bootstrap 3)

  Thank you!
  Taylor
• rf1234 Posts: 3,000Questions: 87Answers: 421

  April 2020 edited April 2020

  This works with Bootstrap 3; I've been using it frequently for quite some time. I can open only one Bootstrap 3 modal at a time as Allan states above.

  So if you only need one data table in a modal at a time this should be relevant for you. If not: This is the time to stop reading!

  I also searched for this: div.DTED DTED_Lightbox_Wrapper
  But it wasn't in my code anywhere ... I guess it is not relevant if you use the built in Bootstrap 3 modal for the Data Table.

  The Editor modal opens neatly in this code as well - on top of the Bootstrap 3 modal. Here are two screenshots:
  1. The Bootstrap 3 modal with the Data Table:

  
  2. The Editor popup to create a new entry hitting the "New" button. (It covers the tiny data table completely in this case - but it doesn't matter and of course it isn't like that with bigger Data Tables in larger modals):

  

  This is a button that opens a Data Table in a Bootstrap 3 modal and it also has an Editor instance.

  The button to open the modal (button of the parent table "user"):

  //custom button to create and edit user addresses
  $.fn.dataTable.ext.buttons.userAddress = {
      //only enabled when one row is selected (like edit / delete)
      extend: 'selectedSingle', //alternative would be 'selected' (multiple rows)
      text: 'yourText',
      className: "userAddressButton",
      action: function ( e, dt, button, config ) {
          var selected = dt.row({ selected: true });
          if (selected.any()) {
              $('.userAddressButton').attr(
                  {
                      "data-toggle": "modal",
                      "data-target": "#userAddressModal"
                  }
              );
              showUserAddressTable();
          }
      }
  };
  

  The function with the Editor and the Data Table (part of it). If you are not destroying the data table if it exists - which is not required - make sure you set the "retrieve"
  option. In addition - since this is only a small table in a modal - I changed a couple of defaults regarding fixedHeader, paging and the like:

  var showUserAddressTable = function() {  
      
      if ( typeof userAddressEditor !== 'undefined' ) {
          userAddressEditor.off('open submitSuccess');
          userAddressEditor.destroy();
      }
      
      if ( typeof userAddressTable !== 'undefined' ) {
          userAddressTable.columns.adjust();
      }
  
      var userAddressEditor = new $.fn.dataTable.Editor( {
  .....
      var userAddressTable = $('#tblUserAddress').DataTable( {
          dom: "Bti",
          fixedHeader: false,
          paging: false,
          retrieve: true,
          colReorder: false,
  ....
  

  and finally the HTML:

  <!--tblUserAddress: User addresses-->
  <div class="container">
      <div class="modal fade" id="userAddressModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header" id="userAddressHeader">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" style="text-align:justify"><span class="userAddressHeader"><?php echo $en?("User Addresses"):('Nutzer Adressen');?></span></h4>
                  </div>
                  <div class="modal-body">        
                      <table id="tblUserAddress" class="table table-striped table-bordered"
                             cellspacing="0" width="100%">
                          <thead>
                              <tr>
                                  <th><?php echo $en?('Type'):('Art');?></th>
                                  <th><?php echo $en?('Address Line 1'):('Adresszeile 1');?></th>
                                  <th><?php echo $en?('Address Line 2'):('Adresszeile 2');?></th>
                                  <th><?php echo $en?('Address Line 3'):('Adresszeile 3');?></th>            
                              </tr>
                          </thead>
                      </table>     
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-primary" data-dismiss="modal"><?php echo $en?('Close'):('Schliessen');?></button>
                  </div> 
              </div>
          </div>
      </div>
  </div>
  

  You might need this as well in order to make sure Editor is not hidden behind the Bootstrap 3 modal. This code must run before Editor and DT initialization.

  //Editor default settings!
  $.extend( true, $.fn.dataTable.Editor.defaults, {
      formOptions: {
          main: {
              onBackground: 'none'
          },
          bubble: {
              onBackground: 'none'
          }
      }
  });
  
• rf1234 Posts: 3,000Questions: 87Answers: 421

  April 2020

  This thread inspired me to come to my solution. Kaustubh did a great job!
  https://datatables.net/forums/discussion/comment/127970/#Comment_127970
• Taylor74 Posts: 7Questions: 2Answers: 0

  April 2020

  @rf1234 Thank you!!