TinyMCE jQuery ajax from not showing after save

Question

okies so i have a complete ajax system every page loaded is handled though ajax its alot of messy code at the moment so i wont show you.

The problem i'm having is when when i go to my content that loads TinyMCE it works perfectly, once, then once the form is submitted it uses remove() on the TinyMCE element then once it's done it gets the content from the server this then has a textarea for TinyMCE and it loads the weird thing is the content is not showing but if i click the HTML button the content is within the TinyMCE textarea.

I will try to show to explain a bit better using as little code as posible

so this is the TinyMCE call every time the conent is reloaded from the server

$(".addonContent form textarea.tinyMCE").tinymce({
        // Location of TinyMCE script
        script_url : '/script/tiny_mce/tiny_mce.js',

        // General options
        theme : "advanced",
        plugins : "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",

        // Theme options
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pasteword,|,bullist,numlist,|,blockquote,|,undo,redo,|,link,unlink,anchor,image,code,",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,charmap,emotions,media,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Example content CSS (should be your site CSS)
        content_css : "/style/style_content.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "lists/template_list.js",
        external_link_list_url : "lists/link_list.js",
        external_image_list_url : "lists/image_list.js",
        media_external_list_url : "lists/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
                username : "Some User",
                staffid : "991234"
        }
    });

And this works perfectly the first time

now my ajaxForm code run and just before it submits the data to the server it calls

$(".addonContent form textarea.tinyMCE").tinymce().remove()

but then when the content comes back and Tiny MCE loads it will not show the content in the editor but if i click the HTML button the content shows

EDIT This appears to be a bug with TinyMCE and Google Chrome as the below code works with IE8+ and works with Firefox i'm trying CKeditor now.

Thariama Thariama · Accepted Answer · 2012-03-05T16:20:19

You need to shut down a tinymce editro instance before you load a second one with the same id. Use the mceRemoveControl execCommand here.

TinyMCE jQuery ajax from not showing after save

1 Answers