Custom plugin with modal window

Marek_Optima

I have decided to create my own integration with the summernote plugin.
I have done this in such a way, that after clicking the edit button, when editing a line, a window with the WYSIWYG editor opens.
For this propuse, I put the following HTML code in the create function:

                var input = $(
                    `
                    <div id="${safeId}" >
                    <input class="raw pull-left" type="text"/>
                    <button class="btn btn-default" data-ui="open_editor" style="margin-top: -8px; right: -50px; position: absolute;" type="text"><i class="fa fa-font" aria-hidden="true"></i></button>
                        <div class="modal fade" tabindex="-1" role="dialog">
                            <div class="modal-dialog" role="document">
                            <div class="modal-content">
                              <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title">${conf.label}</h4>
                              </div>
                              <div class="modal-body">
                                <div class="summernote"></div>
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary" data-ui="save">Save changes</button>
                              </div>
                            </div>
                        </div>
                    </div>
                    </div>`
                );

On the face of it has seemed that everything is working well, but if it is calling out the window to delete a line, the conflict occurs and this deleting window does not appear.
It seems to me that the problem is with the editor.bootstrap.js file, where there is management of modal windows refers to every window inside the table:

var content = self._dom.content.find('div.modal-content'); // editor.bootstrap.js:171

How could you solve this problem? I do not want to modify the editor.bootstrap.js file by myself because I will have to correct this with every your update.

allan

Could you give me a link to the page showing the issue please?

Bootstrap doesn't support multiple modals being shown at the same time, so I'm not quite sure I understand what is going on here.

Allan

Marek_Optima

I would like to point out that I did not want to open many windows at the same time although if I am using a modal window, it damages the delete window.

Here is the example: https://jsfiddle.net/Lcbo9z66/31/

Please note that the delete window pops up only once. After selecting the row and clicking the Delete button, the window will pop up, but if it is closed, it will not pop up again. Please find below, there is the error in the console:

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.

allan

Thanks for the test case. I'm still note sure that it is valid in Bootstrap to have a modal-content class inside another, but I so no reason that I shouldn't add a workaround for that. I've done so and it works okay here: https://jsfiddle.net/Lcbo9z66/32/

The updated Editor / Bootstrap 3 integration is available here: http://live.datatables.net/cusiwije/1/edit

Allan

Marek_Optima

Thank you for the answer, now it works well. By the way I would like to ask if you put this patch in your official repository?

allan

Yes - I've committed it into Editor. It will be available in the next release.

Allan