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

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 2

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

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

Answer 3

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 4

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 5

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

Answer 6

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.