Hi Guys

I'm developing an online store with drag'n'drop shopping cart, and I was setting up a carrousel with some products using this module (and views) but couldn't do it. Had to use my own implementation.
Problem is that JCarrouselLite creates two extra LI items, which is fine, but Javascript run before this is never run over the new created elements.

In my case that means that those two new products weren't Darggable! (Am I making any sense?)

Check the code that I used to implement my carrousel:

Drupal.behaviors.faf = function (context) {
  (function($) {
    // Lets play nice with DRUPAL
    // Check if element exists
    // Ceck if we run over this content already.
    if($(".heroes .view-content", context).length && !($(".heroes .view-content", context).hasClass('jCarouselLiteloaded'))) {
      // First, load jCarrouselLite as you would normally do anywhere
      $(".heroes .view-content", context).jCarouselLite({
        auto: 2000,
        speed: 1000,
        visible: 1,
      });
      // Now we mark our element with a special class. How creative
      $(".heroes .view-content", context).addClass('jCarouselLiteloaded');
      // And then we re-run Drupal Javascript. Why?
      // Well, jCarrouselLite creates two new LI elements
      // We need JS to be run over those 2 elements
      Drupal.attachBehaviors('.heroes .view-content');
    };
  })(jQuery);
};

So based on what I did, I'm guessing the implementation for this module for the node submodule could be something like this:
file: jcarousellite_node.module
line: 153

Original:

$(function() {
$("{$node->jcarousellite_container_class}").jCarouselLite({
btnPrev: "{$node->jcarousellite_btnprev_class}",
btnNext: "{$node->jcarousellite_btnnext_class}",
{$node->jcarousellite_options}
});
});

Changed:

$(function() {

    if($("{$node->jcarousellite_container_class}", context).length && !($("{$node->jcarousellite_container_class}", context).hasClass('jCarouselLiteloaded'))) {

$("{$node->jcarousellite_container_class}").jCarouselLite({
btnPrev: "{$node->jcarousellite_btnprev_class}",
btnNext: "{$node->jcarousellite_btnnext_class}",
{$node->jcarousellite_options}
});

      $("{$node->jcarousellite_container_class}", context).addClass('jCarouselLiteloaded');
      Drupal.attachBehaviors('{$node->jcarousellite_container_class}');
    };

});

Basically what I'm doing is making sure I call "Drupal.attachBehaviors" after JCarrouselLite runs. The class I add is to make sure we do not create an endless loop.

Same should be done in Views Submodule

I haven't tested the code. Don't have the module running anywhere.
If I have the time I'll take it for a spin. In the meantime I hope you have the time to give it a try.

Cheers!!!!

(setting to critical because Drupal.behaviors should be used every time you implement Javascript, specially when new elements are created.)

Comments

jm.federico’s picture

Title: Use Drupal.behaviors » Javascript not using Drupal.behaviors

Change title

jm.federico’s picture

Hum, well, see, I checked what I posted and noticed some errors already.

First, I forgot to use the Drupal.behaviors in my suggested fix.
Second, I decided to change the function call from

$(function() {
...
});

to

  (function($) {
...
  })(jQuery);

I've been doing that with all my code, helps if you are running more than 1 jQuery version or if you use multiple JS libraries.

So based on those 2 things, this is how I think the JS should be.

Drupal.behaviors.jcarousellite = function (context) {

  (function($) {

    if($("{$node->jcarousellite_container_class}", context).length && !($("{$node->jcarousellite_container_class}", context).hasClass('jCarouselLiteloaded'))) {

$("{$node->jcarousellite_container_class}").jCarouselLite({
btnPrev: "{$node->jcarousellite_btnprev_class}",
btnNext: "{$node->jcarousellite_btnnext_class}",
{$node->jcarousellite_options}
});

      $("{$node->jcarousellite_container_class}", context).addClass('jCarouselLiteloaded');
      Drupal.attachBehaviors('{$node->jcarousellite_container_class}');
    };

  })(jQuery);

};
jm.federico’s picture

Status: Active » Closed (won't fix)

mmm, closing because it is old as and seems just like noise now.