CODEWITHSUNDEEP
jqueryversionconflict
user1580380
user1580380

Reputation: 5

Why do I have to use multiple jQuery libraries to get my scripts working?

I use the code below in the my on a site I'm making:

            <!-- ScrollTo & highlightfade -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>              
<script type="text/javascript" src="'.$url.'/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="'.$url.'/js/jquery.highlightFade.js"></script>
<script type="text/javascript" src="'.$url.'/js/init.js"></script>

            <!-- The rest of the scripts -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>

<script type="text/javascript" src="'.$url.'/js/jquery.tipTip.js"></script>
<script type="text/javascript" src="'.$url.'/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="'.$url.'/js/nivo.slider.js"></script>
<script type="text/javascript" src="'.$url.'/js/nicEdit.js"></script>
<script type="text/javascript" src="'.$url.'/js/expand.js"></script>
<script type="text/javascript" src="'.$url.'/js/turn.js"></script>

I can't get all of the scripts working at the same time with just one library, and when using two libraries the datetimepicker-script doesn't work. What am I doing wrong?

Upvotes: 0

Views: 1155

Answers (2)

jfriend00
jfriend00

Reputation: 707218

Your code snippet shows multiple types of scripts:

  1. Core jQuery
  2. jQuery plug-in scripts that use and rely on jQuery
  3. Your own scripts that use and rely on jQuery
  4. jQuery UI (a UI library built on jQuery)
  5. jQuery plug-in scripts that use and rely on both jQuery and jQuery UI

Every script that uses jQuery is written and tested against a particular version of jQuery. Sometimes, it works with more than one version of jQuery and sometimes it only works with one particular version of jQuery.

It is the responsibility of the author of the script that uses jQuery to specify what versions of jQuery it is compatible with. It is the responsibility of the person using the script to know and understand what version of jQuery is required and to create the proper environment (with the right version of jQuery present) for the script to work properly.

A particular version of jQueryUI is compatible only with certain versions of core jQuery. Likewise, jQueryUI plug-ins are compatible only with certain versions of both jQueryUI and jQuery. You yourself must mix and match compatible versions of all of these.

If you wish to use multiple plug-ins that each require different versions of jQuery, it is sometimes possible to manage that, but it is not an easy thing to set up, it is not an efficient way to use jQuery and it requires some custom programming to load multiple versions and make sure that the right plug-in gets the right version of jQuery. In general, this is not recommended at all as it is inefficient and complicated and easy to mess up particularly if you aren't an advanced javascript developer.

To start with, you should make a list of what version of jQuery every script you have says that it is compatible with. When you have that list, you can start to understand what might be compatible with what or start doing some research on how you can find a set of scripts that solve your problems that are all compatible with the same versions of jQuery.

For example, jQueryUI 1.8.23 is a lot, lot newer than jQuery 1.3.2 (a pretty old version of the core jQuery library). I would suggest starting with those two and make sure they are compatible. Then, only add plug-ins that are compatible with the combination of these two that you end up with. You will need to consult the documentation for each plug-in to find out what versions of jQuery it is compatible with. If it does not have any documentation about jQuery compatibility, then look in the source for the plug-in and see if there is any indication there. If there still is not any compatibility information, then you will have to do your own testing/debugging to ascertain compatibility or choose a different solution that does give you compatibility information.

If you are a relative newcomer to jQuery and javascript development, then you probably want to stick with using combinations that contain documentation about what will work and what will not work and construct your environment to be compatible with their tested requirements. Debugging and fixing incompatibility problems is not a beginner topic. You may (or may not) be able to identify the first place a problem is occurring in a javascript debug console, but fixing something you find is wrong is a more advanced topic.

If you eventually determine that you must load multiple versions of jQuery on the same page for different plug-ins and there is no better way to solve your issue, that is possible, but it must be done carefully. This jQuery doc page describes the basics of how that is done.

Upvotes: 0

kalpaitch
kalpaitch

Reputation: 5271

You're using jQuery and the jQuery UI and a whole bunch of plugins, nothing wrong with that. My assumption would be if you're not sure about this, then read up more about jquery and the UI before using.

If the datepicker is causing troubles, look at some relevant examples to try to see what you're doing wrong - http://jqueryui.com/datepicker/

Edit: @user1580380 the jquery and jquery UI are two separate things, the first is the nice easy js library, the second is the UI to add extra features like the datepicker. You do need to include both for the datepicker to work. The chances are your error is occurring in your implementation of the datepicker, feel free to paste some code for this.

Edit: I notice you're using jquery 1.3, chances are that this is the problem, update this to the latest version which is 1.8.x and see if this corrects anything.

Upvotes: 1

Related Questions