Question

I have a fancybox that loads a form that collects user input. In this form is a tinyMCE editor. I’m using the onComplete event of Fancybox to init the editor and everything works fine until you try to close the Fancybox after doing any significant editing in the TinyMCE. It doesn’t matter if you click the close X, or let ajaxForm call the fancybox close method upon submitting.

The fancybox closes, but hangs in a loop console logging “WRONG_DOCUMENT_ERR: DOM Exception 4” before getting rid of the shadow overlay. I tried disabling the overlay and it made no difference. The page still hangs with the looping error.

Similar errors are produced in Firefox. I understand this error has to do with trying to manipulate DOM nodes from different elements. I suspect it’s because the DOM tree doesn’t match the one Fancybox is trying to close after adding elements to to the TinyMCE (adding an image, list item, etc causes it).

Has anyone dealt with a similar issue before?

Answer 1

I did some googling but didn’t find a solution, so after some testing I found this solution.

Try onCleanup command in fancybox options:

$.fancybox(data_html,{
    onComplete:function(){
        //init tinymce in your form here                
    },
    onCleanup:function(){
        // remove tinymce and all html in your form just 
        // before closing the modal window
        $('#your_form').html('');
    }
});

Hope it helps!