logo标签列表

Colorbox + ASP.NET按钮不会回传

c#javascriptasp.netjquerycolorbox
8
我正在使用colorbox模态框插件 (http://colorpowered.com/colorbox/)。
我在主页面上有一个简单的表单，但是我无法让提交按钮回传，它根本不做任何事情。
似乎有一些人遇到了这个问题，但我找不到解决方法。
以下是我正在处理的一些代码，有什么线索吗？

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>

内容页中的代码

<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>
只有当您在头部引用脚本（指向“http://www.communitysectorservices.org.au/js/jquery.colorbox.js”）时，它才会失败吗？如果是这样，那么这可能是他们的脚本出了问题...可能覆盖了按钮点击事件。 - Andrew Gee
3个回答
5
感谢Dynde的指导，我成功修复了它：
    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));
    }
}

我只改变了函数开头和结尾的两行代码：
if (!$box && document.forms[0]) {

并且

$(document.forms[0]).append($overlay, $box.append($wrap, $loadingBay));
1
谢谢。那个起作用了！唯一的问题是，当升级colorbox时，我永远不会记得再次“黑客”jquery.colorbox.js。 - Ash
是的，我也很担心这个问题。希望他们能在某个时候修复它。 - DShook
谢谢。我已经寻找解决这个问题的方法好几个小时了。这个方法非常有效。 - Matt Schubert
运行得非常好，我已经寻找它3-4个小时了。 - Vishal Suthar
3

我有同样的问题，并在调用colorbox时将colorbox元素移动到asp.net表单中解决了它：

$("a.colorbox").colorbox({
    width: 600,
    onOpen: function () {
        $('#aspnetForm').append($('#colorbox'));
    }
});
1
+1 简单解决方案。我还想添加以下一行代码，以便覆盖不会重叠内容。$('#aspnetForm').append($('#cboxOverlay')); // <-- 在 .append($('#colorbox')); 前放置。 - MPaul
3
当我尝试使用该修复方法时，我会收到无效的视图状态错误。 - David Silva Smith
链接似乎已经损坏（2011年1月21日）。您能详细说明解决方案是什么吗？ - kbrimington
亲爱的，很抱歉我不记得解决方案了。但是，至少它应该指导您正确的方向，因为主要的colorbox div是在form标签外创建的。如果我没记错的话，您应该能够在colorbox JS中找到colorbox试图通过搜索“body”来“插入”自己的位置。将其更改为您放在<form>标记内的元素。例如：<body><form><div id="ColorboxPlaceHolder">，然后将js文件中的“body”出现更改为“#ColorboxPlaceHolder”-希望这有所帮助。 - Dynde
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接