Loading dynamic AJAX content into Fancybox

Question

This scenario:

The user inserts his zip into an input-field, and when clicking the magic button, he gets to see stores closest to his location. I call the service perfectly fine, and load it in with some AJAX-goodness. All is well.

Now, Instead of inserting the results somewhere on the page, I want it displayed in a Fancybox. I simply can't make this work.

JavaScript:

$('#button').on('click', function(){    
   // Function to build the URL edited out for simplicity       
   var nzData = '/url.com?Zip=8000 #module';

   $.fancybox({
      ajax: { 
         data: nzData
        }
    });
});

I expect Fancybox to popup and show me the markup from the URL (nzData). Fancybox loads, but instead of content, I get a string saying "The requested content cannot be loaded. Please try again later.".

It's not a problem with the service, so I suspect it's just me overlooking something or raping the Fancybox API. So, what am I doing wrong?

EDIT: I forgot to mention, I am using the old version of Fancybox (v1.3.4).

Answer 1

I know this is an old question, but I've recently had to deal with something similar. Here is what I did to load ajax into fancybox.

$('#button').on('click', function(){
    $.fancybox({
        width: 400,
        height: 400,
        autoSize: false,
        href: '/some/url-to-load',
        type: 'ajax'
    });
});

Answer 2

fancybox uses a parameter "ajax" where you can pass your configuration (as it is described by jquery)

$("#button").click(function() {
    $.fancybox.open({
        href: "ajax.php",
        type: "ajax",
        ajax: {
            type: "POST",
            data: {
                temp: "tada"
            }
        }
    });
});