将动态AJAX内容加载到Fancybox中

时间:2012-05-01 20:09:18

标签: jquery ajax fancybox

此方案:

用户将他的拉链插入到输入字段中,当点击魔术按钮时,他可以看到最接近其位置的商店。我称这项服务非常好,并加入了一些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并向我显示网址(nzData)的标记。 Fancybox加载,但我没有内容,而是收到一个字符串,上面写着“无法加载请求的内容。请稍后再试。”。

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

编辑:我忘了提及,我使用旧版本的Fancybox(v1.3.4)。

9 个答案:

答案 0 :(得分:14)

我知道这是一个老问题,但我最近不得不处理类似的问题。以下是我将ajax加载到fancybox的过程。

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

答案 1 :(得分:10)

fancybox使用参数" ajax"您可以在哪里传递配置(如jquery所述)

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

答案 2 :(得分:8)

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

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

答案 3 :(得分:4)

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

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

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

});

这不是很漂亮,我承认,但这是我能让它发挥作用的唯一方式。今天早上我与另一位开发人员交谈过,他在同样的问题上采用了相同的解决方案。

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

答案 4 :(得分:2)

我有兴趣做同样的事情。我找到了类似的解决方案,但它与此处推荐的任何其他解决方案都不同。查看两个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>

答案 5 :(得分:1)

尝试:

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

答案 6 :(得分:0)

如果您想要在fancybox中显示nzData,请使用

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

答案 7 :(得分:0)

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

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

答案 8 :(得分:-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

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

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

Add the following code in the onload function:

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