0

I have created a custom module which opens modal with a specific Url Pattern. I'm using the url in a view and it works well.

The only problem is that I also load another piece of jQuery to create a basic accordion which breaks after the modal has been loaded. The javascript is still called but it toggles twice instead of once.

/**
 *  Implements of hook_menu()
 */
function mymodule_menu() {
  $items['modals/%ctools_js/%'] = array(
      'title' => 'Product Modal',
      'page arguments' => array(1, 2),
      'page callback' => 'mymodule_modal_page',
      'access callback' => TRUE,
      'type' => MENU_NORMAL_ITEM,
  );
  return $items;
}
/**
 * A modal static page callback.
 * @param $js
 *   boolean CTools determination whether the user's browser is javascript enabled. 
 * @param $nid
 *   string The node ID of passed as an argument from the hook_menu() path
 * @return
 *   string The contents of the node, that will fill the modal window.
 */
function mymodule_modal_page($js = NULL, $nid = NULL) {
  if ($nid == NULL) {
    return 'No node id was sent. Error.';
  }
  if ($js) {
    ctools_include('modal');
    ctools_include('ajax');

  }
  $node = node_load($nid);
  $contents = render(node_view($node, 'modal', NULL));
  return ctools_modal_render($node->title, $contents) ;
}

  /**
   * Implements hook_views_pre_render()
   */
  function mymodule_views_pre_render(&$views) {
    if ($views->name == 'my_view') {
      //add accordion script
        ctools_include('ajax');
        ctools_include('modal');
        ctools_modal_add_js();

        $product_style = array(
          'product-modal-style' => array(
            'modalSize' => array(
              'type' => 'fixed',
              'width' => 400,
              'height' => 400,
              'addWidth' => 10,
              'addHeight' => 10,
              'contentRight' => 1,
              'contentBottom' => 1,
            ),
            'modalOptions' => array(
              'opacity' => .9,
              'background-color' => '#424242',
            ),
            'animation' => 'fadeIn',
            'modalTheme' => 'product_modal',
          ),
        );
      drupal_add_js($product_style, 'setting');
      ctools_add_js('product', 'mymodule');
      ctools_add_css('product', 'mymodule');
      drupal_add_js(drupal_get_path('module', 'ukgproducts') . '/js/product_accordion.js','file');      
    }
  } 
  }

  /**
  * Implements hook_theme().
  */
  function ukgproducts_theme() {
    return array(
      'views_view_unformatted__my_view' => array(
        'variables' => array('view' => NULL, 'options' => NULL, 'row' => NULL),
        'template' => 'views-view-unformatted--my_view',
        'base hook' => 'views_view_unformatted',
        'path' => drupal_get_path('module', 'mymodule') . '/theme',
      ),
    );
  }

accordion JS

(function($, Drupal)
{
  // Drupal.behaviors is the Drupal onload function:
  Drupal.behaviors.ukgproducts = {
    attach:function()
    {
      $('h2').click(function(e)
      {
        e.preventDefault();
        $(this).closest('.binder').find('.product-list').toggle('slow');
      });
    }
  }
}(jQuery, Drupal));

1 Answer 1

4

You should pass the context in and use the once() function to make sure your events are only bound once, and in the right context. Something like:

(function($, Drupal) {
  Drupal.behaviors.ukgproducts = {
    attach: function(context, settings) {
      $('h2', context).once('myaccordian').click(function(e) {
        e.preventDefault();
        $(this).closest('.binder').find('.product-list').toggle('slow');
      });
    }
  };
})(jQuery, Drupal);
1
  • 1
    Thanks clive this works perfect, for anybody else I also found this link which has greatly improved my understaning drupal.org/node/756722 Oct 15, 2013 at 13:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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