Fancybox - ASP.NET button not working

Question

I\'ve just determined using Firebug that when Fancybox window is created it actually takes all of my ASP.NET controls (contained in DIV tag) and puts them outside FORM tag.

Answer 1

Without any change in fancybox js library file, what works for me was below,

$('.your-selector').fancybox({ 
        afterShow: function () {
            $('.fancybox-overlay').appendTo('form');
        }
});

I have moved the fancybox div inside the form tag, and now, server side button is working like a charm :) All the best.. I hope this will work for you too. .:)

Answer 2

Fancybox 1.3.4 actually does postback.

But if is closed in OnClientClick that is before server side click event it wont postback .So The above is the solution to this problem.(Adding doPostBack in javascript function).

Normally Fancybox 1.3.4 does postback without any change in its .Js files. But to close it , need to write this line ScriptManager.RegisterClientScriptBlock(this, GetType(), "", "parent.$.fancybox.close();", true); in server side click event. Only then both serverside event gets called and fancybox also closes.

But Fancybox 2.1.3 (latest) does postback event after it is closed in OnClientClick.

Answer 3

For anyone needing a simple answer to this problem using Fancybox version 2 theres a much easier way of doing it. All you have to do is add parent: "form:first" in the code eg

    $(document).ready(function () {
        $(".various").fancybox({
            parent: "form:first",
            fitToView: true,
            width: '300px',
            height: '100px',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none',
            modal: false
        });
    });

then this will append the fancybox elements in the dom inside the form tag, rather than inside the body tag.

Answer 4

I use Fancybox 1.3.4 to show an aspx page as a popup page in fancybox iframe. But button in the popup page does not cause postback. I did not change anything as you said before. Rather I did the following.

 function check() 
 {
            var validated = Page_ClientValidate();
            if (validated) {
                __doPostBack('<%=bur.ClientID%>','');             
                parent.$.fancybox.close();                                                       
                return true;
            }
            else 
            {
                return false;
            }
 }



 <asp:Button ID="bur" runat="server" Text="ser"  
            OnClientClick="check()"   />


protected void bur_Click(object sender,Eventargs e)
{ //put breakpoint here.

}

Answer 5

I've been trying to figure out this problem all week, I haven't really had any luck

I just came across this article

http://usmanshabbir.blogspot.com/2010/10/click-server-button-problem-in-jquery.html

That explains how to get postback working with the jQuery UI Dialog box.

If it's not 100% necessary to use fancy box then this method is definitely worth a try, it's saved me a lot of hassle today.

Answer 6

Fancybox Version: 2.1.2

Line 1782 of jquery.fancybox.js

Change this:

this.el     = document.all && !document.querySelector ? $('html') : $('body');

To this:

this.el     = document.all && !document.querySelector ? $('html') : $('form:first');