TinyMCE not loading when using JQuery

Question

I'm busy working on a project that has a main page, on that main page have a tabs, everytime I click on a tab it loads a page into a div tag with ID content.

One of the pages I'm loading into the div tag contains a textarea where I need to have TinyMCE in working.

I'm loading the pages into the div the following way using JQuery

$('#content').load('step4.php');

The funny thing is when I open step4.php without using JQuery in a browser window TinyMCE works, as soon as I load it via the load jquery method, It does not work and I only see the textbox.

At the top op step4.php I have the following code.

<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript">

tinyMCE.init({

    theme : "advanced",

    mode : "textareas",

    plugins : "fullpage",

    theme_advanced_buttons3_add : "fullpage"

  }); 

</script>

Answer 1

does this happen in every browser or just in Safari? (see http://stackoverflow.com/questions/889967/jquery-load-call-doesnt-execute-javascript-in-loaded-html-file)

maybe it is a timing problem (init runs before the js file has finished loading) you could try to run the init in the $.load callback e.g.

 $('#content').load('step4.php', function() {
      tinyMCE.init({ 
        theme : "advanced", 
        mode : "textareas", 
        plugins : "fullpage", 
        theme_advanced_buttons3_add : "fullpage" 
      });  
    });

Answer 2

It's not something crazy like paths is it? As a first step to debugging the issue, I would try this:

When you load step4.php via jQuery, use Firebug (or similar) to establish whether the tiny_mce.js file is actually getting loaded. jQuery and TinyMCE do play OK together (there's even a plugin for jQuery to do some fancy stuff with the editor), so I suspect a simple explanation at the root of this.

One other thing: does this happen in all browsers, or just WebKit ones (for example)?