在jQuery Colorbox中加载分面搜索结果的Ajax内容

时间:2013-09-06 17:31:49

标签: jquery ajax colorbox faceted-search facet

首先我要说的是我刚开始使用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});
  });
});

1 个答案:

答案 0 :(得分:1)

首先,这不是ajax ......

其次,即使没有ajax,问题还在于你的colorbox配置,因为你将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,text等)。 但是,提供的代码仍然可以使用客户端和服务器端的现有代码完成您的任务。

此外,重要的是要注意您使用相对URL而不是facetQuery的绝对URL,然后它将相对于colorbox.js所在的位置,因为它是从colorbox本身调用的,并且没有其他参考路径,除了它自己的位置。最好使用构造函数的绝对URL,因为它不会相对于colorbox.js存储在服务器上的位置。

希望有所帮助。