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. So I guess this is the reason why then ASP.NET button doesn't do anything - it is placed outside form.

So, do you have any suggestions how I can prevent this (or make that ASP.NET button work), other than using completely different modal dialog?

EDIT: OK, people are reporting that some of the proposed fixes are working for them on certain versions. So, be sure to read all of the answers / scroll to the bottom for how to fix this issue on different Fancybox versions.

Answer 1

You need to change this (somewhere around line 719 of jquery.fancybox-1.3.1.js):

$('body').append(
    tmp         = $('<div id="fancybox-tmp"></div>'),
    loading     = $('<div id="fancybox-loading"><div></div></div>'),
    overlay     = $('<div id="fancybox-overlay"></div>'),
    wrap        = $('<div id="fancybox-wrap"></div>')
        );

to

$('form').append(
    tmp         = $('<div id="fancybox-tmp"></div>'),
    loading     = $('<div id="fancybox-loading"><div></div></div>'),
    overlay     = $('<div id="fancybox-overlay"></div>'),
    wrap        = $('<div id="fancybox-wrap"></div>')
);

Answer 2

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 3

Fancybox Version 2.1.4

Change these 2 lines

Around Line 2069 :

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

to

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

and around Line 1960 :

this.overlay = $('<div class="fancybox-overlay"></div>').appendTo('body');

to

this.overlay = $('<div class="fancybox-overlay"></div>').prependTo('form');

You could also use appendTo but that's up to you. In my case I needed prependTo.

Answer 4

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 5

Without altering the FancyBox source, put this after the FancyBox script (outside any load events!!!):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/#.#/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-#.#.#.pack.js"></script>
<script type="text/javascript">

    // Override $.fancybox.init to fix ASP.NET PostBack bug;
    var fancyboxInitOld = $.fancybox.init;
    $.fancybox.init = function () {
        fancyboxInitOld.apply(arguments);
        $("#fancybox-tmp, #fancybox-loading, #fancybox-overlay, #fancybox-wrap").appendTo("form:first");
    };

    // Your code ...

</script>

Answer 6

jquery.fancybox-1.3.4.js line 1040

//$('body').append(
   $('form').append(
            tmp = $('<div id="fancybox-tmp"></div>'),
            loading = $('<div id="fancybox-loading"><div></div></div>'),
            overlay = $('<div id="fancybox-overlay"></div>'),
            wrap = $('<div id="fancybox-wrap"></div>')
        );

Works (my asp:Button does postback) for me on FF and IE9, thanks for the solution

Answer 7

The above update didn't work for me, the fancybox was still added outside the form. I then commented out those 6 lines in jquery.fancybox-1.3.2.js and found they weren't being used at all in my code.

I did a search on 'body' in the fancybox js files and changed it to 'form' in:

jquery.fancybox-1.3.2.js (ln 484)
jquery.fancybox-1.3.2.pack.js (ln 27, ln 41)

The fancybox is now getting added to the form and the server controls are working.

Answer 8

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');

Answer 9

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 10

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 11

If refreshing the parent is a solution which serves the purpose, you can refresh onClosed:

$(".fancybox").fancybox({
  'onClosed': function() {
   parent.location.reload(true);
  } 
});

Answer 12

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 13

You don't need to change any code or any library... Just try this..

$('.fancybox').fancybox({
     parent: "form:first", // jQuery selector
});

Answer 14

Heres the worst solution possible, however it worked for me. I needed faceybox and codebehind at the same time. Setup your fancy box to load when button clicked. Then onClosed pass values to another C# page and do the code behind on Page Load.

<script type="text/javascript">
    $(document).ready(function () {
    $(".fancy").fancybox({
        onClosed: function () {
            window.location.href = "worker_addcarrier.aspx?name=" + document.getElementById('<%=txt_carriername.ClientID%>').value +
                "&password=" + document.getElementById('<%=txt_password.ClientID%>').value +
                "&email=" + document.getElementById('<%=txt_email.ClientID%>').value;
        }
    });
});

and then just the "class=" thing here:

<asp:Button ID="Button1" href="logo.png" runat="server" class="fancy" Text="Create" Width="109px" BorderColor="#009933" OnClick="Button1_Click" />