当前位置: 首页 > 面试题库 >

将动态AJAX内容加载到Fancybox

祁辰阳
2023-03-14
问题内容

这种情况:

用户将其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)。


问题答案:

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

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

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

});

我承认它不是很漂亮,但这是我可以使它起作用的唯一方法。今天早上,我与另一位开发人员进行了交谈,他们在类似问题中采用了相同的解决方案。

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



 类似资料:
  • 问题内容: 无论如何,我可以做到这一点,以便在内容加载后(通过Ajax)页面自动滚动到顶部吗? 这是我显示内容的代码: 因此,在“视图区域”加载其内容之后,我可以使页面自动滚动到顶部吗? 问题答案: 只需使用滚动功能 如果您要使用jQuery,那么这里是一个很好的平滑示例:) 从链接: 放入代码中

  • 问题内容: 我需要创建一个页面,该页面将使用Jquery和AJAX从外部页面加载div。 我遇到了一些很好的教程,但是它们都是基于静态内容的,我的链接和内容是由PHP生成的。 我基于我的代码的主要教程来自:http: //yensdesign.com/2008/12/how-to-load-content-via-ajax-in- jquery/ 我需要的确切功能如下: 主页包含一个永久div,其

  • 问题内容: 我使用jQuery Tools Plugin作为图像滑块(此处为image ),但是由于图像数量巨大,我一次只需要加载几次。由于它是用JavaScript编码的,因此我无法知道滚动位置。我想在最后一张图片出现时立即加载它们。我不知道我放在哪里,事件监听器也什么都没有。 这是我的代码http://jsfiddle.net/PxGTJ/ 请给我一点光! 问题答案: 我只需要使用jQuery

  • 问题内容: 好的,所以我对ajax和从外部加载内容还很陌生,希望对我的问题有任何见解。 我目前有一个隐藏的div,它是空的,单击链接后应该在其中加载ajax内容。 我目前有一个链接列表,所有链接都具有相同的类,并且我想在单击空白div时进行幻灯片切换,然后从链接要访问的页面中加载内容。 链接: 当前的jQuery: 刚接触Ajax并加载外部内容时,我想知道如何从位于标签中的链接页面加载内容。因此,

  • 注意: 本教程假定你已经下载和安装了CodeIgniter开发环境。 首先,你需要创建一个可以处理静态内容请求的控制器类。控制器,是一个用来代理完成某项任务的PHP类,它充当基于MVC架构应用程序的“粘合剂”(译者注:控制器用来粘合/协调不同模型和视图。随着教程的深入,你会更深刻的理解这一点)。 举例来说,假设存在某个针对如下URL的请求: http://example.com/news/late

  • Note: 这篇教程假设你已经下载好 CodeIgniter ,并将其 安装 到你的开发环境。 你要做的第一件事情是新建一个 控制器 来处理静态页面,控制器就是一个简单的类, 用来完成你的工作,它是你整个 Web 应用程序的 “粘合剂” 。 例如,当访问下面这个 URL 时: http://example.com/news/latest/10 通过这个 URL 我们就可以推测出来,有一个叫做 "n