TinyMCE with AJAX content in cloned JQuery UI Dialog

Question

When opening a cloned UI Dialog the first time, the TinyMCE inside the Dialog is loaded with content:

 setup: function(editor) {
                    editor.on('init', function() {
                    var data = 'This is a test';
                    editor.setContent(data);
                    });
                }  

Closing and reopening the Dialog, the TinyMCE is no longer loaded with that content.

Any idea what is happening and how to fix?

I have followed the instructions provided by TinyMCE for integration with a JQuery UI Dialog at https://www.tiny.cloud/docs/integrations/jquery/

<button type="button" id='show_dialog'>ShowDialog</button>

<div class="dialog_learning_event dialog_le">
<textarea name="editor_notes_le" id="editor_notes_le" rows="10" cols="80"></textarea>
<div id='notes_le_message'> </div>
</div>

and

  // Prevent jQuery UI dialog from blocking focusin
    $(document).on('focusin', function(e) {
      if ($(e.target).closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
        e.stopImmediatePropagation();
      }
    });


$('#show_dialog').click(function(){

var dialogs_le = $(".dialog_learning_event").clone().appendTo('body').removeClass('dialog_learning_event').dialog({
    title: 'test',
    width: '650',
    modal: true,
    dialogClass: 'dialogClass',
    open: function(event, ui) {
        var le_title = $(this).dialog("option", "title");
        tinymce.init({
            selector: 'textarea',
            menubar: false,
            plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak save',
            toolbar: "undo redo | styleselect| forecolor | bullist numlist | indent outdent | link unlink",
            content_style: "body {font-size: 11pt; font-family: Arial; }",
            toolbar_mode: 'wrap',
            setup: function(editor) {
                editor.on('init', function() {
                var data = 'This is a test';
                editor.setContent(data);
                });
            }
        });
    }
});
})

See fiddle:

jsfiddle

Note: Just close the TinyMCE warning notices about the domain not registered...

Answer 1

The problem you are having is caused by the fact that you are re-using the same textarea DOM id.

When you clone the dialog, you need to assign new ID for the textarea.

Working fiddle

Example:

var dialogId = 0;

$('#show_dialog').click(function() {
    dialogId++;

    var modal = $(".dialog_learning_event").clone().appendTo('body').removeClass('dialog_learning_event').attr("id", "dialog_" + dialogId);
    modal.find("textarea").attr("id", "textarea_" + dialogId);

    modal.dialog({
        title: 'test',
        width: '650',
        modal: true,
        dialogClass: 'dialogClass',
        open: function(event, ui) {
            var le_title = $(this).dialog("option", "title");
            tinymce.init({
                selector: '#textarea_' + dialogId,  // use the new DOM id
                menubar: false,
                plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak save',
                toolbar: "undo redo | styleselect| forecolor | bullist numlist | indent outdent | link unlink",
                content_style: "body {font-size: 11pt; font-family: Arial; }",
                toolbar_mode: 'wrap',
                setup: function(editor) {
                    editor.on('init', function() {
                        var data = 'This is a test: ' + dialogId;
                        editor.setContent(data);
                    });
                }
            });
        }
    });
})