Chud37
Chud37

Reputation: 5007

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?

Upvotes: 0

Views: 566

Answers (2)

Wolfram
Wolfram

Reputation: 8052

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();
});

Upvotes: 1

rogal111
rogal111

Reputation: 5933

use complete callback of load function:

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

Upvotes: 0

Related Questions