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 ca

Answer 1

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 2

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

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

Answer 3

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

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

Answer 4

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 5

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 <a> 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

Answer 6

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

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