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?

Thanks in advance.

EDIT: The only good answer we have so far is not working for everybody (me included), so please help out if you have solution.

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

There is no problem with fancybox. i have used it and works perfect. have you added id="example2" to the <a> tag

you can use example1 to example6.

try it

Answer 3

Hello,

When I make this update:

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

My fancybox no longer opens. Any ideas?

Answer 4

Just wanted to point out that this makes the modal worthless in IE. Chrome/FF will submit the data just fine, but IE7/8 won't even show the modal pop up. Any ideas?

Answer 5

Getting Closer...

If, On line 719, you change:

$('#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>')
);

if (!$.support.opacity) {
    wrap.addClass('fancybox-ie');
    loading.addClass('fancybox-ie');
}

to:

$('#content').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>')
);

if (!$.support.opacity) {
    wrap.addClass('fancybox-ie');
    loading.addClass('fancybox-ie');
}

Where #content is a div inside of the body tag and inside of the forms tag. The modal will pop up on both FF/Chrome and IE but will only submit on FF/Chrome. Can anyone help identify how to get the asp.net controls to post to the code behind in the modal on IE?

Cheers.

Answer 6

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.