Detect a hash change no backspace with JavaScript

$details ​ 0: details#edit-group-findit-about.required-fields.field-group-tab.vertical-tabs__item.js-form-wrapper.form-wrapper.claro-details.claro-details–vertical-tabs-item​​ 1: details#edit-group-findit-contact.required-fields.field-group-tab.vertical-tabs__item.js-form-wrapper.form-wrapper.claro-details.claro-details–vertical-tabs-item​​ 2: details#edit-group-findit-who.required-fields.field-group-tab.vertical-tabs__item.js-form-wrapper.form-wrapper.claro-details.claro-details–vertical-tabs-item​​ 3: details#edit-group-findit-when.required-fields.field-group-tab.vertical-tabs__item.js-form-wrapper.form-wrapper.claro-details.claro-details–vertical-tabs-item​​ 4: details#edit-group-findit-where.required-fields.field-group-tab.vertical-tabs__item.js-form-wrapper.form-wrapper.claro-details.claro-details–vertical-tabs-item​​ 5: details#edit-group-findit-how.required-fields.field-group-tab.vertical-tabs__item.js-form-wrapper.form-wrapper.claro-details.claro-details–vertical-tabs-item​​ 6: details#edit-group-signup.required-fields.field-group-tab.vertical-tabs__item.js-form-wrapper.form-wrapper.claro-details.claro-details–vertical-tabs-item​​ 7: details#edit-group-findit-meta.required-fields.field-group-tab.vertical-tabs__item.vertical-tabs__item–last.js-form-wrapper.form-wrapper.claro-details.claro-details–vertical-tabs-item ​​ length: 8

the key:

if (!tabFocus) {
  var $locationHash = $this.find(window.location.hash);
  if (window.location.hash && $locationHash.length) {
    tabFocus = $locationHash.is('.js-vertical-tabs-pane') ? $locationHash : $locationHash.closest('.js-vertical-tabs-pane');
  } else {
    tabFocus = $this.find('> .js-vertical-tabs-pane').eq(0);
  }
}
if (tabFocus.length) {
  tabFocus.data('verticalTab').focus(false);
}

problem is i think that this only lives inside $(context).find('[data-vertical-tabs-panes]').once('vertical-tabs').each(function initializeVerticalTabs() { and so doesn’t get run when the URL hash changes but the page does not reload (and we don’t want the page to reload, to be clear).

No that wasn’t the key; that was indeed only run when loading a new page. The opening of the correct vertical tab is done in a different section.

In this line, }).end().siblings(':hidden.vertical-tabs__active-tab').val(this.details.attr('id')); the value of the id is for example: “edit-group-findit-when”

OK so that is what we want— to call our local focus method.

Problem is i’m not finding the hash in my $this when i duplicate that code.

When doing a self.focus, self/this is:

: a.vertical-tabs__menu-link

For the step before that which i’m trying to reproduce, $this should be:

: div.vertical-tabs__items.vertical-tabs__items–processed

… except i don’t think i want to add the .vertical-tabs__items–processed class? Or maybe i do so the other stuff doesn’t run.

tabFocus: {…}
0: details#edit-group-findit-when.required-fields.field-group-tab.vertical-tabs__item.js-form-wrapper.form-wrapper.claro-details.claro-details--vertical-tabs-item.js-vertical-tabs-pane
length: 1
$locationHash: {…}
0: details#edit-group-findit-when.required-fields.field-group-tab.vertical-tabs__item.js-form-wrapper.form-wrapper.claro-details.claro-details--vertical-tabs-item.js-vertical-tabs-pane
length: 1

Again the this we want:

wtf: Object(1) 0: div.vertical-tabs__items.vertical-tabs__items–processed length: 1

vs the this we get:

wtf: Object(1) 0: Window length: 1

OK. Have it working now. Can we prevent duplicate

arguments: Arguments ​​ 0: 0 1: div.vertical-tabs__items.vertical-tabs__items–processed​​ callee:hashchangeVerticalTabs() length: 2 Symbol(Symbol.iterator):values() : {…}