jquery load and tinymce gives me a "g.win.document is null" on subsequent loads

Question

So... very excited as first post on stackoverflow

I have this page, clicking a button will call editIEPProgram(). editIEPProgram counts how many specific divs exists, adds another div, loads it with html from '/content/mentoring/iep_program.php' and then calls $("textarea.tinymce").tinymce to add a rich text editor to the newly added text boxes. It finally adds a tab which handles the new stuff and bob is your uncle.

It ALMOST works. Clicking the button the first adds everything and everything woks, on the second and subsequent click, everything is added but the tinymce fails to initiate (I guess) and gives me "g.win.document is null". I have been on it for some time now and losing all my sanity. please, help.me.

function editIEPProgram(){
  var index = $("div[id^=iep_program]").size();
  var target_div = "iep_program_"+index;
  $("#program_container")
   .append(
    $("<div></div>")
     .attr("id", target_div)
     .addClass("no_overflow_control")
    );

  $("#"+target_div).load
  (
   "/content/mentoring/iep_program.php",
   {index:index},
   function()
   {
    $("textarea.tinymce").tinymce({
     script_url: "/scripts/tiny_mce.js",height:"60", theme:"advanced",skin:"o2k7",skin_variant : "silver",
     plugins : "spellchecker,advlist,preview,pagebreak,style,layer,save,advhr,advimage,advlink,searchreplace,paste,noneditable,visualchars,nonbreaking,xhtmlxtras",

     theme_advanced_buttons1 : "spellchecker,|,bold,italic,underline,strikethrough,|,formatselect,|,forecolor,backcolor,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,image,cleanup,preview",
     theme_advanced_buttons2 : "", theme_advanced_buttons3 : "",
     theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left",

     content_css : "/css/main.css"
    });
   });
  $("#tab_container")
   .tabs("add", "#"+target_div,"New program")
   .tabs("select", $("#tab_container").tabs("length")-1);
 }

Answer 1

Try adding TinyMCE this way:

tinyMCE.init({
    mode : "textareas",
    theme : "advanced"
});

function toggleEditor(id) {
    if (!tinyMCE.get(id))
        tinyMCE.execCommand('mceAddControl', false, id);
    else
        tinyMCE.execCommand('mceRemoveControl', false, id);
}

ie:

function editIEPProgram(){ 
  var index = $("div[id^=iep_program]").size(); 
  var target_div = "iep_program_"+index; 
  $("#program_container") .append( $("") .attr("id", target_div) .addClass("no_overflow_control") );

  $("#"+target_div).load ( "/content/mentoring/iep_program.php", {index:index},
   function() { 
      toggleEditor(target_div);
  }); 
  $("#tab_container") .tabs("add", "#"+target_div,"New program") .tabs("select", $("#tab_container").tabs("length")-1); 
}

Also I think

.append( $("") .attr("id", target_div) .addClass("no_overflow_control") );

needs to have a element-type supplied somehow

ie:

.append( $("div") .attr("id", target_div) .addClass("no_overflow_control") );

Answer 2

Got the answer here:

http://blog.mirthlab.com/2008/11/13/dynamically-adding-and-removing-tinymce-instances-to-a-page/

Basically tinyMCE will not work if the target text area is hidden. I then had to modify the text that way:

function editIEPProgram(){
    var index        = $("div[id^=iep_program]").size();
    var target_div    = "iep_program_"+index;

    $("#program_container").append($("<div>").attr("id", target_div).addClass("no_overflow_control"));

    $("#"+target_div).load(
        "/content/mentoring/iep_program.php",
        {index:index},
        function()
        {
            $("#tab_container")
                .tabs("add", "#"+target_div,"New program")
                .tabs("select", $("#tab_container").tabs("length")-1);

            buildRTE();
        }
    );
}

function buildRTE(){
    $("textarea.tinymce").tinymce({
        script_url:    "/scripts/tiny_mce.js",height:"60", theme:"advanced",skin:"o2k7",skin_variant : "silver",
        plugins : "spellchecker,advlist,preview,pagebreak,style,layer,save,advhr,advimage,advlink,searchreplace,paste,noneditable,visualchars,nonbreaking,xhtmlxtras",

        theme_advanced_buttons1 : "spellchecker,|,bold,italic,underline,strikethrough,|,formatselect,|,forecolor,backcolor,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,image,cleanup,preview",
        theme_advanced_buttons2 : "", theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left",

        content_css : "/css/main.css"
    });
}