colorbox + asp.net button wont postback

Question

I'm using the colorbox modal plugin (http://colorpowered.com/colorbox/)

I've got a simple form sitting in a master page, for some reason I cannot get the submit button to post back, it doesn't do anything at all.

Seems to be a problem a few people are having, but I cant find a fix.

Here' some code I'm playing with, any clues?

---

Code in Masterpage

<link href="http://www.communitysectorservices.org.au/css/colorbox.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.communitysectorservices.org.au/js/jquery.colorbox.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

        //Examples of how to assign the ColorBox event to elements
        $("a[rel='example1']").colorbox();
        $("a[rel='example2']").colorbox({ transition: "fade" });
        $("a[rel='example3']").colorbox({ transition: "none", width: "700px", height: "75%" });
        $("a[rel='example4']").colorbox({ slideshow: true });
        $(".example5").colorbox();
        $(".example6").colorbox({ iframe: true, innerWidth: 425, innerHeight: 344 });
        $(".example7").colorbox({ width: "80%", height: "80%", iframe: true });
        $(".example8").colorbox({ width: "600px", inline: true, href: "#inline_example1" });
        $(".example9").colorbox({
            onOpen: function () { alert('onOpen: colorbox is about to open'); },
            onLoad: function () { alert('onLoad: colorbox has started to load the targeted content'); },
            onComplete: function () { alert('onComplete: colorbox has displayed the loaded content'); },
            onCleanup: function () { alert('onCleanup: colorbox has begun the close process'); },
            onClosed: function () { alert('onClosed: colorbox has completely closed'); }
        }); 
    });
</script>

Code in the content page

<div style='display: none'>
    <div id='inline_example1' style='padding: 10px; background: #fff;'>
        <h2 style="color: #da5f33;">
            <asp:Label ID="lblEventTitle" runat="server" Text="Label"></asp:Label></h2>
        <p>
            Please fill out the following form to sign up for the <b>
                <asp:Label ID="lblEventTitle2" runat="server" Text="Label"></asp:Label></b></p>
        <blockquote>
            <p>
                <b>
                    <asp:Label ID="lblName" runat="server" Text="Your Name" Width="120px"></asp:Label></b>
                <asp:TextBox ID="txtName" runat="server" Width="350px"></asp:TextBox>
                <asp:RegularExpressionValidator ID="RegularExpressionValidatorName" ControlToValidate="txtName"
                    ValidationExpression="^[a-zA-Z ]+$" runat="server" ErrorMessage="*" Style="font-size: xx-small;
                    font-family: Arial, Helvetica, sans-serif; color: red;"></asp:RegularExpressionValidator><asp:RequiredFieldValidator
                        ID="RequiredFieldValidatorName" Style="font-size: xx-small; font-family: Arial, Helvetica, sans-serif;
                        color: red;" ControlToValidate="txtName" Text="*" runat="server" /></p>
            <p>
                <b>
                    <asp:Label ID="lblOrganisation" runat="server" Text="Your Organisation" Width="120px"></asp:Label></b>
                <asp:TextBox ID="txtOrganisation" runat="server" Width="350px"></asp:TextBox>&nbsp;
            </p>
            <p>
                <b>
                    <asp:Label ID="lblEmail" runat="server" Text="Your Email" Width="120px"></asp:Label></b>
                <asp:TextBox ID="txtEmail" runat="server" Width="350px"></asp:TextBox><asp:RegularExpressionValidator
                    ID="RegularExpressionValidatorEmail" ControlToValidate="txtEmail" ValidationExpression="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$"
                    runat="server" ErrorMessage="*" Style="font-size: xx-small; font-family: Arial, Helvetica, sans-serif;
                    color: red;"></asp:RegularExpressionValidator>
                <asp:RequiredFieldValidator ID="RequiredFieldValidatorEmail" Style="font-size: xx-small;
                    font-family: Arial, Helvetica, sans-serif; color: red;" ControlToValidate="txtEmail"
                    Text="*" runat="server" /></p>
        </blockquote>
        <p>
            <b>Secury Question</b></p>
        <p>
            You must answer this question correctly so we can make sure you are human.</p>
        <blockquote>
            <p>
                <b>
                    <asp:Label ID="lblQuestion" runat="server" Text="5 + 5 =" Width="50px"></asp:Label></b>
                <asp:TextBox ID="txtAnswer" runat="server" Width="50px"></asp:TextBox><asp:Label
                    ID="lblValidate" runat="server" Width="10px"></asp:Label></p>
        </blockquote>
        <p style="text-align: right; padding-right: 10px;">
            <asp:Button ID="Button1" runat="server" Text="Register for Event" /></p>

Answer 1

I has the same problem and solved it on the call of colorbox, moving the colorbox element to the asp.net form:

$("a.colorbox").colorbox({
    width: 600,
    onOpen: function () {
        $('#aspnetForm').append($('#colorbox'));
    }
});

Answer 2

Thanks to Dynde's lead I was able to fix it:

    function appendHTML() {
    if (!$box && document.forms[0]) {
        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 3x3 Grid that makes up ColorBox
            $tag(div).append(
                $tag(div, "TopLeft"),
                $topBorder = $tag(div, "TopCenter"),
                $tag(div, "TopRight")
            ),
            $tag(div, false, 'clear:left').append(
                $leftBorder = $tag(div, "MiddleLeft"),
                $content,
                $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.forms[0]).append($overlay, $box.append($wrap, $loadingBay));
    }
}

The only 2 lines I changed were the at the beginning and the end of the function:

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

and

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

Answer 3

I'm pretty sure this:

http://onefishmedia.com/onefishmedia/post/2010/04/29/Getting-ASPNET-Server-Controls-to-work-within-Fancybox-or-Colorbox-plugins.aspx

is what you're looking for.

It happens because the colorbox div is being created outside of the form tag. There's a quick fix in the link - however, in one of the comments it also says it would be easy to implement a parameter for specifying where in the code, you want colorbox to be created - which is what I'd like to do - but it doesn't appear to me, to be so easy :/