将动态AJAX内容加载到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.

用户将他的zip插入到输入字段中，当单击魔术按钮时，他可以看到最接近其位置的商店。我称这项服务非常好，并加入了一些AJAX-goodness。一切都很好。

Now, Instead of inserting the results somewhere on the page, I want it displayed in a Fancybox. I simply can't make this work.

现在，我希望它显示在Fancybox中，而不是在页面上的某处插入结果。我根本无法做到这一点。

JavaScript:

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

我希望弹出Fancybox并向我显示URL（nzData）的标记。 Fancybox加载，但不是内容，我得到一个字符串说“无法加载请求的内容。请稍后再试。”。

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?

这不是服务的问题，所以我怀疑这只是我忽视某些东西或强奸Fancybox API。那么，我做错了什么？

EDIT: I forgot to mention, I am using the old version of Fancybox (v1.3.4).

编辑：我忘了提，我使用旧版本的Fancybox（v1.3.4）。

9 个解决方案

#1

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.

我知道这是一个老问题，但我最近不得不处理类似的问题。这是我将ajax加载到fancybox中所做的。

$('#button').on('click', function(){
    $.fancybox({
        width: 400,
        height: 400,
        autoSize: false,
        href: '/some/url-to-load',
        type: 'ajax'
    });
});

#2

fancybox uses a parameter "ajax" where you can pass your configuration (as it is described by jquery)

fancybox使用参数“ajax”，您可以在其中传递您的配置（如jquery所述）

$("#button").click(function() {
    $.fancybox.open({
        href: "ajax.php",
        type: "ajax",
        ajax: {
            type: "POST",
            data: {
                temp: "tada"
            }
        }
    });
});

#3

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

如果你想加载url作为ajax，你必须设置类型 -

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

#4

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

我最终将内容加载到页面上的隐藏容器中，然后在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!

但是，必须有一个更好的解决方案。如果有人知道，我很乐意听到它！

#5

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.

我有兴趣做同样的事情。我找到了类似的解决方案，但它与其他推荐的解决方案不同。查看两个API的文档后，这应该适用于V1或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>

#6

Try:

尝试：

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

#7

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

如果你想要的是在fancybox中显示nzData，那么使用

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

#8

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

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

#9

-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

1）你需要一个div作为fancybox的容器，我们称之为#fancycontainer

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

2）#fancylink是一个隐藏的，带有href到fancybox div（在这种情况下是href =“#fancycontainer”）

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

3）#button是可加载所有内容的可点击元素。

Add the following code in the onload function:

在onload函数中添加以下代码：

$('#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

希望这有助于某人

#1