Over a million developers have joined DZone.

ASP.NET Postback Issue With Colorbox jQuery Plugin

DZone's Guide to

ASP.NET Postback Issue With Colorbox jQuery Plugin

· Web Dev Zone ·
Free Resource

Access over 20 APIs and mobile SDKs, up to 250k transactions free with no credit card required

While working on a project I came across a weird problem while working with Colorbox jquery plugin and ASP.NET. The problem is not only with Colorbox but also with another famous plugin called Fancyox. If you plan to use the plugine just to show dialog boxes, then this plugin works perfectly fine. Integrating the plugin with ASP.NET works fine but prevents post back if you have server controls on the colorbox dialog box (which is actually an invisible div on the page). ASP.NET developers can consider this as a bug but actually it's not a bug, but a scenario missed in the plugin.

I have a button click for button labelled Yes which redirects me to the about page. Now when you try to click the button there will be no post back event. This is because Colorbox renders the div outside the form tag which hinders the post back event.

Now to overcome this problem, you need to jump inside the Colorbox plugin code. The main function that add the content to the DOM or on the page is called appendHTML.

function appendHTML() {
    if (!$box && document.body) {
        init = false;
        $window = $(window);
        $box = $tag(div).attr({ id: colorbox, 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : '' }).hide();
        $overlay = $tag(div, "Overlay", isIE6 ? 'position:absolute' : '').hide();
        $wrap = $tag(div, "Wrapper");
        $content = $tag(div, "Content").append(
            $loaded = $tag(div, "LoadedContent", 'width:0; height:0; overflow:hidden'),
            $loadingOverlay = $tag(div, "LoadingOverlay").add($tag(div, "LoadingGraphic")),
            $title = $tag(div, "Title"),
            $current = $tag(div, "Current"),
            $next = $tag(div, "Next"),
            $prev = $tag(div, "Previous"),
            $slideshow = $tag(div, "Slideshow").bind(event_open, slideshow),
            $close = $tag(div, "Close")
        $wrap.append( // The -1x3 Grid that makes up ColorBox
                $tag(div, "TopLeft"),
                $topBorder = $tag(div, "TopCenter"),
                $tag(div, "TopRight")
            $tag(div, false, 'clear:left').append(
                $leftBorder = $tag(div, "MiddleLeft"),
                $rightBorder = $tag(div, "MiddleRight")
            $tag(div, false, 'clear:left').append(
                $tag(div, "BottomLeft"),
                $bottomBorder = $tag(div, "BottomCenter"),
                $tag(div, "BottomRight")
        ).find('div div').css({ 'float': 'left' });
        $loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none');
        $groupControls = $next.add($prev).add($current).add($slideshow);
        $(document.body).append($overlay, $box.append($wrap, $loadingBay));

In the above method (which is an extract from the plugin), notice that the plugin is focusing on document.body whereas in order to get it working with the post back events we need to change the above highlighted lines with the one below:

if (!$box && document.forms[0]) {


$(document.forms[0]).append($overlay, $box.append($wrap, $loadingBay));

After the changes have been made, it's time to check again. Try clicking the button and check again. This time you will be redirected to the about page. Although, this seems to be simple problem, but there will be few fellow programmers who will scratch their head if they stuck in this sort of a problem. Hope this helps someone out there.

#1 for location developers in quality, price and choice, switch to HERE.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}