jQuery tabs not working

On this page:
https://www.thearenagym.com/schedule/

There should be a list of class showing below the days tabs and change when you click on each day. If you view source, the classes are actually there in the code. I don't know when it stopped working as I've only just started working with the site. There haven't been any recent changes that affect that page.

This issue seems to be in this code? But nothing I've tried makes it work again. It looks to me that wordpress is including all the correct .js files needed, but am I missing something?
<script type="text/javascript">
// perform JavaScript after the document is scriptable.
$(function() {
	// setup ul.tabs to work as tabs for each div directly under div.panes
	$("ul.tabs").tabs("div.schedule-content > div.pane",{
		effect: 'default',
		initialIndex: <?php echo $initial?>
	});
});

$(document).ready(function(){
	$.tablesorter.addParser({ 
        // set a unique id 
        id: 'days', 
        is: function(s) { 
            // return false so this parser is not auto detected 
            return false; 
        }, 
        format: function(s) { 
            // format your data for normalization 
            return s.toLowerCase().replace(/monday/,1).replace(/tuesday/,2).replace(/wednesday/,3).replace(/thursday/,4).replace(/friday/,5).replace(/saturday/,6).replace(/sunday/,7); 
        }, 
        // set type, either numeric or text 
        type: 'numeric' 
    }); 
        $(".day .schedule").tablesorter({sortList: [[1,0], [3,0]], widgets: ['zebra'],
	        headers: { 
				1: { sorter: 'time' },
	            2: { sorter: false }, 
	            4: { sorter: false } 
	        }
	}); 
    } 
); 

</script>

Open in new window


Any help would be greatly appreciated.
LVL 14
DzynitAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michael VasilevskySolutions ArchitectCommented:
If you look at the console you see the uncaught error "tabs is not a function":

Console Error
This is probably because your site cannot find/load the required jQuery file. You'll want to check the path.
0
DzynitAuthor Commented:
That's where I'm stumped because the path included is correct and works:
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

It's being enqueued directly by wordpress into the header.
0
Michael VasilevskySolutions ArchitectCommented:
I believe tabs is part of jQuery UI. Do you have a reference anywhere like:

https://code.jquery.com/ui/1.12.1/jquery-ui.js

Open in new window

0
Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

DzynitAuthor Commented:
That wasn't showing as being included in the source code. I added it, and now there is a new error message:

Error: cannot call methods on tabs prior to initialization; attempted to call method 'div.schedule-content > div.pane'

The script for the tabs is in the footer area, so it shouldn't be trying to do anything until after the content area loads where the schedule-content div is right?
0
Michael VasilevskySolutions ArchitectCommented:
Try:
$(function() {
	// setup ul.tabs to work as tabs for each div directly under div.panes
       $("ul.tabs").tabs();
	$("ul.tabs").tabs("div.schedule-content > div.pane",{
		effect: 'default',
		initialIndex: <?php echo $initial?>
	});
});

Open in new window


or

$(function() {
	// setup ul.tabs to work as tabs for each div directly under div.panes
	$("ul.tabs").tabs().tabs("div.schedule-content > div.pane",{
		effect: 'default',
		initialIndex: <?php echo $initial?>
	});
});

Open in new window

0
DzynitAuthor Commented:
Neither worked and still that same error.
0
Michael VasilevskySolutions ArchitectCommented:
Did you say this was working sometime previously?

Check for a reference to the jQuery UI CSS file: https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

If I look at the docs (https://jqueryui.com/tabs/), the divs should reference the element in the UL ahref. You just have it as a class:

DOM
Not sure if that's the only issue, but a working example is here (I only added Monday and Tuesday content for brevity).
0
DzynitAuthor Commented:
I added that include also and still no go.
And yes, at some point it worked - I just don't know when it stopped. We can verify by an old cache here:
https://web.archive.org/web/20170606153822/http://www.thearenamma.com:80/schedule/ that it worked in June.

I'm thinking this may be easier just to change to a show/hide onclick javascript even though that's a lot more code lines loading - what do you think? I'm not sure I even remember how to do that.
0
Michael VasilevskySolutions ArchitectCommented:
It's got to be a missing reference then.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DzynitAuthor Commented:
After doing some more research, it seems a change in the jquery library is what made this stop working. Rather than having to rework the classes, ids, and css, I just went with an onclick function.
0
DzynitAuthor Commented:
Thank you for your help. You helped me at least narrow down the actual cause.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.