Editable area disappears when sorting item in a jquery UI sortable

Question

The title may sound weird. Well, it is.

Here's an approximation of my code (it lacks some useless ajax calls for this example, and simplifies some other stuff): http://jsfiddle.net/pKNAz/3/

Suppose you have a list of draggable items (in this case, there's only a draggable called "Add a Wysiwyg") which you can move into a drop zone (a grey rectangle in my example), and it appends a textarea, which then, after dropping, I convert into a wysiwyg using the jwysiwyg library (i couldn't add all the images and css this plugin uses, but the textarea basic behaviors (ctrl+b, ctrl+i, ctrl+u) work, so we can assume it's working).

It works particularly well at drop time. However it turns to break the jwysiwyg when sorting. You can try it by yourself dragging the dark grey handle after having two jwysiwyg's. You'll see the jwysiwyg you sorted has lost its jwysiwyg. You can still get the correct value you previously wrote inside the textarea by searching $('textarea.overflow').val(), but you cannot use jwysiwyg anymore.

Has anybody an idea on how to solve this problem? Thanks in advance

Answer 1

Ok, I got a solution (sorry Jan for removing your tick). I wondered that, if the problem was due to the combination between the iframe zone and the sort events, the why not just refresh the wysiwygs?

I create a function to wrap the destruction+construction of jwysiwyg, like this:

function refreshTextareas()
{
    $('textarea.autogrow').wysiwyg('destroy');
    $("textarea.autogrow").wysiwyg({
        autoGrow: true,
        rmUnusedControls: true,
        controls: {
            bold: { visible : true },
            italic: { visible : true },
            insertOrderedList: { visible : true },
            insertUnorderedList: { visible : true },
            removeFormat: { visible : true },
            h1: { visible: true },
            link : { visible: true }
        }
    });
}

and then I call it here:

$( "#sortable" ).sortable({
    stop : function(event, ui){
        refreshTextareas();
    }
});

So, in case you sort the stuff, you reconstruct it and it works again, just like that.

Answer 2

On dropping the item the iframe containing the wysiwyg control gets emptied. Since a least-code scenario reproduces the error it looks like a bug in jquery/jwysiwyg.

http://jsfiddle.net/6TcM7/2/

Report a bug and/or switch wysiwyg engine.