Question

OVERVIEW: I am using JQuery Colorbox to display a little loading icon when an order is being processed on my website. For a small percentage of users, the color box will not close by itself and just gets stuck. This is the basic concept:

The order page loads a link into the colorbox using:

$(document).ready(function () {
    $("[rel=cbox_order]").colorbox({
        initialWidth: "100",
        initialHeight: "100",
        innerWidth: "300",
        innerHeight: "100",
        iframe: true,
        opacity: 0.75,
        overlayClose: false,
        title: 'Your order is being processed, please wait...',
        onLoad: function () {
            $('body').css({
                overflow: 'hidden'
            });
            $('#cboxClose').remove();
            $('#cboxLoadedContent').css({
                'margin-bottom': '0px',
                'height': '100%'
            });
            $(document).unbind("keydown.cbox_close");
        },
        onComplete: function () {
            $('#cboxLoadingGraphic').show();
            $('#cboxLoadedContent').css({
                'margin-bottom': '0px',
                'height': '100%'
            });
        },
        onClosed: function () {
            $('body').css({
                overflow: 'auto'
            });
        }
    });

    $("[rel=cbox_order]").click(function () {
        $("#colorbox").attr("style", "padding-bottom: 42px; padding-right: 42px; display: inline; width: 600px; height: 468px; top: 456px; left: 602px;");
    });
});

<asp:HyperLink id="lnkConfirm" class="buttonlink" rel="cbox_order" NavigateURL="~/ProcessOrder/ProcessPayment.html" Text="CONFIRM ORDER" runat="server"  />

This basically overrides lots of bits and STOPS the user closing the window whilst the order is being processed. The page that has been loaded into the ColorBox then processes the order and sends confirmation emails ect THEN does:

$(document).ready(function(){
    window.top.location.href = '<%=Session["ProcessOrder_Redirect"].ToString()%>';
    window.parent.$.fn.colorbox.close();
});

The idea is it redirects the parent window to the order confirmation page and then closes the box (just to confirm; this is working 95% of the time).

PROBLEM: This won’t always work and I can’t see why. I can confirm the value in the Session holds a valid URL. I entered an alert(<%=Session["ProcessOrder_Redirect"].ToString()%>); after the colorbox.close() and it appeared (and stayed there) for the users who get stuck with a valid URL. I cannot reproduce this error so I am somewhat stuck.

My only thoughts are that a. The redirect isn’t working (currently awaiting on more info to confirm this) or B. the ColorBox is bugging out and just won’t close.

Anyone able to help me solve this mystery?

EDIT: It seems it is the redirect messing up. Anyone know why that wouldn’t always work.

Thanks

Answer 1

I ended up putting a manual link in place for the user to click if they got stuck. Seems to have sorted it for now but still don’t know what caused the issue.