In the hierarchical_select.js and this function:

Drupal.ajax.prototype.commands.hierarchicalSelectUpdate = function(ajax, response, status, hsid) {
  // Replace the old HTML with the (relevant part of) retrieved HTML.
  $('#hierarchical-select-'+ hsid +'-wrapper', Drupal.HierarchicalSelect.context)
  .parent('.form-item')
  .replaceWith($(response.output));
};

It uses parent('form-item'). The theme I am using, http://drupal.org/project/bootstrap, does not have the default HTML element hierarchy that the parent('form-item') expects. A simple fix would be to use parents('form-item') (select ancestors) or parents('form-item').first() (select the first ancestor).

What do you think? Is this a change that can happen?

CommentFileSizeAuthor
#1 hierarchical_select-js-fix-parent-to-closest.patch597 bytesRobKoberg
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

RobKoberg’s picture

RobKoberg CreditAttribution: RobKoberg commented
FileSize
hierarchical_select-js-fix-parent-to-closest.patch597 bytes

Better to use closest('form-item') instead of parents('form-item').first(). Patch is attached

generalredneck’s picture

generalredneck
him/his
Primary language English
Location Texas, USA 🇺🇸
CreditAttribution: generalredneck commented
Status: Active » Reviewed & tested by the community

Awesome job.

Tested by the community.

bingorabbit’s picture

bingorabbit CreditAttribution: bingorabbit commented

That worked for me, Thanks a lot :)

mjs2020’s picture

mjs2020 CreditAttribution: mjs2020 commented

#1 Worked for me too. Thanks RobKoberg!

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers commented
Status: Reviewed & tested by the community » Needs review

1. Was this also tested with e.g. Bartik, to ensure it still works with other themes?
2. The correct solution seems to me to let the Hierarchical Select module add a class of its own.

The code looks sane, but it looks bizarre that what before was guaranteed to be the parent (first ancestor) now can be … any ancestor.

RobKoberg’s picture

RobKoberg CreditAttribution: RobKoberg commented

The jQuery closest function will find the first ancestor or self with the class name by traversing up the DOM hierarchy from the wrapper element (including the wrapper element). The way the current code is (using the parent function) is not appropriate because some themes (e.g. bootstrap) will create different HTML structures for the form-items and should not assume that the parent will always be the form-item.

http://api.jquery.com/closest/

I also want to look at using select2 for this interaction. Check out select2 to see if this could be an option. It provides an excellent UI similar to what you are currently providing:

http://ivaynberg.github.io/select2/

jOksanen’s picture

jOksanen CreditAttribution: jOksanen at Realityloop commented
Issue summary: View changes

There is also an issue in some themes not having '.form-item' at all.

stefan.r’s picture

stefan.r CreditAttribution: stefan.r commented
Status: Needs review » Needs work

If anyone has a patch and can address #5, I'll be happy to have a look at it

Gold’s picture

Gold
they/them
Location 20 minutes in the future
CreditAttribution: Gold at Catalyst IT commented
Status: Needs work » Closed (outdated)

Looking at where the $('#hierarchical-select-'+ hsid +'-wrapper', Drupal.HierarchicalSelect.context) appears in the DOM the first .form-item div also has a class of form-type-hierarchical-select.

Switching to Bootstrap I see that form-type-hierarchical-select is present. However, I also see that form-item is also present.

Is this still an issue? With no movement on this in 3 years I'm suspecting this is now outdated. I will mark it as such.

If this *is* still an issue please reopen it.