TransWikia.com

Can I attach a javascript function to a Drupal.behaviors javascript function?

Drupal Answers Asked by YPCrumble on January 23, 2021

I want to trigger another function any time Drupal.behaviors.MultiPage (found in field_group/multipage) changes page.

It’s part of this code:

Drupal.behaviors.MultiPage = { 
  attach: function (context) {
    $('.multipage-panes', context).once('multipage', function () {

      var focusID = $(':hidden.multipage-active-control', this).val();
      var paneWithFocus;

      // Check if there are some wrappers that can be converted to multipages.
      var $panes = $('> div.field-group-multipage', this);
      var $form = $panes.parents('form');
      if ($panes.length == 0) {
        return;
      }   

      // Create the next/previous controls.
      var $controls;

      // Transform each div.multipage-pane into a multipage with controls.
      $panes.each(function () {

        $controls = $('<div class="multipage-controls-list clearfix"></div>');
        $(this).append($controls);

        // Check if the submit button needs to move to the latest pane.
        if (Drupal.settings.field_group.multipage_move_submit && $('.form-actions').length) {
          $('.form-actions', $form).remove().appendTo($($controls, $panes.last()));
        }   

        var multipageControl = new Drupal.multipageControl({
          title: $('> .multipage-pane-title', this).text(),
          wrapper: $(this),
          has_next: $(this).next().length,
          has_previous: $(this).prev().length
        }); 

        $controls.append(multipageControl.item);
        $(this)
          .addClass('multipage-pane')
          .data('multipageControl', multipageControl);

        if (this.id == focusID) {
          paneWithFocus = $(this);
        }   

      }); 

      if (paneWithFocus === undefined) {
        // If the current URL has a fragment and one of the tabs contains an
        // element that matches the URL fragment, activate that tab.
        var hash = window.location.hash.replace(/[=%;,/]/g, "");
        if (hash !== '#' && $(hash, this).length) {
          paneWithFocus = $(window.location.hash, this).closest('.multipage-pane');
        }   
        else {
          paneWithFocus = $('multipage-open', this).length ? $('multipage-open', this) : $('> .multipage-pane:first', this);
        } 
}
      if (paneWithFocus !== undefined) {
        paneWithFocus.data('multipageControl').focus();
      }
    });
  }
};

/**
 * The multipagePane object represents a single div as a page.
 *
 * @param settings
 *   An object with the following keys:
 *   - title: The name of the tab.
 *   - wrapper: The jQuery object of the <div> that is the tab pane.
 */
Drupal.multipageControl = function (settings) {
  var self = this;
  var controls = Drupal.theme('multipage', settings);
  $.extend(self, settings, controls);

  this.nextLink.click(function () {
    self.nextPage();
    return false;
  });

  this.previousLink.click(function () {
    self.previousPage();
    return false;
  });

What I want to do is track anytime the user clicks the “Next” or “Previous” buttons – the code that triggers this is at the bottom of the snippet.

Is there a way for me to bind an event handler to this function?

One Answer

Yes you can. You can attach as many event handlers to any DOM element as you want.

So you have to write your own module that alters the output (is a form? some form_alter function. Is a page? some ouptut alter function or theme function) adding your custom JavaScript.

In your custom JavaScript add the code using behaviors that attachs your event handlers for the click event.

The tricky part is how you locate the next and prev buttons. You can start from the code snippet you posted. It seems that prev and next buttons are located here:

 var multipageControl = new Drupal.multipageControl({
      title: $('> .multipage-pane-title', this).text(),
      wrapper: $(this),
      has_next: $(this).next().length,
      has_previous: $(this).prev().length
    }); 

See the has_next and has_previous entries.

Looking at the previous lines you can see:

// Transform each div.multipage-pane into a multipage with controls.

It seems that the $(this) code referes to a div.multipage-pane, so the buttons seem to be:

$prev_buttons = jQuery('div.multipage-pane').prev();
$next_buttons = jQuery('div.multipage-pane').next();

Disclaimer: I don't know that module so I am shooting blindly but I think this approach will work.

Answered by sanzante on January 23, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP