jquery load и tinymce дают мне «g.win.document is null» при последующих загрузках

Question

Итак ... очень взволнован как первый пост на stackoverflow

У меня есть эта страница, нажатие кнопки вызовет editIEPProgram (). editIEPProgram подсчитывает, сколько существует конкретных div, добавляет еще один div, загружает его с помощью html из '/content/mentoring/iep_program.php' и затем вызывает $ ("textarea.tinymce"). tinymce, чтобы добавить редактор расширенного текста к вновь добавленному текстовые поля. Наконец, он добавляет вкладку, которая обрабатывает новые вещи, и Боб - твой дядя.

ПОЧТИ работает. При нажатии кнопки «первый» добавляется все, и все просыпается, при втором и последующем щелчке все добавляется, но tinymce не запускается (я полагаю) и выдает «g.win.document is null». Я был на нем в течение некоторого времени и терял все свое здравомыслие. пожалуйста, 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

Получил ответ здесь:

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

По сути, tinyMCE не будет работать, если целевая область текста скрыта. Вы должны изменить текст таким образом:

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"
    });
}

Answer 2

Попробуйте добавить TinyMCE следующим образом:

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

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

есть:

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); 
}

Тоже думаю

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

нужно как-то указать тип элемента

есть:

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