8

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

1

9 Answers 9

16

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'
    });
});
1
  • Thanks for chiming in. That is essentially the same answer as Janis. Problem is, that it will not work in Fancybox older than v2.0, if my memory serves me correctly.
    – Nix
    Commented Apr 12, 2013 at 8:19
11

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

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

$.fancybox({
  href : nzData,
  type : 'ajax'
});
3
  • It produces the same problem as when I tried implementing ori's answer. It requests the entire page, but doesn't show anything.
    – Nix
    Commented May 2, 2012 at 9:33
  • Yeah, my bad. I forgot to mention it. :/
    – Nix
    Commented May 2, 2012 at 10:18
  • This answer is definitely helpful. I thought just providing the ajax key would have implied I wanted the type to be ajax. Alas. Commented Jul 31, 2015 at 0:38
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!

2
  • This works flawlessly. Surprised that I can't get the fancybox ajax example to work. THANK YOU!
    – XVargas
    Commented Dec 4, 2012 at 19:50
  • Could this be simplified slightly using "get" instead of "load" like this: $('#foo').get(nzData, function(html) { $.fancybox(html); });
    – fredw
    Commented Sep 12, 2013 at 22:57
2

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.

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

Try:

$.fancybox({
  type: 'ajax',
  ajax: { 
     url: nzData
    }
});
1
  • Hmm, no. First of all it seems to load the entire page (and not just whatever is in #module), and secondly it doesn't display it in Fancybox. When it's done loading, the spinner stops and nothing happens. Replacing url with data does the same, except it seems to attempt to load /url.com?Zip=8000%20#module (note the %20).
    – Nix
    Commented May 1, 2012 at 20:33
0

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

$.fancybox(nzData,{
 // fancybox options
});
1
  • It's not nzData as such, but whatever is returned from the URL nzData. Your method only prints the URL itself.
    – Nix
    Commented May 2, 2012 at 7:19
0

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.