加载动态AJAX内容转换成的fancybox

用户把他的zip到输入字段，然后点击魔法按钮时，他会看到最接近他的位置商店。我称这项服务非常好，并且加入了一些AJAX优点。一切都很好。

现在，我不想在页面某处插入结果，而是希望它显示在Fancybox中。我根本无法完成这项工作。

的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 
     } 
    }); 
});

我期望的fancybox弹出，并告诉我从URL（nzData）的标记。 Fancybox载入内容时，我收到一个字符串，内容为“请求的内容无法载入，请稍后再试。”“。

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

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

来源

2012-05-01 Nix

有可能是跨域策略问题http://www.nczonline.net/blog/2010/ 05/25/cross-domain-ajax-with-cross-origin-resource-sharing/ – jocull

我最终将内容加载到页面上的隐藏容器中，然后显示该内容在Fancybox中。

$('#button').on('click', function(){  
    var nzData = '/url.com?Zip=8000 #module'; 

    $('#foo').load(nzData, function(){ 
     var foo = $('#foo').html(); 
     $.fancybox(foo); 
    }); 

});

这不是很漂亮，我承认它，但它是我唯一能够使它工作的唯一方法。今天早上我和另一位开发人员谈过，他们在类似的问题上采用了同样的解决方案。

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

来源

2012-05-02 09:51:08 Nix

这工作完美无瑕。惊讶的是，我无法获得fancybox ajax例子的工作。谢谢！ – XVargas

这可以通过使用“get”而不是像这样的“load”来简化：$（'＃foo'）。get（nzData，function（html）{$ .fancybox（html）;}）; – fredw

尝试：

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

来源

2012-05-01 20:18:52 ori

嗯，没有。首先它似乎加载整个页面（而不仅仅是'＃module'中的任何内容），其次它不会将它显示在Fancybox中。加载完成后，微调停止，没有任何反应。用'data'代替'url'确实是一样的，除了它似乎试图加载'/url.com？Zip = 8000％20＃module'（注意％20）。 – Nix

如果你想要的是显示nzData内的fancybox，然后用

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

来源

2012-05-01 23:03:28 JFK

它不是'nzData'，而是从URL'nzData'返回的。你的方法只打印URL本身。 – Nix

如果要加载的网址为AJAX，你必须设置类型 -

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

来源

2012-05-02 09:07:29 Janis

它产生与我尝试实现ori的答案时相同的问题。它请求整个页面，但不显示任何内容。 – Nix

我以为你用的是v2 – Janis

是的，我的不好。我忘了提及它。：/ – Nix

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

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

来源

2013-04-12 06:25:30

感谢您的支持。这与Janis基本上是一样的答案。问题是，如果我的内存正确地为我提供服务，它将不会在v2.0以上的Fancybox中运行。 – Nix

的fancybox使用参数 “Ajax” 的，你可以通过你的配置（因为它是由jquery描述）

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

来源

2014-09-06 17:11:40 emfi

完美，谢谢！ –

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

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

来源

2014-10-27 21:42:51 rowilsonH

我感兴趣的是做同样的事情。我找到了一个类似的解决方案，但它与此处推荐的其他解决方案不同。在查看这两个API的文档后，这应该在V1或V2中工作。

$('#button').on('click', function(){  
    $('#foo').load('/content.html', function(){ 

     var $source = $(this); 

     $.fancybox({ 
      content: $source, 
      width: 550, 
      title: 'Your Title', 
      etc... 
     }); 
    }); 
});

然后，您的容器中的数据。

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

来源

2015-02-16 09:44:06 EternalHour

-1

这是我如何做它：

需要三个要素：

1）你需要用作容器的的fancybox一个div，让我们把它#fancycontainer

2）#fancylink是一个隐藏的<a>与href的fancybox格（在这种情况下href="#fancycontainer"）

3）#button是c可以加载一切的可舔元素。

添加以下代码在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'); 
    } 
});

希望这可以帮助别人

来源

2015-06-15 14:25:13

加载动态AJAX内容转换成的fancybox

回答

相关问题