Loading AJAX dynamic content into Fancybox

Question

This scenario:

The user inserts his zip code into the input field, and when he clicks the magic button, he sees that the stores are closest to his location. I call the service excellent, and load it with AJAX kindness. Things are good.

Now, instead of embedding the results somewhere on the page, I want it to appear in Fancybox. I just can't do this job.

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 appear and show me the markup from the URL ( nzData ). Fancybox loads, but instead of the content, I get a line that says "The requested content could not be downloaded. Please try again later."

This is not a problem with the service, so I suspect I'm just missing something or raped 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

In the end, I uploaded the content to a hidden container on the page, and then displayed that content in Fancybox.

 $('#button').on('click', function(){ var nzData = '/url.com?Zip=8000 #module'; $('#foo').load(nzData, function(){ var foo = $('#foo').html(); $.fancybox(foo); }); }); 

This is not very nice, I admit it, but this is the only way to make it work. This morning I talked with another developer who had resorted to the same solution on a similar problem.

However, there should be a better solution. If anyone knows, I'd love to hear it!

Answer 2

I know this is an old question, but I 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 3

If you want to load url as ajax, you need to set type -

 $.fancybox({ href : nzData, type : 'ajax' }); 

Answer 4

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

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

Answer 5

I was interested in doing the same. I came to a similar solution, however, it differs from the others recommended here. After looking at the documentation for both APIs, this should work in V1 or V2.

 $('#button').on('click', function(){ $('#foo').load('/content.html', function(){ var $source = $(this); $.fancybox({ content: $source, width: 550, title: 'Your Title', etc... }); }); }); 

Then your data container.

 <div id="foo" style="display: none;"></div> 

Answer 6

Try:

 $.fancybox({ type: 'ajax', ajax: { url: nzData } }); 

Answer 7

If you want to display nzData inside fancybox use

 $.fancybox(nzData,{ // fancybox options }); 

Answer 8

stack overflow

 <a href="mypage.html #my_id" class="fancybox fancybox.ajax">Load ajax</a> $(".fancybox").fancybox(); 

Answer 9

Here is how I did it:

you need three elements:

1) you need a div that serves as a container for fancybox, call it #fancycontainer

2) #fancylink is a hidden <a> with href for the fancybox div (in this case, href="#fancycontainer" )

3) #button is a clickable item that loads everything.

Add the following code to the onload function:

 $('#fancynlink').fancybox(); $('#button').click(function(){ $.ajax({ //OPTIONS... //.......... success: function(data){ //Here goes the code that fills the fancybox div $('#fancycontainer').append(blablabla.....); //And this launches the fancybox after everything has loaded $('#fancylink').trigger('click'); } }); 

Hope this helps someone