Drupal Dork - Drupal 7

Trigger a javascript event when an autocomplete field changes

Brock — Tue, 29 Jan 2013 18:49:41 +0000

Related to my fieldset summary problem: autocomplete fields do not trigger the change event in Javascript, for some reason. I wound up stealing part of a patch I found somewhere (I would link to it if I could find it in my browser history) in order to override the autocomplete prototype function and trigger a new autocompleteSelect event when the user chooses an item in an autocomplete field. Just drop this function into a Javascript file in your module or theme:

(function ($) {
/**
 * Puts the currently highlighted suggestion into the autocomplete field.
 * Overridden from misc/autocomplete.js to add an event trigger on autocomplete
 */
if (Drupal.jsAC) {
  Drupal.jsAC.prototype.select = function (node) {
    this.input.value = $(node).data('autocompleteValue');
    // Custom: add an event trigger
    $(this.input).trigger('autocompleteSelect', [node]);
  };
}
})(jQuery);

Note that this goes inside the (function ($) {})(jQuery); block that appears in most Drupal Javascript files. If you're pasting into an existing file that already has them, you can omit the first and last line, and paste the function in between them.

Then you just bind to that event. Here's an example for the node author field on the node add/edit form:

$('input[name=name]', context).bind('autocompleteSelect', function() {
  // Value chosen in autocomplete field.
  // Do whatever you need to do.
  var chosen_value = $(this).val();
});

NOTE: After using this code for a few days I found an error. Drupal.jsAC is not defined on all pages, so an error is thrown when trying to set values on the prototype of a non-existent object. I've updated the code above to wrap it in a condition to check for Drupal.jsAC before overriding it.

One more update, from February 19, 2013:

It turns out that the select() function only runs when you click on an item in the autocomplete dropdown. If you use the arrow keys to select and item and hit enter to select it, the hidePopup() function runs instead (by way of onkeyup()), so you need to implement that one to. This is the core version, with only the autocompleteSelect trigger added:

Drupal.jsAC.prototype.hidePopup = function (keycode) {
  // Select item if the right key or mousebutton was pressed.
  if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) || !keycode)) {
    this.input.value = $(this.selected).data('autocompleteValue');
    // Custom: add an event trigger
    $(this.input).trigger('autocompleteSelect');
  }
  // Hide popup.
  var popup = this.popup;
  if (popup) {
    this.popup = null;
    $(popup).fadeOut('fast', function () { $(popup).remove(); });
  }
  this.selected = false;
  $(this.ariaLive).empty();
};

How to force an update of the summary on field sets (in vertical tabs)

Brock — Tue, 29 Jan 2013 18:45:22 +0000

Please excuse the long title: it took me a while to figure this one out, so I want to make sure that other people can find this when they need it.

On my current project, I'm changing the node author field based on the value of a user reference field on the node type: when a content admin sets the node reference field, the node author field is changed to match that user reference field value. Since the author field is shown in a fieldset, I wanted the summary on that fieldset to update when this change was made. It took me a while to figure out how, but it's pretty simple:

// Update the field summary if vertical tabs are in use
var tab = $('fieldset.node-form-author', context).data('verticalTab');
if (tab) {
  tab.updateSummary();
}

Module Release Announcement: Node Subpages 7.x-2.0-beta1

Brock — Sun, 22 Apr 2012 21:10:01 +0000

I've been on a bit of a CTools kick lately, and my latest experiment was Node Subpages.

Node Subpages allows site admins to configure per-content-type subpages that display the contents of a view or a field on the node. The project page has a more complete use case and example links.

I just posted the first 7.x-2.x release, which replaces the subpage content handling with CTools plugins. Previously, only Fields and Views could be used as the content of subpages, and they were the two hard-coded options. They're still the only two options, but the configuration and content for the subpages are provided by plugins. Any module can define additional plugins, though I still need to document how these plugins can be added and what they need to define. Next up, I might add Panels as subpage content, if I can figure out how to pass the node as a context.

Webform A/B Testing was the first module that I switched to use plugins, and that one actually went more smoothly. I started working on this update to Node Subpages at the airport when I was leaving Denver a month ago, but it gave me such grief that I sidelined it for a few weeks. Now, I think it's in pretty good shape but would love to get feedback from other people. I'm the only one who has tried it, so it really needs more testing before I can do a full 7.x-2.0 release. I'd also love feedback on the way I implemented the plugins: I found a few examples for building CTools plugins, and some with differing advice, so I'd be very interested to hear from others who have built modules to make use of plugins.

In any case, the next task for this project will be making the configuration exportable. If a content type is exported into a Features module, it would make sense that the subpage configuration would be included, but that's not the case right now. My plan is to use the CTools Export UI Template example module as a starting point.