将动态AJAX内容加载到Fancybox中

Question

这种情况:

用户将他的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).

Answer 1

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

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

Answer 2

fancybox使用参数"ajax",您可以在其中传递您的配置(由jquery描述)

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

Answer 3

如果要将url加载为ajax,则必须设置类型 -

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

Answer 4

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

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

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

});

我承认，它不太漂亮，但这是我让它发挥作用的唯一方法。今天早上我和另一位开发人员交谈过，他在类似的问题上采用了相同的解决方案。

尽管如此，必须有更好的解决方案。如果有人知道，我很想听听！