jHTMLArea locks up inside jQuery webform wizard

Question

Hello,

I previously posted this question http://stackoverflow.com/questions/1704933/jwysiwyg-or-jhtmlarea-within-a-jquery-ui-tab about getting jHtmlArea to work inside jQuery Ui tabs.

I am now trying to get this same html editor to work inside the jQuery formtowizard plugin.

I am not sure if this is exactly the same problem or not. No errors are being thrown and the editor appears to load all buttons and its height and width correctly but the user is unable to type any text in the textarea.

I am generating the jHtmlArea like this...

$(function(){
    $(".text-detail").htmlarea({ css: "/css/jHtmlAreaCustom.css",});
});

and then

$(document).ready(function() {
    $("#addFaci").formToWizard({ submitButton: 'AddFaciSubmit' });
}):

Do I need to load the jHTMLArea from within a callback from the formToWizard script? I've tried for several hours and definetely need some guidance.

Thanks for your help.

Tim

Answer 1

The problem turned out to be jHtmlArea needed to be loaded in $(document).ready(function() { after the formtoWizard call.

Then jHtmlArea collapses onitself because it can't dynamically set it's height and width properties within a hidden container. Set these with jQuery CSS calls and your good to go!

Hope this helps someone else.