Why does filling a new Window from a div remove the div in the original document?

Question

I'm having a big problem the last days with filling in the window (Resizeable-Draggable Prototype-UI window) content with Prototype. I have finally found a working example of what I'm trying to do but it uses some kind of "Windows Plugin" for prototype which i don't use so basically i just want to ask how to compile their code to fit the normal prototype.

What I'm trying to do is to have a window with content pulled from a DIV in the body and the problem is that after i open the window once - The div is deleted and i can't re-open the window.

Here is their working code:

if (contentWin != null) {
  Dialog.alert("Close the window 'Test' before opening it again!",{width:200, height:130}); 
}
else {
  contentWin = new Window({maximizable: false, resizable: false, hideEffect:Element.hide, showEffect:Element.show, minWidth: 10, destroyOnClose: true})
  contentWin.setContent('test_content', true, true)
  contentWin.show();    

  // Set up a windows observer, check ou debug window to get messages
  myObserver = {
    onDestroy: function(eventName, win) {
      if (win == contentWin) {
        $('container').appendChild($('test_content'));
        contentWin = null;
        Windows.removeObserver(this);
      }
      debug(eventName + " on " + win.getId())
    }
  }
  Windows.addObserver(myObserver);
}

Here is the one i have (I can't open it more than once per refresh):

         function openCappAR() {
      var cApp = new UI.Window({theme: "ultra_dark",
      width:  360, 
           height: 350,
           superflousEffects: superflousEffects}).center().show();
           cApp.setContent(
           $('ceBlock').setStyle({
            display: 'inherit'
})
)
    cApp.header.update("Create an App");   
     }

Basically i need the DIV to get back to his first version when the window is closed. I think that Javascript have Observers too so ill add a JS tag if I'm wrong fix me :)

EDIT: Basically what i need is a window that i will be able to re-open after i close it, the main problem now is when i open a new window it removes the div from the the original document and when i close the window there is NO DIV at all.

Answer 1

After looking up Prototype UI I realized that you're not talking about opening an real window, but rather a moveable window-like element on the page. That's rather important to note.

Anyway, if I understood your question (and I'm not sure I did), I'd imagine that you can just clone the div element, and use the clone in the window. That would leave the original div untouched and still in place.

var windowContent = $('ceBlock').clone(true);
windowContent.setStyle({ display: 'inherit' });
cApp.setContent(windowContent);

Haven't tested it, but it should work. Just note, that clone doesn't clone or copy any event listeners you have on the element, so you'll have to add those again, if you have any.

---

Edit: Prototype's clone method is mostly just an alias for the browser's built-in cloneNode method. So if you can't use Prototype's method, you should be able to do this instead:

// use the standard DOM method
var windowContent = $('ceBlock').cloneNode(true);

// use the dollar function to ensure that the cloned element has been extended by Prototype
$(windowContent).setStyle({ display: 'inherit' });

cApp.setContent(windowContent);