jQuery Append, markitup and textarea annoyances.

I’m using markitup for a textbox editor. I’m also using jQuery UI for dragging and dropping.

I wanted to drag and drop images onto the textbox that is being formatted by markitup and have the image url show up in the box. I started out using append to do this and it seemed to be working fine with code like this.

$("#texteditor").droppable({
  drop: function( event, ui ) {
    $(this).append("[img]" + ui.draggable.children()[0].src + "[/img]");
  }
}).attr("contentEditable", true);

I added the markitup functionality and all seemed well, but then I noticed a problem in Firefox. When I first loaded the page I could drag images onto the box and all was fine, but if I typed some text into the box and then tried to drag an image nothing seemed to happen. There was no update to the text in the box. I tried this in IE and everything still worked. I went back to Firefox and started Firebug and surprisingly the DOM was being updated when I dragged the text over to the box, but for some reason it just was not showing up on the screen and when I tried to post the text back to the server it didn’t pick up the updates either.

After looking at the various options here I ended up changing things up in the code so it looks like this now.

$("#texteditor").droppable({
  drop: function( event, ui ) {
    $(this).val($(this).val() + "[img]" + ui.draggable.children()[0].src + "[/img]");
  }
}).attr("contentEditable", true);

Everything seems to work in IE and Firefox with this update. I’m really not sure what caused my problem here, but my knowledge of the DOM and jQuery is not such that I will pursue it beyond this.

Leave a Reply

Your email address will not be published. Required fields are marked *