How to access modal node after open event?

Maha80

Hi Allan,

I have written an own input field type plugin with d3.js:

http://derselbstversorger.com/wip/
Please move to step #2

The plugin has a custom resize function, which should be triggered when the modal is COMPLETELY loaded at fist time in order to fit it into the modal.

I do this as follows:

editor.one( 'open', function ( e, o ){
...

// alert( 'Editor '+type+' form shown' );
editor.field('runtime').resize();
....

The resize function of the field type plugin does the following:

conf._resize = function (){

   if(parseInt(d3.select('#'+conf.id).size())>0){

       width = d3.min([parseInt(d3.select('#'+conf.id).style("width")), initWidth]) - margin.right - margin.left;
          
   ...
   }
}

The Problem is that ('#'+conf.id) is not yet available at this time (only after the modal has been displayed once).

If I alert something in the .one function before, it works however without beeing displayed first.

It seems that the open event is fired before the modal node has been computed.

How can I fix this issue?

Thank you for your help.

Kind regards

Martin

allan

Hi Martin,

As you are using the Bootstrap modal provider, we can use the Bootstrap events to know when the modal is fulyl displayed.

The tricky bit is getting a reference to the modal DOM element. You can do this using the DataTable.Editor.display.bootstrap._dom.content property:

$( DataTable.Editor.display.bootstrap._dom.content ).on( 'shown.bs.modal', function () {
  ...
} );

Its a little bit of a cludge that - I will look at adding a new API to get the display controller container.

Regards,
Allan

Maha80

Dear Allan,

thx for your quick response.

Unfortunately the reference given does not work.

Datatable.Editor.display.bootstrap is undefinded.

Using

Datatable.Editor.__proto__.constructor.prototype.constructor.display.bootstrap._dom.content

works for me, but does not look nice.

Is there a better way of referencing to the dom content?

Kind regards

Martin

Maha80

I am sorry, the working reference is like this

Datatables.Editor.constructor.display.bootstrap._dom.content

Is there a cleaner way to access the dom node without the constructor property?

allan

Oops sorry! This is what I should have add earlier:

$.fn.DataTable.Editor.display.bootstrap._dom.content

That will give you the Bootstrap modal.

Allan