Quote

Dynamically loading floatbox content via AJAX

When floatbox first loads on a page, it runs its tagAnchors function to inventory all the floatbox-enabled anchors and area maps on the page, and to add the required onclick action to those anchors. If you subsequently dynamically update a portion of your page with content from an AJAX fetch, any floatbox-enabled anchors in that content won't be in floatbox's inventory and won't have the required onclick action attached to them. So what you have to do is to run the tagAnchors function against your new content after it arrives.

Your existing AJAX content insertion might look something like this:

if (xmlReq.readyState == 4) {
  document.getElementById('myXmlDiv').innerHTML = xmlReq.responseText;
}

Light up the floatbox anchors in that dynamic content by adding the following two lines after that insertion:

if (xmlReq.readyState == 4) {
  document.getElementById('myXmlDiv').innerHTML = xmlReq.responseText;
  fb.anchors.length = 0;
  fb.tagAnchors(document);
}

This clears the existing inventory of anchors and then re-inventories the entire document, including the freshly added new content. Now your new floatbox anchors will work.

If you are using an ASP.NET UpdatePanel, you can set a callback function to fire the floatbox tagging after your panel has finished updating. Put this javascript on the page:

function pageLoad(sender, args) {
  if (args.get_isPartialLoad()) {
    fb.anchors.length = 0;
    fb.tagAnchors(document);
  }
}