Load Ajax content of faceted search results in jQuery Colorbox

Question

Let me start by saying that I am new to working with Ajax. I'm trying to load content via ajax and have it displayed in a colorbox pop up that is initiated when a user clicks a link. This is what I have so far, but I can't even get Colorbox to open. Does anyone have any insights to make this kind of thing work? Thanks!

$(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});
  });
});

Epiphany · Answer 1 · 2013-09-06T23:07:45.650

First, this is not ajax...

Second, even without ajax, the problem lies in your colorbox config, as you are passing a URL to the colorbox without giving the URL a place to live, such as an iframe. You need first to write a constructor to build your query URL for the conventional post, and then expand your colorbox properties to include the colorbox iframe property, as below.

$(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
        });
    });
});

I can not show you how to do this with ajax with out seeing the server-side script and how it is processing the post data sent to it, as well as knowing the type of return data that the processing is sending back in the ajax response (i.e., json, xml, html, text, etc.). However, the code provided should still accomplish what you wish with your existing code both client-side and server-side.

Also, it is important to note that you are using a relative URL instead of absolute URL for the facetQuery, which will then be relative to where your colorbox.js is located, as it is being called from within colorbox itself, and has no other reference to the path other than it's own location. Best to use an absolute URL for the constructor, as then it will not be relative to where the colorbox.js is stored on the server.

Hope that helps.

Load Ajax content of faceted search results in jQuery Colorbox

1 Answers1