Thickbox with Ajax loaded images

Question

I using ThickBox to display large image when thumbnails are clicked. This works great with static content that;s loaded with the page.

However, I'm now trying to use Ajax calls to display some of the content, as it involves API calls that can slow down the page generation. I've placed a small JQuery document.ready script like this:

Drupal.behaviors.brickFilterBehavior = function (context)  {
  var element = this;
  $('.brick-filter-test').each(function () {
    var element = this;
    $.get('/brick_filter/test/', function(data) {
      element.innerHTML = data;
    });
  });
});

This fetches HTML from the URL and inserts it into a <div> with the class "brick-filter-test". The handler for the URL looks like this:

function lego_filter_test()
{
  // Print out HTML directly.
  print ('<a href="https://images.brickset.com/sets/images/928-1.jpg" rel="lightbox" title="Space Cruiser And Moonbase"><img src="https://images.brickset.com/sets/small/928-1.jpg" alt="Space Cruiser And Moonbase" class="lego-filter-set-image"></a>');
  // Return success.
  exit(0);
}

The real handler uses API calls to generate the content, so I've simplified for this example. This just returns a static HTML snippit.

On my test page, I have the following HTML:

<div>
  <a title="Space Cruiser And Moonbase" href="https://images.brickset.com/sets/images/928-1.jpg" rel="lightbox">
    <img src="https://images.brickset.com/sets/small/928-1.jpg" alt="Space Cruiser And Moonbase" class="lego-filter-set-image">
  </a>
</div>
<div class="brick-filter-test">Loading test content...</div>

You can see this in action here: http://www.neoclassicspace.com/test

In the example, I have two thumbnail images, one statically included in the page, the other dynamically loaded. The static one behaves correctly, and the ThickBox pop-up gets applied. The dynamic one isn't getting the Thickbox treatment, even though it uses the same HTML.

I have tried adding alerts into the JS for both my code and Thickbox, and this has shown that my code runs before Thickbox initialises, so my dynamic DOM objects should be present when it runs.

I've also tried adding Drupal.behaviors.initThickbox(context); to the end of my function, which should cause Thickbox to reinitialise. I've confirmed this runs twice with an alert statement when I do this.

I'm really appreciate any suggestions on this.

Thanks,

James

Answer 1

You need to add the behaviors like this:

Drupal.attachBehaviors($('.ajax-container'));

So looks like in your case it would be:

Drupal.attachBehaviors($('.brick-filter-test'));

This should do the trick

$.get('/brick_filter/test/', function(result){
  element.innerHTML = data;
  Drupal.attachBehaviors($('.brick-filter-test'));
});