Chrome Inspect Element shows errors on a forum

First, let me explain that I don’t know JavaScript. I am working on a site that has a separate phpBB forum that someone else added. This person wanted to use a different type nav than the rest of the site. The code seems to come from css menu maker. The errrors that I see in Inspect Element are as follows:

Uncaught ReferenceError: jQuery is not defined - script.js:61
Uncaught TypeError: Cannot read property ‘split’ of undefined - forum_fn.js:531

There are a couple of files that are dealing with the css menu - menu.css and script.js. I have commented out all code in the js file and the css file. The header.php file is calling the script.js file so I commented out that as well. The bottom line is I want the forums to have the same nav menu as the rest of the site so that the errors that are being detected can go away or the errors in the js code corrected. Of course the nav looks different than the rest of the site, which bothers me but not the owners of the site.

This is the script.js code -

(function($) {

  $.fn.menumaker = function(options) {
      
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) { 
            mainmenu.hide().removeClass('open');
          }
          else {
            mainmenu.show().addClass('open');
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });

        cssmenu.find('li ul').parent().addClass('has-sub');

        multiTg = function() {
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };

        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($( window ).width() > 768) {
            cssmenu.find('ul').show();
          }

          if ($(window).width() <= 768) {
            cssmenu.find('ul').hide().removeClass('open');
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery); // this is the line that is throwing the error

(function($){
$(document).ready(function(){

$("#cssmenu").menumaker({
   title: "Menu",
   format: "multitoggle"
});

});
})(jQuery);

The other error seems to come from this code -

// Fix tabs structure
		tabs.not('.tab').each(function() {
			var tab = $(this),
				className = tab.attr('class').split(' '), //this is the line throwing the error
				i;
			tab.attr('class', 'tab');
			for (i=0; i<className.length; i++) {
				if (className[i].substr(0, 5) == 'icon-') {
					tab.addClass(className[i].substr(5));
				}
			}
		}).children(':first-child').addClass('nav-link');

This is the staging site - http://staging.sacramentgame.com/forum/

This is the live site - http://sacramentgame.com/forum/

Could someone please help me either correct the code or get rid of it and have the nav be the one pulled from the site itself instead of having a separate one for the forum.

The forums changed here since I last visited so I hope I am displaying code correctly.

Your page includes jQuery, but your scripts.js is called before the jQuery is included. Look near <body> and you will see the scripts.js there.

Now, near the end of the page, jQuery is called.

Move your scripts.js AFTER the jQuery file is called.

Sorry Ryan, even more confused. This is what is in the header.php page for the forums -

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>

There is a page called overall_footer.html. Do I cut the two lines above from the header.php page and place them in the overall_footer.html page like this?

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>

<script type="text/javascript" src="{T_JQUERY_LINK}"></script>
<!-- IF S_ALLOW_CDN --><script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript src="  {T_ASSETS_PATH}/javascript/jquery.min.js?assets_version={T_ASSETS_VERSION}" type="text/javascript"%3E%3C/script%3E'));</script><!-- ENDIF -->
 <script type="text/javascript" src="{T_ASSETS_PATH}/javascript/core.js?assets_version={T_ASSETS_VERSION}"> </script>
 <!-- INCLUDEJS forum_fn.js -->
 <!-- INCLUDEJS ajax.js -->

 <!-- EVENT overall_footer_after -->

 <!-- IF S_PLUPLOAD --><!-- INCLUDE plupload.html --><!-- ENDIF -->
{$SCRIPTS}

 <!-- EVENT overall_footer_body_after -->

Just want to make sure I understand exactly where I need to place the code.

I’m looking at the live site, which looks like this

<!DOCTYPE html>
<html dir="ltr" lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />




<title>Sacrament Forum - Index page</title>




	<link rel="alternate" type="application/atom+xml" title="Feed - Sacrament Forum" href="http://sacramentgame.com/forum/feed.php" />			<link rel="alternate" type="application/atom+xml" title="Feed - New Topics" href="http://sacramentgame.com/forum/feed.php?mode=topics" />			

<link href="./styles/black/theme/print.css?assets_version=1" rel="stylesheet" type="text/css" media="print" title="printonly" />

	<link href="./styles/black/theme/fonts/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="./styles/black/theme/fonts/glyphicons-pro-1.9/css/glyphicons.css" rel="stylesheet" type="text/css" />

<link href="./styles/black/theme/stylesheet.css?assets_version=1" rel="stylesheet" type="text/css" media="screen, projection" />



<!--[if lte IE 9]>
	<link href="./styles/black/theme/tweaks.css?assets_version=1" rel="stylesheet" type="text/css" media="screen, projection" />
<![endif]-->





</head>
<body id="phpbb" class="nojs notouch section-index ltr " data-online-text="Online">

<div id="body-wrapper">




   <link rel="stylesheet" href="http://www.sacramentgame.com/forum/styles/black/template/menu.css">
   <script src="http://www.sacramentgame.com/forum/styles/black/template/script.js"></script>

See how scripts is there before jQuery is called? That needs to be after your initiate jQuery.

Ok so this -

<script src="http://www.sacramentgame.com/forum/styles/black/template/script.js"></script> //in the header.php

needs to go below this -

<script type="text/javascript" src="./assets/javascript/jquery.min.js?assets_version=1"></script> //in the overall_footer.html

Yes :grin: . At least, I suspect.

Your errors are saying jQuery isn’t initiated. And that’s because (I think) your jQuery file hasn’t loaded yet.

That’s my first guess.

Thanks, Ryan. I will play around in the staging site to see if this works. I appreciate your help as always.

I was able to solve the first problem and that error is gone. However, the second error is still happening. Somehow split is undefined from what I can tell. I have tried to find anything that would help on the Internet and even though there are other cases of the error, it is not exactly what mine is. I do not know if the person that added the forums added this code or if it is actually part of the black theme for phpBB.

// Fix tabs structure
	tabs.not('.tab').each(function() {
		var tab = $(this),
			className = tab.attr('class').split(' '),   //This is the line throwing the error
			i;
		tab.attr('class', 'tab');
		for (i=0; i<className.length; i++) {
			if (className[i].substr(0, 5) == 'icon-') {
				tab.addClass(className[i].substr(5));
			}
		}
	}).children(':first-child').addClass('nav-link');

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.