jCarousel should call Drupal.attachBehaviors() on AJAX-loaded content (support for Colorbox etc.) [#1258544]

I have a series of images displayed in a carousel. I am using the ajax setting and have 'Items to display' set to 3. It's important that I have the Views 'Use AJAX' setting on - in some cases there are over 20 images to display which can cause page load times to slow with AJAX turned off.

I am using the Colorbox library and module alongside jCarousel to display a larger version of each image when clicked. Here's where I run into problems. The first three images (which are present in the DOM on the first page load) correctly trigger the Colorbox plugin when they're clicked. However, after using jCarousel's navigation buttons (previous / next), Colorbox is not triggered - this is because Colorbox has not been initialised for the new images in the DOM. I can tell this is the case because the usual colorbox classes are not added to the AJAX images.

I am not sure how to go about adding this initialisation code, in effect 'refreshing' the active Colorbox elements on the page. Is there perhaps a callback I can use to add the necessary javascript on each AJAX call?

Any help greatly appreciated, thanks for making this module available.

Comment	File	Size	Author
#3	jcarousel_behaviors.patch	583 bytes	quicksketch

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

wuh CreditAttribution: wuh commented 24 August 2011 at 14:20

I have found a simple solution to the problem, adding Drupal.attachBehaviors(); inside the Drupal.jcarousel.ajaxResponseCallback in jcarousel.js. This could benefit other modules too - might it be considered for commit?

/**
 * AJAX callback for all jCarousel-style views.
 */
Drupal.jcarousel.ajaxResponseCallback = function(jcarousel, target, response) {
  if (response.debug) {
    alert(response.debug);
  }

  var $view = $(target);
  var jcarousel = $view.find('ul.jcarousel').data('jcarousel');

  // Add items to the jCarousel.
  $('ul.jcarousel li', response.display).each(function(i) {
    var itemNumber = this.className.replace(/.*?jcarousel-item-(\d+).*?/, '$1');
    jcarousel.add(itemNumber, this.innerHTML);
    
    // wuh: New line added to attach behaviors, this could benefit other modules/plugins too
    Drupal.attachBehaviors();
  });

  // Treat messages the same way that Views typically handles messages.
  if (response.messages) {
    // Show any messages (but first remove old ones, if there are any).
    $view.find('.views-messages').remove().end().prepend(response.messages);
  }
};

Comment #2

quicksketch

he/him

CreditAttribution: quicksketch commented 30 October 2011 at 01:32

Title:	jCarousel, Ajax & Colorbox	» jCarousel should call Drupal.attachBehaviors() on AJAX-loaded content (support for Colorbox etc.)
Version:	6.x-2.4	» 6.x-2.5
Category:	support	» bug

Thanks for the suggestion. You're correct that we should be calling Drupal.attachBehaviors() to the newly added items loaded via AJAX. We should only call Drupal.attachBehaviors() on the new part of the page though, calling it without any arguments makes it so that the entire page is checked for behaviors, which is unnecessary.