[Resolved] Uncaught TypeError in offside.js

Home Forums Support Uncaught TypeError in offside.js

  • This topic has 5 replies, 2 voices, and was last updated 10 months ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1063389
    Tanya

    Hi,

    I have been customizing primary navigation. Specifically I added div, surrounding contents of the li in menu. div is used to create borders and I may be using it for some other styling requirements.

    This modification triggered a JavaScript error on the mobile menu.
    See here: https://assets-gritmatch-public.s3.amazonaws.com/2019-11-14_16-18-42.jpg
    And here: https://assets-gritmatch-public.s3.amazonaws.com/2019-11-14_16-32-59.jpg

    So, the error happens because a is no longer the firstChild of the ul.slideout-menu. The new div is.
    Also, the error only happens on mobile navigation only. It is not triggered on wide-screen navigation.

    I know this is not caused by GP but rather by my modifications. Is there any way for me to suppress/override the line that is causing an issue? I wouldn’t want to modify the GP source file.
    Thank you

    #1063582
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It looks like we have some javascript that isn’t expecting the div to be there, unfortunately. There isn’t really a way to let it know about the changes.

    I wonder if we can achieve the design you’re wanting to use without the div? Any examples of what you’re trying to do?

    #1065859
    Tanya

    Hi Tom. Good suggestion. I commented out JavaScript that adds ‘div’, thinking I will try and add styles without it. The error remained though. I did more investigation. Turns out error is happening because of the PHP code.

    I’d like to have a ‘Logout username’ item in 2-nd level of the main navigation. To do that, I create a placeholder on the menu with title ‘Logout’. Then I use xPath in PHP to find the element and add ‘href’ and username to it. The JavaScript error in mobile navigation appears only when I call saveHTML on DOMDocument.
    I thought maybe this is because I am altering the DOM (replacing ‘a’ tag). However, error happens even if I just loadHTML, do nothing with it and just saveHTML.

    What could be an issue here? Is it that by saveHTML I loose some eventListeners in JavaScript? Then why don’t I get the same error on non-mobile menu?

    Here is my PHP code.

    
    add_filter('wp_nav_menu_items', 'gm_generate_account_menu', 10, 2);
    function gm_generate_account_menu($menuItems, $args)
    {
    
      // only generate account menu item for top menu (browser and mobile)
      if ($args->theme_location == 'primary' || $args->theme_location == 'slideout') {
    
        if (is_user_logged_in()) {
    
          // Get user
          $curentUser = wp_get_current_user();
    
          // Load $menuItems into DOM to search and modify it.
          $doc = new DOMDocument();
          $doc->loadHTML($menuItems);
    
          // Find 'Logout' item on the menu. This is just a placeholder without the link.
          $xpath = new DOMXpath($doc);
          $placeholderLogout = $xpath->query('//a[@title="Logout"]');
    
          if ($placeholderLogout->length > 0) {
            // Create Logout link element.
            $aLogout = $doc->createElement('a',  "LOGOUT " . $curentUser->user_login);
            // htmlspecialchars_decode is required to convert & to &. Otherwise WP logout confirmation screen appears.
            $aLogout->setAttribute('href',  htmlspecialchars_decode(wp_logout_url()));
            $aLogout->setAttribute('title',  "Logout");
            $aLogout->setAttribute('id',  "main-nav-logout");
    
            // Replace 'Logout' placeholder on the menu with newly created link element.
            $placeholderLogout->item(0)->parentNode->replaceChild($aLogout, $placeholderLogout->item(0));
    
            // Save DOM changes
            $menuItems = $doc->saveHTML();
          }
        } else {
    
          $menuItems .= '<li><a href="' . wp_login_url(get_permalink()) . '">Log in</a></li>';
        }
      }
    
      return $menuItems;
    }
    
    #1065940
    Tom
    Lead Developer
    Lead Developer

    So what if we created a shortcode to create the menu item instead of replacing the placeholder?

    Another option is filtering the menu items and adding the link, but that would force it to be the first or last menu item.

    Let me know if either of those sounds like a good solution 🙂

    #1066025
    Tanya

    Hi Tom. Thanks for the options! I do not really like an option of shortcode because then (I assume) I will need a plugin to run it on the menu and I try to minimize plugins. Also, I do like Logout being on the 2-nd level and not the 1-st/last item.

    Having said that, I found the solution. Looking at page source I noticed that loadHTML added DOCTYPE. So, I added an extra parameter ‘LIBXML_HTML_NODEFDTD’

    $doc->loadHTML($menuItems,LIBXML_HTML_NODEFDTD);

    Now the error is gone! 🙂

    #1066658
    Tom
    Lead Developer
    Lead Developer

    Awesome! Glad you got it working 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.