0

I work on a sandbox project which provides a Responsive Tabs to Accordion Panel style. Everything works fine except that once the page loaded, any Ajax callback (i.e add to cart or colorbox) seems to trigger the js function of my module.

The way js function is set in plugins/styles/reponsive_tabs.inc

function theme_responsive_tabstoaccordion_panels_style_render_region($vars) {
  //...
  $element = array(
    //...
    '#attached' => array(
      'js' => array(
        drupal_get_path('module', 'responsive_tabstoaccordion_panels') . '/plugins/styles/responsive_tabstoaccordion_panels.js' => array('type' => 'file'),
      ),
      //...
    ),
  );
  //set the wrapper id to give to responsive_tabstoaccordion_panels.js
  drupal_add_js(array('responsive_tabstoaccordion_panels' => array('tabstoaccordion_panel' => '#'.$tab_id)), array('type' => 'setting'));

Drupal behavior in responsive_tabstoaccordion_panels.js

(function ($) {
  $.fn.extend({
    easyResponsiveTabs: function (options) {
      //the main js function which is triggered
      //...
    });

    Drupal.behaviors.responsive_tabstoaccordion_panels = {
      attach: function (context, settings) {   
        $(settings.responsive_tabstoaccordion_panels.tabstoaccordion_panel).easyResponsiveTabs({
          //Set options
          type: 'default',            
          //...
        });
      }
    };
})(jQuery);

I guess it has to see with the way I attach my function to Drupal.behaviors ?

  • Yep, anything the uses Drupal behaviors will re-invoke Drupal.attachBehaviors() when its task has finished. What problem is this actually giving you, is your tab functionality being attached twice when you only want it attached once? – Clive Jun 12 '14 at 14:00
  • well, kind of. some Dom elts are added on page load by the tab fn, but unexpectedly added again whenever ajax callbacks... I hope you understand what I mean, I'm not very familiar with these concepts yet :( – Kojo Jun 12 '14 at 14:02
  • $(settings.responsive_tabstoaccordion_panels.tabstoaccordion_panel).once('my_module').easyResponsiveTabs({... should sort it – Clive Jun 12 '14 at 14:05
  • inside Drupal.behaviors you mean ? – Kojo Jun 12 '14 at 14:06
  • Yep, just change the existing line to the new one – Clive Jun 12 '14 at 14:07
1

All Drupal behaviors are called when an AJAX call is performed. This allows modules to attach its 'behaviors' to new loaded content.

There are much cases where the behavior should be attached just one time. For this cases the once function is recommended:

   Drupal.behaviors.responsive_tabstoaccordion_panels = {
      attach: function (context, settings) {   


    $(settings.responsive_tabstoaccordion_panels.tabstoaccordion_panel).once('rttap', function () {
      $(this).easyResponsiveTabs({
        //Set options
        type: 'default',            
        //...
      });
    }
  );  

This way the anonymous function that calls easyResponsiveTabs is called only one time for each element. If new elements are loaded the behavior is applied.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.