Question

So I have a light box that’s dynamically loaded from a common.js file. (Legacy Code that I’m stuck using)

I have this function in the common.js file

//dynamically load a light box to he page
// @src - is the URL to load in the lightbox
// @hidePDFLink - is a boolean value indicating if PDF link should be hidden
// @imagePath - is the image path for the pdf link
function loadLightBox(src, options) {
    options = $.extend({ pdfSrc: null, width: Math.min(820, $(window).width() - 20), height: $(window).height() * 0.90, title: null }, options);

//LOAD IT
if ($("#lightBox").length == 0) {//create light box if it doesn't exist
    $("body", $(document)).append($('<div id="lightBoxOverlay" /><div id="lightBox"><div id="lightBoxToolbar"><div id="lightBoxTitle" /><div id="lightBoxCloseLink" title="Close" /><div id="lightBoxPrintPDFLink" title="Create PDF">Create PDF</div></div><iframe id="lightBoxFrame" scrolling="auto" frameborder="0" onload="showWaitCursor(false)" /><div id="lightBoxContent" /></div>'));

    $('#lightBox')[0].hideFunction = (options.removeOnClose == true) ?
        function () {
            $(document).unbind("keyup", $('#lightBox')[0].escapeFunction);
            $('#lightBox, #lightBoxOverlay').empty().remove();
            showWaitCursor(false);
            return false;
        } :
        function () {
            $("#lightBox").hide();
            $("#lightBoxOverlay").hide();
            $("IFRAME", "#lightBox").attr("src", "about:blank");
            $('#lightBoxContent').html('');
            $(document).unbind("keyup", $('#lightBox')[0].escapeFunction);
            showWaitCursor(false);
            return false;
        }

    $('#lightBox')[0].escapeFunction = function (event) {
        if (event.keyCode == 27)
            $('#lightBox')[0].hideFunction();
    }

    $("#lightBoxCloseLink").click($('#lightBox')[0].hideFunction);
    $("#lightBoxPrintPDFLink").click(function () {
        window.document.location = $(this).attr('pdfSrc');
        return false;
    });

    // apply bgiframe if available
    if ($.fn.bgiframe)
        $('#lightBox').bgiframe();
}
setLightBoxOptions(options);

//set source
if (!(options.srcContent)) {
    showWaitCursor(true);
    $("#lightBoxFrame").attr("src", src);
}

}

function setLightBoxOptions(options) {

    if (options.pdfSrc)
        $("#lightBoxPrintPDFLink").attr('pdfSrc', options.pdfSrc).show();
    else
        $("#lightBoxPrintPDFLink").hide();

    if (options.title)
        $("#lightBoxTitle").text(options.title);

    if (options.width) {
        $("#lightBoxFrame, #lightBoxContent").width(options.width - 20);
        $('#lightBoxToolbar', $('#lightBox')).width(options.width);
    }

    if (options.height)
        $("#lightBoxFrame, #lightBoxContent").height(options.height - $('#lightBoxToolbar', $('#lightBox')).height());

    if (options.srcContent) {
        $('#lightBoxContent').html(options.srcContent);
        if (!(options.width)) $('#lightBox').width($('#lightBoxContent').width());
    }

    //set position of lightbox
    var isIE6 = false;
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { //test for MSIE x.x;
        var ieversion = new Number(RegExp.$1) // capture x.x portion and store as a number
        if (ieversion >= 6 && ieversion < 7)
            isIE6 = true;
    }
    $("#lightBox").css({
        left: $(window).width() / 2 - $("#lightBox").width() / 2 + (isIE6 ? $(window).scrollLeft() : 0), // account for scrolling
        top: $(window).height() / 2 - $('#lightBox').height() / 2 + (isIE6 ? $(window).scrollTop() : 0)// account for scrolling
    });
}

common.css:

/*** BEGIN STYLES FOR LIGHTBOX ***/
#lightBoxOverlay 
{
    position:fixed;
    left:0px;
    top:0px;
    width: 100%;
    height: 100%;
    display:none;
    opacity: 0.5;
    filter: alpha(opacity=50);
    background-color:#666;
    z-index:2998;
}
#lightBox 
{
    display:none;
    position:fixed;
    top: 5%;
    border:solid 1px black;
    background-color:#fff;
    -moz-box-shadow: 3px 3px 3px #666;
    -webkit-box-shadow: 3px 3px 3px #666;
    z-index:2999;
}
#lightBox iframe 
{
    /*width: 800px;*/
    margin: 0 10px 10px 10px;
}
#lightBox #lightBoxToolbar 
{
    margin-top:10px;
    /*width: 820px;*/
    height: 26px;
}
#lightBox #lightBoxPrintPDFLink
{
    float: right;
    background: url(images/icon_pdf.gif) no-repeat right;
    cursor:pointer;
    margin-right:5px;
    width: 90px;
    height: 16px;
    white-space:nowrap;
}
#lightBox #lightBoxCloseLink
{
    float: right;
    background: url(images/icon_x2.gif) no-repeat center;
    cursor:pointer;
    margin-right:10px;
    width: 16px;
    height: 16px;
}
#lightBox #lightBoxTitle
{
    float: left;
    margin-left:10px;
    height: 16px;
    font-weight:bold;
}
/*** END STYLES FOR LIGHTBOX ***/

and this function calls the above function:

var url = 'aUrl/SomeControl.ascx';
loadLightBox(url, { width: 640, height: 575, title:'TestTitle' });

This causes the light box below to load:

My issue is that I can’t set/change the title for the lightbox in the document ready.
In the code below, the Document Ready function is in the control that gets loaded by the lightbox.

-The first alert comes back with null and the second comes back with nothing.

alert(document.getElementById('lightBoxTitle'));
alert($('#lightBoxTitle').text());
$('#lightBoxTitle').text('IM A NEW TITLE THAT SHOULD BE SET');

I used chrome’s developer tools and verified that the document ready is ran in the common.js and then then document ready is run in the control that gets loaded in the lightbox.

I know I could fetch the title and pass it in as a parameter in the loadLightbox function but I’m trying to prevent an extra load and I’d like to style it differently than the way it looks now.

Thanks

Answer 1

You can’t access the div because it doesn’t exist in the DOM until you call loadLightBox().

Since your lightbox is being loaded in an iframe, you should be able to do something like this from the document.ready function in your SomeControl.ascx:

$("#lightBoxTitle", top.document).text("My new title");