Site components each include jQuery, only 1 works

Ok, because of the scope of work and confidentiality, I cannot include sample code, however, I’ll do my best to explain my situation.

general format of each component: each are exactly the same format!

CSS tags - never any problems here
HTML - main html for the component
<script type="application/javascript" src="pathto/jquery-2.0.3.min.js"></script>
Other jQuery plugins required by the component
<script type="application/javascript" src="pathto/componentPlugin.js"></script>

The site I am currently working on is big on dashlet components, and each component is completed by different people and each component is completely independent of any other component. These components are options through settings, so they can be shown or not shown, and display in any order on the page.

The issue is that 2 of the components require jQuery, currently both are using jquery-2.0.3
There is NO ACCESS at all to the head, so adding jQuery there is NOT an option and must be included in each component. Each component also includes MANY jQuery plugins.

For ease of explanation, we’ll call Component 1 “C1” and component 2 “C2”
If only 1 of these are on the page at a time, there are no problems, so the problems are only when they are both displayed.

The exact errors depend on the order of the components, but the main premise is that there is always some plugin that comes up as undefined and sometimes, $ is undefined or $.fn is undefined.

I do not know what users will have on the page since its in there settings, but for testing, I know that if I have C1 first with jQuery included, then C2 and comment out the script tag for jQuery (essentially makeing only C1 load jQuery) things work just fine.

Problem lies with both components including jQuery, and something always breaks.

Any ideas?

77 thoughts on “Site components each include jQuery, only 1 works”