带有动态 json 内容的 Fancybox 2答案

【问题标题】：Fancybox 2 with dynamic json content带有动态 json 内容的 Fancybox 2
【发布时间】：2013-12-19 17:14:18
【问题描述】：

当有人单击按钮时，我正在尝试向 Fancybox 2.0 弹出窗口添加一些动态内容。我尝试了几件事，但我无法让它工作。我总是收到“无法加载请求的内容”。错误。

我首先想在单击按钮时加载 json 内容，然后打开带有内容的弹出窗口...

更新问题，因为它是重复的

我有什么：

HTML

<a href="#quick_cart" class="opener cart" id="productid_1234" data-fancybox-href=" url-to-product">Add to cart</a>

jQuery

$(document).ready(function() {

          $('.opener').click(function(e){
            e.preventDefault();

            var url = $(this).data('fancybox-href') + '/?format=json';
            console.log(url);

            $.fancybox({
              type: 'inline',
              beforeLoad: function (){
                quick_cart(url);
              }
            });
          });
        });
        function quick_cart(url){

          $.getJSON(url, function (data){

            $('#quick_cart').append('<div>' + data.product.title + '</div>');

          });    
        }

脚本为 json 内容加载正确的 url 并填充隐藏的 div #quick_cart。但是问题是我收到错误“无法加载请求的内容”。我不知道为什么...

会不会是“type: inline”不对？我尝试了几件事，甚至删除了那条线，但没有运气。当我删除该行时，弹出窗口不会出现。

我做错了什么？非常感谢任何帮助。

【问题讨论】：

有一个问题列表。将从一些开始。 1）。在var url = $(this).attr("href")+'/?format=json'; 中，$(this) 应该引用一个选择器，因为此时是undefined。 2）。您缺少显示要从中获取 href 属性的元素的 html，如数字 [1] 3)。 $(this).fancybox() 仅将fancybox 绑定到$(this)，但不会触发它。你可能宁愿做$.fancybox()。 4）。您的 API 选项末尾有一个额外的尾随逗号 AND 在您的代码中有一个额外松散的结束 } 大括号（您会看到语法错误）
@JFK：好的，谢谢提醒！但总的来说，“设置”是正确的做法吗？
仍然看不到href 的值是从$(this).attr("href")+'/?format=json 中得到的吗？

标签： jquery json fancybox

【解决方案1】：

好吧，我把我所有的头发都拔掉了。因此，为了帮助其他人，这是解决方案：

代码不知道将函数 quick_cart 中生成的 HTML 放在哪里。因此，fancybox 代码的简单 href 属性就足够了。像这样：

$.fancybox({
   type: 'inline',
   beforeLoad: function (){
     quick_cart(url);
   },
   href: 'quick_cart'
 });

希望这可以帮助某人；）

【讨论】：