jQuery .ajax() is breaking TinyMCE 3.5.6

Question

I've built a simple CMS with multiple layers of jQuery.ajax(), like so:

function navto(destination, pageToEdit, insertInto) {
// use JQuery's ajax method to control main navigation
if (pageToEdit == "undefined") {
    var request = $.ajax({
        url: destination
    });
} else {
    var request = $.ajax({
        type: "POST",
        url: destination,
        data: pageToEdit
    });
}

request.done(function(msg) {
    if (insertInto) { $(insertInto).html( msg ); }
    else { $("#mana_content").html( msg ); }
    //alert(msg);
});

request.fail(function(jqXHR, textStatus) {
    alert( textStatus + ". This page could not be found." );
});
}

For example, index.php uses <li class="child" onclick="navto('inc/edit_pages.php');">Edit Pages</li> to load edit_pages.php into <div id="content"></div>

edit_pages.php uses $(document).on("click", "a.editPage", function(e) { load_page_for_edit(e); return false; }); (where load_page_for_edit() gathers and readies the information to be sent to the navto() function) to send something like edit_page.php?t=template.php&c=contentID

edit_page.php uses those values to look up the info it needs in the corresponding databases and then outputs something like template.php&c=content into its own <div id="page_to_edit"></div>... again, with another navto().

A user can then click on $('.edit_text') elements to un-hide a div with a TinyMCE textarea (called $('#editor')) inside.

The content is captured by var content = $('.edit_text').html()

Here's the problem: when I try to load the content variable into the TinyMCE textarea -- $('#editor').html(content); -- the textarea does not receive it. I can immediately follow this up with alert($('#mana_editor').html());, which outputs the correct content, but with HTML characters made safe (eg, <p> becomes <p&rt;). However, the content does not load into TinyMCE.

I'm guessing that I have an .ajax scope issue? That perhaps jQuery is trying to $('#editor').html(content); to a non-existent #editor on the template.php (recall that the #editor is on edit_page.php)? Any good resources for figuring out multiple layers of .ajax?

Tid-bits, clues, and things I've tried:

All of my jQuery functions are in a functions.js file, except for the TinyMCE init, which is at the end of edit_page.php.
Only index.php links to functions.js
I'm using TinyMCE 3.5.6, jQuery plugin package and jQuery 1.7.2.
I've attempted TinyMCE's pseudo-selector as well ($('textarea:tinymce') instead of $('#editor')), which throws an error in Firebug: "Error: Syntax error, unrecognized expression: tinymce" in jq.min.js (line 4).
After a user makes their changes in TinyMCE, an update button will load the new content into the $('.edit_text') that was clicked. Instead of loading what I type in, it loads the "safe" HTML mentioned above -- as though TinyMCE was bypassed entirely.
If I don't use the whole CMS and start by manually typing `get_page.php?t=template&c=content' into FireFox it works fine.
If I don't load TinyMCE, the jQuery will load the content into the textarea
This guy might be on to something... seems similar, but I'm not sure what his head.js contains, how to implement head.ready();, or if his problem is the same as mine.

This is my first project using Ajax, so I have a lot to learn. Any insights/suggested reading/solutions would be greatly appreciated!

Thariama Thariama · Accepted Answer · 2012-08-09T07:33:15

Here's the problem: when I try to load the content variable into the TinyMCE textarea -- $('#editor').html(content); -- the textarea does not receive it. I can immediately follow this up with alert($('#mana_editor').html());, which outputs the correct content, but with HTML characters made safe (eg,
becomes <p&rt;). However, the content does not load into TinyMCE.

You need to know that tinymce is not equal your textarea. On initialization of an editor instance the former textarea gets hidden and tinymce creates a contenteditable iframe - the tinymce editor. The former textarea gets updated with the actual content of the editor from time to time (on special events). So what i think what you want to achieve is to write your content into the editor. To do this addressing the textarea using jQuery won't work (as you found put yourself). You need to employ the javascript tinymce API here:

tinymce.get('your_former_textarea_id_needs_to_be_here').setContent(content);

jQuery .ajax() is breaking TinyMCE 3.5.6

1 Answers