0

I'm using Drupal 8. I have a vertical tabs menu on a content edit form. When the page loads, I want to trigger a click on one of the vertical tabs based on the value of a checkbox, which was determined by the tab that was open the last time the page was saved. (Similarly, when a vertical tab is clicked, this also changes the value of the checkbox; this code works as expected).

My code was working last week, but now I can't figure out what's wrong.

(function($, Drupal) {

Drupal.behaviors.calloutControl = {
        attach: function (context, settings) {
                // check if active callout tab is checked or not; trigger a click on the tab that corresponds to the value
                if ($(context).find('input[name*="[field_active_callout_tab]"]').prop('checked', false) == true){
                        $(context).find('.vertical-tabs .vertical-tabs__menu .vertical-tabs__menu-item.last a').trigger('click');
                        console.log("I'm MULTI");
                }
                else{
                        $(context).find('.vertical-tabs .vertical-tabs__menu .vertical-tabs__menu-item.first a').trigger('click');
                        console.log("I'm SINGLE");
                }

                // check and uncheck field_active_callout_tab based on multi or single link tab selection
                $(context).find('.vertical-tabs .vertical-tabs__menu .vertical-tabs__menu-item.first').click(function () {
                        $(context).find('input[name*="[field_active_callout_tab]"]').prop('checked', true);
                });
                $(context).find('.vertical-tabs .vertical-tabs__menu .vertical-tabs__menu-item.last').click(function () {
                        $(context).find('input[name*="[field_active_callout_tab]"]').prop('checked', false);
                });
        }
};

})(jQuery, Drupal);

Here is what it should look like to the user:

  1. Page loads
  2. Tab is open that was open on last save

For the first portion of the conditional, I have tried altering it slightly to remove the '== true', and then the first part of the code runs, triggers a click on the last tab and logs "I'm MULTI":

if ($(context).find('input[name*="[field_active_callout_tab]"]').prop('checked', false))

with '== true', the code will only run the second portion and log 'I'm SINGLE', triggering a click on the first tab.

In other words, I have correctly identified the tab elements and can interact with them, but they are not responding as expected.

Can someone please check my code to see if I am missing something? How can I use this jquery to trigger a click on page load?

  • 1
    IMO it sounds like this would be easier to have "active" classes that are applied instead of simulate clicks? – Kevin Jun 15 '18 at 15:48
  • I tried your suggestion and it turns out, it has to be a trigger click because adding the natural 'is-selected' class to the tab makes the tab active but does not open its contents. The reason is, the class is added to the list item which contains the 'a' that reveals the contents of the tab. A click adds the 'is-selected' class while also triggering the link. – lane Jun 17 '18 at 13:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.