ajaxjoomlajoomla1.5joomla-content-editor

JCE not loading in page loaded with Ajax


I have a Joomla 1.5 component that uses a call to the editor class to display JCE for Joomla instead of a textbox. This code is part of a 4-step form where each step is loading using ajax. The last step contains a message field where users can write free text and I am calling this using the following code:

$editor =& JFactory::getEditor();
echo $editor->display('description', $description, '100%', '150', '40', '30');

When this step is displayed, it shows only a simple textbox without the buttons to format the text etc. I understand this must be an issue with the javascript, but I am having a hard time finding how I can trigger the proper code for the textbox to be formatted properly.

This is how the field looks: Description field loaded via Ajax

And here is the HTML generated from Firebug:

<!-- Start Editor --><label aria-visible="false" style="display:none;" for="description">description_textarea</label><textarea wrap="off" class="wfEditor source" style="width:100%;height:150px;" rows="30" cols="40" name="description" id="description"></textarea><input type="hidden" value="1" name="wf3fadc9c48cabc28750287fe69c3d08c4" id="wf_description_token">
<div id="editor-xtd-buttons">
<div class="button2-left"><div class="image"><a rel="{handler: 'iframe', size: {x: 570, y: 400}}" onclick="IeCursorFix(); return false;" href="http://localhost/ugparl/site/index.php?option=com_media&amp;view=images&amp;tmpl=component&amp;e_name=description" title="Image" class="modal-button">Image</a></div></div>
<div class="button2-left"><div class="pagebreak"><a rel="{handler: 'iframe', size: {x: 400, y: 85}}" onclick="IeCursorFix(); return false;" href="http://localhost/ugparl/site/index.php?option=com_content&amp;task=ins_pagebreak&amp;tmpl=component&amp;e_name=description" title="Pagebreak" class="modal-button">Pagebreak</a></div></div>
<div class="button2-left"><div class="readmore"><a rel="" onclick="insertReadmore('description');return false;" href="http://localhost/ugparl/site/#" title="Read more">Read more</a></div></div>
</div>
<!-- End Editor -->

Solution

  • This is not so much a solution but a workaround. Due to cleaning the headers before displaying the page, the code generated by JCE is lost. By adding the following code to the page called by ajax, I am able to trigger the JCE initializer and display the editor correctly.

    $document =& JFactory::getDocument();
    echo "<script type='text/javascript'>
    function loadJCE() {";
    echo $document->_script["text/javascript"];
    echo "}
    </script>";
    

    Then I just called loadJCE from the load complete function.

    Again, this is not the best way to do it but it did the trick for me.