Question

I’m facing the following problem:

I have my index.html page, with a div#content. Within this div, i load pages via my js

//JavaScript Document
$(document).ready(function() {
    $('#loader').load('pages/loader.php').hide();
    $('#content_container').load('pages/dashboard.php');
    //$('.dashboard_quick_news').load('pages/quicknews.php');
});

$('.content_link').click(function(){
    var href = $(this).attr('href');
    $('#loader').show();
    $('#content_container').hide().load(href).delay(1800).fadeIn('normal');
    $('#loader').load('pages/loader.php').delay(1000).fadeOut();
    return false;   

});

Now this all works fine and the loaded pages get shown like they should.
Though within one of my loaded pages I included a wysiwy editor (Nicedit)

<script type="text/javascript" src="../../nicedit/nicEdit.js"></script>
        <script type="text/javascript">
            bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
        </script>

When i load this page via the index (with the .load function), the wysiwyg editor does not show (also tested with TinyMCE). When i just visit the page stand-alone (via URL) the wysiwyg editor shows perfect so the paths are correctly set. Also tested with the wysiwyg js included in my index

To test if maybe the .load pages do not include javascript, I inserted an alert on the page with the wysiwyg editor.
This alert does show, though the wysiwyg editor does not.

Does anybody know how to solve this problem?

Thanks allready

Answer 1

Have you checked the resulting DOM and see if the editor markup has been attached to your page ?

Most (all?) of these WYSIWYG editors use an iframe. I’m not sure how they decide the size of it but I guess since you send in a textarea as a parameter, they use the dimensions of that textarea. Thus, make sure the size of the textarea is large enough and check that the injected iframe is large enough.

EDIT:

It’s difficult to pinpoint the problem without knowing where your textarea is when the editor is initiated (more code please?).

I think the problem is in bkLib.onDomLoaded which is run at the very moment the DOM is loaded. However, jQuery’s ready() does (almost) the same thing. Thus when you call load() to get the contents of a page the DOM is already loaded so bkLib.onDomLoaded will not run.

What you need to do instead is to instantiate the editor after the requested .php page has loaded:

$('#content_container').load('pageWithEditorScript.php', function() {
    nicEditors.allTextAreas();
});