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

Nix
  • 5,746
  • 4
  • 30
  • 51
  • There may be a cross-domain policy issue http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/ – jocull Feb 18 '13 at 18:18

9 Answers9

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'
    });
});
James Chambless
  • 185
  • 1
  • 8
  • 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 Apr 12 '13 at 08: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"
            }
        }
    });
});
emfi
  • 649
  • 6
  • 23
9

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

$.fancybox({
  href : nzData,
  type : 'ajax'
});
Janis
  • 8,593
  • 1
  • 21
  • 27
  • It produces the same problem as when I tried implementing ori's answer. It requests the entire page, but doesn't show anything. – Nix May 02 '12 at 09:33
  • Yeah, my bad. I forgot to mention it. :/ – Nix May 02 '12 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. – Brendon Muir Jul 31 '15 at 00: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!

Nix
  • 5,746
  • 4
  • 30
  • 51
  • This works flawlessly. Surprised that I can't get the fancybox ajax example to work. THANK YOU! – XVargas Dec 04 '12 at 19:50
  • Could this be simplified slightly using "get" instead of "load" like this: $('#foo').get(nzData, function(html) { $.fancybox(html); }); – fredw Sep 12 '13 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>
EternalHour
  • 8,308
  • 6
  • 38
  • 57
1

Try:

$.fancybox({
  type: 'ajax',
  ajax: { 
     url: nzData
    }
});
ori
  • 7,817
  • 1
  • 27
  • 31
  • 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 May 01 '12 at 20:33
0

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

$.fancybox(nzData,{
 // fancybox options
});
JFK
  • 40,963
  • 31
  • 133
  • 306
  • It's not `nzData` as such, but whatever is returned from the URL `nzData`. Your method only prints the URL itself. – Nix May 02 '12 at 07:19
0

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

<a href="mypage.html #my_id" class="fancybox fancybox.ajax">Load ajax</a>
$(".fancybox").fancybox();
Community
  • 1
  • 1
rowilsonH
  • 11
  • 4
-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

pablito.aven
  • 1,135
  • 1
  • 11
  • 29