Mootools squeezebox handler removing hidden div element

Question

Hidden div element content is removed after first modal popup display.

Using the below handler function, the modal displays the hidden div just fine, then after clearing the modal, a subsequent call to the below handler function returns an alert that the "Target does not exist", and the hidden dive element is in fact gone.

function OnSubmitHandler() {    
if (e = $('modalcontainer')) {
    SqueezeBox.initialize({
        size : {x : 300, y : 120}
    });
    SqueezeBox.open(e, {
        handler : 'adopt',
        overlayOpacity : 0.7,
        onOpen : function(){
            e.style.display = 'block';
        },
        onClose : function(){
            e.style.display = 'none';
        }
    });
}else{
    alert('Target does not exist');
}
}

This should be simple and the handler function works fine as written, but the hidden div content is gone after the first display. Having trouble figuring out why. I must be missing something.

Answer 1

Because you adopt the content, it is moved in the DOM to your squeezebox. Since you don't reuse your squeezebox instance and initialize it every time, on the next init it will empty the content area (still containing the e) and have nothing further to adopt.

Reuse the instance or see if it supports clone instead. Also you can move e back to dom or even just as reference onClose - do e.dispose() to protect it. Then do e = e || $() but keep it as a scoped var and not global

Answer 2

change

if (e = $('modalcontainer')) {

to

var e = $('modalcontainer'); 
var e = e.clone(); 
if (e) {

This way you create an exact copy of the element you wish to display (save for the id of the clone) and then the adopt handler disposes of the clone for you on close, so you don't have to worry about a memory leak.