Search code examples
jqueryajaxfancybox

Loading dynamic AJAX content into Fancybox


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).


Solution

  • I ended up loading the content into a hidden container on the page, and then displaying that content in a Fancybox.

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

    It's not very pretty, I admit it, but it's the only way I could make it work. I talked to another developer this morning, who had resorted to the same solution in a similar problem.

    Still, there must be a better solution. If anyone know, I'd love to hear it!