Refresh menu after input parameter

We're building a web application and want to refresh the menu after giving an input parameter.
For some reason, the arrows that indicate that the menu option is a drop down menu option, disappear after refreshing the menu.

Before the refresh:

After the refresh:

The question is: how can we prevent the arrows to be removed after the refresh,
or how can we bring them back?

Details:
- development environment
- version 10.0.1018.0


Hi Jolinda,

That is certainly strange that the arrows disappear.  I have not seen that before.

To prevent the arrows disappearing depends on what is causing the problem.

I would first inspect the HTML of the menu items in Chrome 

* check if the submenu items are present or have disappeared,

* compare the classes and calculated CSS attributes for the main menu items when the arrows are present to when the arrows have disappeared, is there a missing class?

Unfortunately, they are only questions, which you have probably investigated already.

To help further, it would help me to understand which template is being used and the structure of the menus and submenus.  Also which element is the one being freshed and how is the code performing the refresh.

I hope this helps.

Kind regards,

Stuart

Hi, 

Besides the advice that was given, could I ask a few questions? 

Is this Traditional or React web app? 

When is the refresh happening? After the page was loaded? During preparation of the page? 

How is the refresh being made? Through Ajax Refresh of the Menu Web Block in the page? Action called as Submit? 

How is you providing the value to the input parameter of the menu Web block, a variable? 

Is this a normal menu Web block, using Drop Down Menu, or it is a personalize one? Or a React menu? 

Could you provide a minimum working module that we could see the behaviour and the code, without dependencies (so we can publish it)? Or at least show, through Screenshots, relevant menu structure, code, etc? 

Cheers 

Hi Stuart!

Thank you for the quick reply!
We are using the Lisbon theme, the standard web block for the menu, that is also the element being refreshed:

And the action in which the menu is being refreshed (within a detail page):

We will check the HTML/CSS as well and get back to you if we find something strange!


Kind regards,
Jolinda

@Stuart:
After the refresh, the arrow is removed from the class:
Before:
After:



@Eduardo inline additional information that has not already been given:
Is this Traditional or React web app? Traditional web app -> Lisbon theme

When is the refresh happening? After the page was loaded? During preparation of the page? 

How is the refresh being made? Through Ajax Refresh of the Menu Web Block in the page? Action called as Submit? action called Ajax Submit

How is you providing the value to the input parameter of the menu Web block, a variable

Is this a normal menu Web block, using Drop Down Menu, or it is a personalize one? Or a React menu? 

Could you provide a minimum working module that we could see the behaviour and the code, without dependencies (so we can publish it)? Or at least show, through Screenshots, relevant menu structure, code, etc?
Do you have enough information by previously posted information? If not than we will happily provide you a minimum working module.

Many thanks guys, we appreciate every input!

@Stuart
The following case is causing the problem (it seems), do you have a fitting solution or a lead where we can fix this?

I would first inspect the HTML of the menu items in Chrome 

* check if the submenu items are present or have disappeared,

* compare the classes and calculated CSS attributes for the main menu items when the arrows are present to when the arrows have disappeared, is there a missing class?

Anything that can help would be nice!

Solution

Hi Jolinda,

I managed to reproduce this doing exactly as you have done.  This is definitely a bug.  I encourage you to lodge a support ticket about it.

In the meantime, I have a solution for you.

  • Create a webblock called "MenuFix"
  • In the MenuFix webblock's Javascript parameter put the below code snippet (MenuFix Javascript)
  • Then add an expression and set its Escape Content parameter to No.  In the expression add the below code (MenuFix Expression).
  • Then open the Menu webblock in Common, and add the MenuFix webblock to the bottom.

Whenever the menu renders, including when it is ajax refreshed, it will run MenuFix.fixChildMenus() and add in the arrow.

I hope this helps!

Kind regards,

Stuart


Oh and here is the code (see attached module):


MenuFix Expression:

"<script>MenuFix.fixChildMenus();</script>"

MenuFix Javascript:

MenuFix = (function() {

    function fixChildMenus() {
        $('.Menu_DropDownPanel').each(function(index) {
          var ph = $(this).find('.Menu_SubItemsPlaceholder');
          if (ph.length && ph.is(':parent')) {
            // console.log($(this).attr('id') + ' has submenus');
            var parent = $(this).parent();
            var topMenuChild = parent.find('.Menu_TopMenu div:first-child');
            if (topMenuChild.length) {
              var arrow = topMenuChild.find('.Menu_DropDownArrow');
              if (!arrow.length) {
                topMenuChild.append('<span class="Menu_DropDownArrow"></span>');
                // console.log('Add arrow to ' + topMenuChild.attr('id'));
              }
              else {
                // console.log('Already has an arrow ' + topMenuChild.attr('id'));
              }
            }
          } else
          {
            // console.log($(this).attr('id') + ' has NO submenus');
          }
        });
    }
    
    return {
        fixChildMenus: fixChildMenus
    };
})();
Solution

Hi Stuart!
 
We created and used the web block as you suggested and used your code and now the arrows remain in the menu. You really helped us out here, thank you very much!!
I'll mention the bug to support as well..

Kind regards,
Jolinda

That is great to hear!  Thank you for logging the bug too, that will certainly benefit the community when it is fixed.

All the best,

Stuart