How to get an UpdatePanel inside fancybox working

Question

Hi,

I'm using fancybox to display the contents of a div when clicking a link. This works using the code below:

<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>

And the JScript:

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

Now what I'm expecting it would do is that when you click the button (which is displayed inside fancybox) it would update the textbox and do whatever I define it to do in the codebehind. Unfortunately nothing happens when I click the button.

I've tried to trigger a __doPostback myself passing the ClientID of the updatepanel and/or the button itself. I can't seem to trigger the event in the codebehind however.

The thing is if I remove the fancybox, the updatepanel works as expected. So I am guessing if I can somehow find out what eventhandler logic is behind the button before I create the fancybox, I might be able to recreate the eventhandler logic after attaching fancybox? I just can't find it anywhere...

I am using ASP.Net WebForms 3.5 and JQuery 1.4.1

Update

I got it to trigger the codebehind button_click event by overriding the clientside click event on the button using the code below. The key is in using the name of the button as the sender object for the __doPostBack event. The only problem that remains is that all other values aren't posted back anymore. If I type anything in the textbox, click the button, my codebehind doesn't know what's in the textbox anymore.

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

Answer 1

Hmm from a quick glance I'd say you need to postback more than just the name attribute. This would probably be the reason as to why your backend doesn't know what text is current (since it hasn't been postbacked)