Loading dynamic AJAX content into Fancybox

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

Answer by ori for Loading dynamic AJAX content into Fancybox

Try:

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

Answer by JFK for Loading dynamic AJAX content into Fancybox

If what you want is to display nzData inside fancybox, then use

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

Answer by Janis for Loading dynamic AJAX content into Fancybox

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

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

Answer by Nix for Loading dynamic AJAX content into Fancybox

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!

Answer by James Chambless for Loading dynamic AJAX content into Fancybox

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 by emfi for Loading dynamic AJAX content into Fancybox

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"              }          }      });  });  

Answer by rowilsonH for Loading dynamic AJAX content into Fancybox

http://stackoverflow.com/a/10546683/955745

Load ajax  $(".fancybox").fancybox();  

Answer by EternalHour for Loading dynamic AJAX content into Fancybox

I was interested in doing the same thing. I came to a similar solution, however it's different than any others recommended here. After looking at the documentation for both API's, 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 container for the data.

Answer by pablito.aven for Loading dynamic AJAX content into Fancybox

This is how I done it:

you need three elements:

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

2)#fancylink is a hidden with href to the fancybox div(in this case href="#fancycontainer")

3)#button is the clickable element which loads everything.

Add the following code in 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

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72