What do these errors mean and how can I fix them?

I'm building a dev version of a working app and I'm running into some trouble with getting some of the JQuery and JavaScript to fire correctly.

Here's a screenshot of some of what I've been contending with:

screenshot of the errors I'm trying to solve
The buggers being "Uncaught TypeError: $(...).dataTable is not a function" and "Uncaught TypeError: $(...).select2 is not a function." I'm still a newbie when it comes to JQuery so correct me if I'm wrong, but these errors are dealbreakers, yes? In other words, any JQuery that's after the code that's generating these errors will not fire. Yes?

Even if that's not the case, I still want to fix this.

What do those errors mean and how can I fix it? The thing that has me intimidated is it's referring to a JQuery library which is the actual JQuery library as opposed to some custom syntax.

What do I have here and how do I fix it?

Thanks!
brucegustPHP DeveloperAsked:
Who is Participating?
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.

Jan LouwerensSoftware EngineerCommented:
Make sure that you're importing the main jQuery library before importing any javascript library that's built on jQuery.

Also make sure that you're only importing these libraries once.
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
Chris StanyonWebDevCommented:
You have a few errors in there and they could be caused by a number of different issues. The first issue looks like you're trying to call an AJAX method synchronously, which is not a good idea.

Your other 4 errors are specific to 2 plugins - DataTables and Select2. Again, could be a number of reasons. Make sure you've loaded both the plugins correctly (check the Network tab of your Console). Those errors can also be caused by some errors in the options you pass into the plugins, so double check them (or remove them until things are working correctly). Also, for jQuery to work correctly on the DOM, you need to make sure you run your code in a document.ready block. This defers execution until the DOM is fully loaded.

Difficult to give you specific answers without seeing your code. It doesn't always mean the problem is with jQuery.
0
brucegustPHP DeveloperAuthor Commented:
Gentlemen! The problem was something that I've encountered with this app now on more than one occasion. The "window" has its own <head> tag which creates a bit of a problem in that you've got libraries being referenced more than once. Initially, I saw this as a redundancy and so I eliminated any of those that I saw as duplicates not realizing that the window is looking at the libraries in its own header and not the header of the parent.

I've been tasked with making repairs on this app  as well as refactoring it. This is one thing I'll definitely be improving.

Thanks!
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
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.