Search code examples
jquerywysiwyg

Applying wysiwyg editor after .load

I am loading a form via jquery AJAX, and I am trying to implement a wysiwyg editor to a textarea.

The textarea itself is fine when loading the page, however when the div #customerForm is reloaded (it contains the textarea) like this:

$("#customerForm").html(loading).load(filename);
$('#noteArea').wysiwyg();

I cant get it to load. The code above is in a seperate .JS file loaded in the main page, so I'm wondering if it is having trouble referencing the function on the fly. The editor was taken from:

https://github.com/akzhan/jwysiwyg

If anyone has any better jquery editors to suggest I'd be open to them, however this one is small and nice and what I wanted. Any suggestions?

Solution

  • The .load() function works asynchronously (see the source of the function, it uses .ajax() internally and the async property defaults to true). This means the following line is executed before the content was loaded. Try initializing the editor in the callback:

    $('#customerForm').load(filename, function() {
  $('#noteArea').wysiwyg();
});