jQuery 将动态 AJAX 内容加载到 Fancybox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10403634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading dynamic AJAX content into Fancybox
提问by Nix
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 优点。一切都很好。
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)。
采纳答案by Nix
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!
不过，必须有更好的解决方案。如果有人知道，我很想听听！
回答by James Chambless
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'
});
});
回答by emfi
回答by Janis
If you want to load url as ajax, you have to set type -
如果要将 url 加载为 ajax，则必须设置类型 -
$.fancybox({
href : nzData,
type : 'ajax'
});
回答by EternalHour
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>
回答by ori
Try:
尝试：
$.fancybox({
type: 'ajax',
ajax: {
url: nzData
}
});
回答by JFK
If what you want is to display nzDatainside fancybox, then use
如果你想要的是nzData在fancybox里面显示，那么使用
$.fancybox(nzData,{
// fancybox options
});
回答by rowilsonH
https://stackoverflow.com/a/10546683/955745
https://stackoverflow.com/a/10546683/955745
<a href="mypage.html #my_id" class="fancybox fancybox.ajax">Load ajax</a>
$(".fancybox").fancybox();
回答by pablito.aven
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 是一个隐藏的<a>带有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
希望这有助于某人
