0

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?

1 Answer 1

1

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.

2
  • Got it. To try to restate what you're describing, broadly, I'm creating a $('$prev_buttons').click(function(){my_function}); where {my_function} is the function I'm looking to trigger? In other words it seems the best way to approach this is to attach the event handler to the DOM element like you would on any (non-Drupal) website using jQuery?
    – YPCrumble
    Commented May 12, 2015 at 21:13
  • Yes, "attach the event handler to the DOM element like you would on any (non-Drupal) website using jQuery" but usinf Drupal behaviors to manage that attaching.
    – sanzante
    Commented May 13, 2015 at 15:17

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.