如何在fancybox中使用UpdatePanel

Question

我点击链接时使用fancybox显示div的内容.这可以使用下面的代码:

<a id="popupTrigger" href="#popup">popup trigger</a>

<div style="display:none">
    <div id="popup">
        <asp:UpdatePanel ID="HerkomstCodeUpdatePanel" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                This content displays inside fancybox.
                <asp:TextBox ID="CurrentTimeTextBox" runat="server"></asp:TextBox>
                <asp:Button ID="RefreshContentButton" runat="server"></asp:Button>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

和JScript:

$(document).ready(function () {
    $("#popupTrigger").fancybox({
        autoDimensions: false,
        height: 250,
        transitionIn: 'elastic',
        transitionOut: 'elastic',
        width: 400
    });
});

现在我期待它会做的是,当你点击按钮(显示在fancybox中)时,它会更新文本框并执行我在代码隐藏中定义的任何内容.不幸的是,单击按钮时没有任何反应.

我试图触发一个__doPostback自己传递updatepanel的ClientID和/或按钮本身.但我似乎无法触发代码隐藏中的事件.

问题是,如果我删除fancybox,updatepanel按预期工作.所以我猜我是否可以在创建fancybox之前以某种方式找出按钮背后的事件处理程序逻辑,我可能能够在附加fancybox后重新创建eventhandler逻辑？我在任何地方都找不到它......

我正在使用ASP.Net WebForms 3.5和JQuery 1.4.1

更新

我通过使用下面的代码覆盖按钮上的客户端点击事件来触发codebehind button_click事件.关键是使用按钮的名称作为__doPostBack事件的发送者对象.剩下的唯一问题是所有其他值都不再发布.如果我在文本框中输入任何内容,请单击按钮,我的代码隐藏不再知道文本框中的内容.

$("#popupTrigger").fancybox({
    //.... other options,
    onComplete: function () {
        $("#RefreshContentButton").click(function () {
            __doPostBack($(this).attr('name'), '');
        });
    }
});

Answer 1

问题在于fancybox.它实际上在显示窗体时将控件放在窗体之外.你需要做的是修改你这样的fancybox插件(fancybox vers.1.3.4):

$('body').append(...成为$('body> form').append(...

并且presto一切正常:)