Submitting form using Fancybox Ajax capabilities within an iFrame

Question

Hi,

I would like to use Fancybox to display a registration form within an iFrame. Then once the user has filled in his/her details.

The details should be processed using the ajax mechanisms within Jquery/Fancybox and the values displayed within the same Fancybox iframe.

How can this be implemented, I have been scratching my head all day and I dont know where Im going wrong.

Below is my code

$("a.interested").fancybox({
                'width': 400,
                'height': 400,
                'enableEscapeButton' : false,
                'overlayShow' : true,
                'overlayOpacity' : 0,
                'hideOnOverlayClick' : false,
                'type': 'iframe',
                 ajax: {
                           type     : "POST",
                           cache    : false,
                           url      : "/components/profile/buyer/regbuyer1.php",
                           success: function(data) {
                                $.fancybox(data);
                            }
                        }
            });

Some code examples would really help.

Thanx

Answer 1

The idea would be that you open an iframe in fancybox then in that iframe use regular post as all the requests within the iframe will stay in that iframe.

so all you have to do in your code is this:

$("a.interested").fancybox({
                'width': 400,
                'height': 400,
                'enableEscapeButton' : false,
                'overlayShow' : true,
                'overlayOpacity' : 0,
                'hideOnOverlayClick' : false,
                'type': 'iframe',
                'href': "/components/profile/buyer/regbuyer1.php" //or any other url that contains the contents of that iframe
            });

Answer 2

I believe the ajax options in fancybox are only for loading data, not sending data. You will need to wire up your own ajax post for the form. There is a great example on the fancybox site (http://fancybox.net/blog) example #5. I think this is exactly what you want.