Answers

• allan Posts: 65,347Questions: 1Answers: 10,841 Site admin

  October 6

  No you aren't the only one - I'm seeing that as well. Thanks for letting me know - I'll post back when I've got a fix.

  Allan
• allan Posts: 65,347Questions: 1Answers: 10,841 Site admin

  October 6 Answer ✓

  Could you try the following in place of the dataTables.jqueryui.js file from the download package please - it should fix the issue:

  /*! jQuery UI integration for DataTables' Editor
   * © SpryMedia Ltd - datatables.net/license
   */
  
  var doingClose = false;
  
  /*
   * Set the default display controller to be our foundation control 
   */
  DataTable.Editor.defaults.display = "jqueryui";
  
  /*
   * Change the default classes from Editor to be classes for Bootstrap
   */
  var buttonClass = "btn ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
  $.extend( true, DataTable.Editor.classes, {
      form: {
          button:  buttonClass,
          buttonInternal:  buttonClass,
          buttonSubmit: buttonClass
      }
  } );
  
  var dialouge;
  
  /*
   * jQuery UI display controller - this is effectively a proxy to the jQuery UI
   * modal control.
   */
  DataTable.Editor.display.jqueryui = $.extend( true, {}, DataTable.Editor.models.displayController, {
      init: function () {
          if (! dialouge) {
              dialouge = $('<div class="DTED"></div>')
                  .css('display', 'none')
                  .appendTo('body')
                  .dialog( $.extend( true, DataTable.Editor.display.jqueryui.modalOptions, {
                      autoOpen: false,
                      buttons: { "A": function () {} }, // fake button so the button container is created
                      closeOnEscape: false // allow editor's escape function to run
                  } ) );
  
              dialouge.data("uiDialog")._focusTabbable = function(){}; 
          }
  
          return DataTable.Editor.display.jqueryui;
      },
  
      open: function ( dte, append, callback ) {
          dialouge
              .children()
              .detach();
  
          dialouge
              .append( append )
              .dialog( 'open' );
  
          $(dte.dom.formError).appendTo(
              dialouge.parent().find('div.ui-dialog-buttonpane')
          );
  
          dialouge.parent().find('.ui-dialog-title').html( dte.dom.header.innerHTML );
          dialouge.parent().addClass('DTED');
  
          // Modify the Editor buttons to be jQuery UI suitable
          var buttons = $(dte.dom.buttons)
              .children()
              .addClass( 'ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only' )
              .each( function () {
                  $(this).wrapInner( '<span class="ui-button-text"></span>' );
              } );
  
          // Move the buttons into the jQuery UI button set
          dialouge.parent().find('div.ui-dialog-buttonset')
              .children()
              .detach();
  
          dialouge.parent().find('div.ui-dialog-buttonset')
              .append( buttons.parent() );
  
          dialouge
              .parent()
              .find('button.ui-dialog-titlebar-close')
              .off('click')
              .on('click', function () {
                  if ( ! doingClose ) {
                      dte.close('icon');
                  }
              });
  
          // Need to know when the dialogue is closed using its own trigger
          // so we can reset the form
          $(dialouge)
              .off( 'dialogclose.dte-ju' )
              .on( 'dialogclose.dte-ju', function () {
                  if ( ! doingClose ) {
                      dte.close();
                  }
              } );
  
          if ( callback ) {
              callback();
          }
      },
  
      close: function ( dte, callback ) {
          if ( dialouge ) {
              // Don't want to trigger a close() call from dialogclose!
              doingClose = true;
              dialouge.dialog( 'close' );
              doingClose = false;
          }
  
          if ( callback ) {
              callback();
          }
      },
  
      node: function () {
          return dialouge.parent()[0];
      }
  } );
  
  
  DataTable.Editor.display.jqueryui.modalOptions = {
      width: 600,
      modal: true
  };
  

  Allan
• dte1 Posts: 6Questions: 2Answers: 0

  October 12

  Hello Allan, sorry for the late reply!
  As far as I can tell, your fix works.
  The select boxes now remain visible. I haven’t noticed any side effects, though I also wasn’t quite sure what exactly to look for
  Thanks a lot for your quick work!

  Ilja
• allan Posts: 65,347Questions: 1Answers: 10,841 Site admin

  October 13

  Hi Ilja,

  The problem was with the focus capture. jQuery UI tries to keep the focus inside the dialouge box, which is a good idea, but the date picker is added to the document outside of it.

  So what I did was to disable jQuery UI's focus capture, and use Editor's, which does account for the picker.

  Allan
• dte1 Posts: 6Questions: 2Answers: 0

  November 16

  Hi Allan,

  Is it possible that the same (or at least a similar) issue occurs when I use inline editing for tag fields? Clicking on 'Add' expands the selection list. As soon as I select an entry from the list, the tag editor disappears without saving the new value.

  Ilja
• allan Posts: 65,347Questions: 1Answers: 10,841 Site admin

  November 17

  Hi Ilja,

  I don't think so as there is no jQuery UI focus capture when doing inline editing.

  Are you able to give me a link to a page showing the issue so I can check it out please?

  Thanks,
  Allan