Trying to integrate Jeditable+MarkItUp and Thickbox/Lightbox

Question

I've managed to successfully integrate MarkItUp with Jeditable based on the instructions on those two sites. What I would really like to do, however, is to have the Jeditable/MarkItUp editing window appear in a Thickbox or Lightbox overlay. So far my attempts to do this have not been successful.

So, at the moment, I have the standard code:

$.editable.addInputType('markitup', {
    element : $.editable.types.textarea.element,
    plugin  : function(settings, original) {
        $('textarea', this).markItUp(settings.markitup);
    }
});

$(".editme").editable("/content/save", {
    event   : 'dblclick',
    type      : 'markitup',
    submit    : 'OK',
    cancel    : 'Cancel',
    width     : 640,
    height    : 'auto',
    tooltip   : 'Double-click to edit...',
    onblur    : 'ignore',
    markitup  : mySettings
});

I've found other posts here that show how to trigger the edit box by clicking on a link rather than the object itself, and I've tried integrating that with the Thickbox calls, to no avail.

Would appreciate anyone pointing me in the right direction. Thanks!

Answer 1

Your problem probably stems for the events of jeditable and markitup are not "live" events.

When you (or your plugin) binds events to certain elements when the document loads, those events are only bound to the elements that are currently in the dom. If the elements get appended to the DOM (your page) later (as is the case with thickbox/lightbox plugins), the events don't get bound to the new dom elements.

The solution to this, under normal circumstances is to use jquery's live events. But since the plugins you're using (jeditable and markitup) are probably doing the bindings for you, you don't have a direct option to bind the events live, yourself. jquery live event code is usually something like this:

$('a.cool').live('click',function(){
    // Do something cool
});

In this case, even if the element gets added to the DOM later, it will still get the event bound to itself.

Your solution is to either Google the topic of jquery live for jeditable & markitup (I did but didn't find anything) or go in to their code yourself. I looked at jeditable and it's trivially easy there, the code you need to change is:

// Change this:
$(this).bind(settings.event, function(e) {
// Into this:
$(this).live(settings.event, function(e) {

and you'll also have to change the unbind function:

// change this:
.unbind($(this).data('event.editable'))
// Into this:
.die($(this).data('event.editable'))

The process is probably similar to markitup. I didn't take a look.