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.

score 2 · Answer 1 · edited May 23 '14 at 18:36

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.

edited May 23 '14 at 18:36

Camden Narzt

2,271
1
23
42

answered Nov 20 '12 at 11:04

Pavel Tsvetkov

68
5

1

You answer would be better if it explained why you're suggesting these changes and how they solve the problem. – Craig Nov 20 '12 at 11:27

Dimitar Christoff · Answer 2 · 2012-03-12T20:37:24.247

2

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

edited Mar 12 '12 at 20:37

answered Mar 12 '12 at 20:32

Dimitar Christoff

26,147
8
50
69

Thank you, Dimitar, for your comments. I ended up using the clone handler and grabbing the first child element to display onOpen, then disposed the child element onClose. Works nice now. Thanks again, Dimitar. – user1264795 Mar 13 '12 at 00:41

Mootools squeezebox handler removing hidden div element

2 Answers2