CKEditor doesnt work when using jquery load() function

I am using CKEditor by class on a form which I am then loading via jquery load() function. I have included the .js file at the bottom of the document below the form and the divs etc. It works fine when I visit that page by itself, but when I load it within my layout using the load90 function it doesn't work. It is just as if it couldn't find the javascript file (but I am using a path from the root so it definatly can + all files are in same folder at the mo).

Any suggestions?

Thanks
James

Tue, 11/17/2009 - 02:52

funka

Joined: 28/08/2009

Posts: 4

Re: CKEditor doesnt work when using jquery load() function

Are you passing a selector along with the URL to your load function by any chance? I don't think this is widely known (no mention of this in the jquery docs) but jQuery strips out scripts when loading in this manner.

For example, this will work:

$('#someDiv').load('/somefile.php');

But this will not:

$('#someDiv').load('/somefile.php #someSelector');

If you look in the jquery sourcecode, you will see that this was specifically done like this in order to avoid problems with I.E.

Good luck!

Tue, 11/17/2009 - 12:03

jaz9090

Joined: 06/11/2009

Posts: 4

Re: CKEditor doesnt work when using jquery load() function

When I load the page it calls this

$(document).ready(function() {
var content = window.location.hash.substring(1);
if (content == "")
   {
      loadContent('home.php', 'body');
   }
else
   {
      loadContent(content, 'body');
   }
});

Which will then call this

function loadContent(content, fadeInLocation){
   $('#maincontent').load(content);
}

I have removed the fader on the callback to check, it still isnt working, however once it is loaded it removes the border on the textarea.

My form is below (no functionality at the mo, I'm keeping it simple until this is sorted) I have tried replace by class too.

<?php
define('SECTID', 'page');
require_once('includes/config.php');
require_once('includes/session.php');
?>

<div id="singlecontent">
<form id="addPage" method="post" action="">
  <div class="widget">
    <h3>Add New Page</h3>
    <div class="widgetcontent">
      <input id="title" class="wideinput" type="text" size="60" />
      <textarea id="content" class="wideinput" cols="45" rows="5"></textarea>
    </div>
  </div>
  <div class="widget">
    <h3>Meta Description</h3>
    <div class="widgetcontent">
      <table>
        <tr>
          <th style="text-align: right; width: 100px;">Page Title:</th>
          <td style="width: 100%"><input class="wideinput" name="meta-title" type="text"/></td>
        </tr>
        <tr>
          <th style="text-align: right; width: 100px;">Description:</th>
          <td style="width: 100%"><input class="wideinput" name="meta-description" type="text" size="60" /></td>
        </tr>
        <tr>
          <th style="text-align: right; width: 100px;">Keywords:</th>
          <td style="width: 100%"><input class="wideinput" name="meta-keywords" type="text" size="60" /></td>
        </tr>
      </table>
    </div>
  </div>
  <div class="widget">
    <div class="widgetcontent nohead">
      <input type="submit" id="submit" value="Submit Page" />
    </div>
  </div>
</form>
<!-- Javascript Files -->
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
   CKEDITOR.replace( 'content' );
</script>
<!-- EO Javascript Files -->

Tue, 11/17/2009 - 16:02

casuser

Joined: 17/11/2009

Posts: 1

Re: CKEditor doesnt work when using jquery load() function

I had a similar problem but on a different platform. The issue is that the CKEditor's instance need to be created after the tab content loads. I accomplished this by invoking the "replace" method at the end of the document fragment (if you will) : CKEDITOR.replace("textareaname"); You can also put this code in an event handler for the load complete :
//load method
$('#somediv').load(webroot + resourceUrl, data, handlePostLoad);
//postload
function handlePostLoad() {
CKEDITOR.replace("textareaname");
}
I was not able to utilize the replaceClass property for instantiating editors for multiple textareas and would like to know if and how that might be possible.

Wed, 11/18/2009 - 10:23

jaz9090

Joined: 06/11/2009

Posts: 4

Re: CKEditor doesnt work when using jquery load() function

OK, so I have added a callback to the load file

function loadContent(content, fadeInLocation){
   $('#maincontent').load(content, function(){onceLoaded()});
}

and put this at the bottom of the page I am loading

<!-- Javascript Files -->
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
function onceLoaded(){
   CKEDITOR.replace( 'content' );
}
</script>
<!-- EO Javascript Files -->

the callback is definitely working as I added a document write after the CKEDITOR.replace() function to test, however the textarea dissapears when the ckeditor.js file loads (but it also did this before I added the callback, am I calling the right function?)

Wed, 11/18/2009 - 11:59

jaz9090

Joined: 06/11/2009

Posts: 4

Re: CKEditor doesnt work when using jquery load() function

I have sorted it, I had to use replace by code (wouldn't work with replace by class) and include the ckeditor.js file outside of the file being loaded (i.e. the file doing the loading).

Thanks for all of your help!