AW.UI.Combo And Lightbox Gone Wild

I use Lightbox Gone Wild to get modal dialog boxes. (BTW, an awesome javascript control that sits over Prototype.)

Lightboxes basically create a layered DIV in which is inserted the contents of any target page via an innerHTML call.

In one particular lightbox window, I am attempting to create an AW.UI.Combo widget. However, when the page containing the contents of the lightbox gets called and inserted, the whole page "goes blank" in IE6 and FF.

It looks like the HTML inserted by the document.write() replaces the original DOM?!?

BTW, AW widgets used in the main page, not the dialog, work just fine.

I have no idea where to begin. Can anyone make any suggestion on where to start looking or help debug? Desperately looking for any suggestions.

- alphadog

document.write() only works during the initial page load. After that calling document.write() will clear the page and start over with a new blank one.

When the page is already loaded use

div.innerHTML = obj; // instead of document.write(obj);

Ah! Thanks, Alex. I didn't think about document.write() that way.

Here's the actual snippet I use:

<span id="test"></span>
<script>
    var vendorCombo = new AW.UI.Combo();
    vendorCombo.setId("vendorCombo");
    vendorCombo.setItemCount(3);
    vendorCombo.setItemText(['a','b','c']);
    vendorCombo.setItemValue(['a','b','c']);
    // make combo more <select>-like
    vendorCombo.getContent("box/text").setAttribute("readonly", true);
    vendorCombo.onControlEditStarted = function() {
        this.getContent("box/text").element().contentEditable = false;
    }
    document.getElementById('test').innerHTML = vendorCombo;
</script>