Simple modal dialog and TinyMCE

Question

I am using simplemodal (a jQuery plug-in) and binding TinyMCE. My problem is, on first opening of my dialog, TinyMCE is working fine but once I close that dialog and re-open it then TinyMCE is not working anymore. I cannot type any character. Even my submit button doesn't work.

Here is the link:

http://webberzsoft.com/clients/codeigtest/index.php/simple_modal

Here is my code:

$(document).ready(function() {    
    $('.basic').click(function (e) {
        e.preventDefault();
        tinyMCE.init({
            // General options
            mode : "textareas",
            theme : "advanced",                    
            plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount",

            // Theme options
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
            theme_advanced_buttons2 : "fontselect,fontsizeselect,bullist,numlist,forecolor,backcolor",
            theme_advanced_buttons3 : "",        
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            dialog_type : "modal"
        });            
        $('#basic-modal-content').modal({});
    });
    $('.close').click(function (e) {
        e.preventDefault();
        $.modal.close();
    });    
});

Answer 1

I just had the same problem and spent some time searching. You need to put your tinyMCE.init code inside of the onShow function of the simple modal.

Something like:

jQuery(function ($) {

$('#modal-link').click(function (e) {

    $('#modal-content').modal({
        onShow: function() {
            initMCE();
        }
    });
    return false;

});