jQuery script breaks another JS script

Question

I have a calendar script I got off the internet working fine. Recently, I tried incorporating a jQuery sorting script, but I can't get both working together. It's either the calendar script or the sorting one that works.

I don't have much jQuery experience. I've tried changing the order in lots of ways, changing the jQuery versions and commenting out a bunch of JS scripts but I still can only get either get or one or none of them working.

The page is password-protected and the information being pulled from the database is private, but if it helps I'll try and make a separate page with dummy data; but I hope the mistake is a glaring one.

Here's the page head:

<head>
    <title>My Page</title>

<!-- css -->
    <link rel="stylesheet" type='text/css' href="stylesheets/datatable.css"/>
    <link href="stylesheets/pagination.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/jquery-ui-timepicker-addon.css" />
    <link rel="stylesheet" media="all" type="text/css" href="css/Aristo.css" />

<!-- scripts -->
    <!-- [if lte IE 8]>
    <script language="javascript" type="text/javascript" src="scripts/excanvas.js"></script> <![endif] -->

    <script type="text/javascript" src="js/jquery-latest.js"></script>


    <script type="text/javascript" src="scripts/jquery.datatables.js"></script>
    <script type="text/javascript" src="scripts/jquery.fullcalendar.js"></script>    
    <script type="text/javascript" src="scripts/jquery.placeholder.js"></script>
    <script type="text/javascript" src="scripts/jquery.accordion.js"></script>
    <script type="text/javascript" src="scripts/jquery.tabbed.js"></script>
    <script type="text/javascript" src="scripts/application.js"></script>

    <!-- If I enable this, the calendar works but the sorting script stops working:
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script> -->

    <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
    <script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
</head>

Is there an obvious mistake here? I'm using someone else's jQuery. Let me know if there is any other info I can add that might help with this...

try to load jquery-1.8.0.min.js as first. (and remove jquery-latest) — OctoD
– OctoD, Commented Sep 25, 2012 at 8:19

Yatharth Agarwal · Accepted Answer · 2012-10-14 14:38:01Z

The problem is that you are loading the jQuery library twice when you uncomment the part in question. This will result in the second script overwriting the $ and therefore also all functionality the plugins above have already attached to it (their functions are living inside the $ object).

Simple solution to your problem: Only load jQuery once (preferrably via a CDN), load the original library as the first script, then load its plugins, and then load your own scripts.

The correct order should therefore be:

<!-- Loading jQuery via Google -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<!-- Loading jQuery scripts -->
<script type="text/javascript" src="scripts/jquery.datatables.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="scripts/jquery.fullcalendar.js"></script>
<script type="text/javascript" src="scripts/jquery.placeholder.js"></script>
<script type="text/javascript" src="scripts/jquery.accordion.js"></script>
<script type="text/javascript" src="scripts/jquery.tabbed.js"></script>

<script type="text/javascript" src="scripts/application.js"></script>

Yatharth Agarwal · Accepted Answer · 2012-09-25 08:19:15Z

0

Your sorting script and your calendar script are using 2 different versions of jQuery. I assume the one your sorting script is pulling up is conflicting with the calendar one (the one commented out in your code). Specifically:

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

and:

<script type="text/javascript" src="js/jquery-latest.js"></script>

are competing with each other.

answered Sep 25, 2012 at 8:19

Yatharth Agarwal

4,5803 gold badges27 silver badges55 bronze badges

Collectives™ on Stack Overflow

jQuery script breaks another JS script

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related