在 jQuery Colorbox 中加载多面搜索结果的 Ajax 内容答案

【问题标题】：Load Ajax content of faceted search results in jQuery Colorbox在 jQuery Colorbox 中加载多面搜索结果的 Ajax 内容
【发布时间】：2013-09-06 17:31:49
【问题描述】：

首先让我说我是使用 Ajax 的新手。我正在尝试通过 ajax 加载内容，并将其显示在用户单击链接时启动的颜色框弹出窗口中。这是我到目前为止所拥有的，但我什至无法打开 Colorbox。有没有人有任何见解可以使这种事情发挥作用？谢谢！

$(document).ready(function(){
$(".show-overlay-link").click(function() {
  // get facet name from value of @id
  var id = $(this).attr("id");
  var facetName = id.replace(/^show-overlay-link-/, "");
  $.colorbox({href:"/ajax.xqy?action=facet&name=" + facetName});
  });
});

【问题讨论】：

标签： jquery ajax colorbox faceted-search facet

【解决方案1】：

首先，这不是 ajax...

其次，即使没有 ajax，问题出在您的颜色框配置中，因为您将 URL 传递给颜色框，而没有为 URL 提供一个可存放的位置，例如 iframe。您需要首先编写一个构造函数来为常规帖子构建查询 URL，然后扩展您的 colorbox 属性以包含 colorbox iframe 属性，如下所示。

$(document).ready(function(){
    $(".show-overlay-link").click(function() {

        // get facet name from value of @id
        var id = $(this).attr("id");

        // modify the returned id to remove the unwanted part of the id
        // for use in the query constructor
        var facetName = id.replace(/^show-overlay-link-/, "");

        // build a query constructor for your query URL
        var facetQuery = '/ajax.xqy?action=facet&name=' + facetName;

        // Configure colorbox with the iframe property set to true to give your
        // query response a target for the returned query result page.
        $.colorbox({
            iframe: true,
            href: facetQuery
        });
    });
});

如果没有看到服务器端脚本以及它如何处理发送给它的发布数据，以及知道处理发送回的返回数据的类型，我无法向您展示如何使用 ajax 执行此操作ajax 响应（即 json、xml、html、文本等）。但是，提供的代码仍应使用现有代码在客户端和服务器端完成您希望的工作。

另外，请务必注意，您使用的是相对 URL，而不是 facetQuery 的绝对 URL，这将与您的 colorbox.js 所在的位置相关，因为它是从 colorbox 本身内部调用的，并且除了它自己的位置之外，没有其他对路径的引用。最好为构造函数使用绝对 URL，因为它不会与 colorbox.js 在服务器上的存储位置相关。

希望对您有所帮助。

【讨论】：