TinyMCE in a popup with jquery load

Question

I am trying to use jquery version of latest tiny mce -TinyMCE 3.5b3 jQuery package, for my textarea. I create a popup to load the form and here is the problem - after the first load, if you click on the same load popup button again, the ajax load will break.

Here is the link to see what I mean.

However, I tested with another ajax load without a popup, then the jquery ajax will just work fine.

jquery,

$('.button-popup').click(function(){

    var object = $(this);

    // Remove any previous popup first.
    $(".popup").remove();

    // Now prepend a fresh popup.
    $(document.body).prepend("<div id='popup-edit' class='popup'></div>");

    // Load the content into the popup.
    $('#popup-edit').load('full.html', {}, function(){

        $('#binder-form').prepend("<div class='close'><a href='#' class='button-close'> x close </a></div>");   

        $('#binder-form').css({
            padding:"20px", 
            backgroundColor:"#ffffff"
        });

        $('textarea.tinymce').get_tinymce();
        $('form *[title]').inputHints();
        $('.button-submit').submit_form();

        $('.close').click(function(){
            $('.popup').fadeOut('fast',function(){
                //$(this).remove();
            });
            return false;
        });

    });

    return false;
});

$('.button').click(function(){

    $('.content').load('full.html', function() {
        $('textarea.tinymce').get_tinymce();
        $('form *[title]').inputHints();
        $('.button-submit').submit_form();

    });

    return false;
});

the plugin of $('textarea.tinymce').get_tinymce(); is in jsfiddle.

ArtBIT ArtBIT · Accepted Answer · 2012-04-15T19:12:39

The problem is that the #binder-form is still on the page after you close the modal. You should remove the #binder-form element on modal close.

Just uncomment that line that is commented out in the close click event:

    $('.close').click(function(){
        $('.popup').fadeOut('fast',function(){
            $(this).remove(); // this will remove the popup element
        });
        return false;
    });

I tend to avoid relying on element id attributes in pages that use ajax. Having two elements with the same id, can cause all kinds of hard to catch bugs. Stick to using class selectors for this in jQuery.

[EDIT] Hmm, no you're right, you're removing the .popup on next click, and an exception causes it to break the click handler and follow the link to full.html.

I'd say that tiny mce throws an error for some reason, try to wrap it in a try catch block to see why exactly.

TinyMCE in a popup with jquery load

1 Answers