Jquery version problem - function not defined

JavaScript
1

Hi,

I’m currently using a search form autocomplete on my site using query-1.2.6.min.js.

I need to get a content slider on there too, which uses, jquery/1.3.2/jquery.min.js and jqueryui/1.5.3/jquery-ui.min.js

When I include all the files, it doesnt work, I get ‘function not defined errors’ only one or the other.

Is there a .js file that incorporates them all which I could use?

Any advice much appreciated, many thanks

2

Firstly, those versions are all very very old. jQuery is currently up to version 1.7.2! (You can quite often use the latest version even when plugins come with an older version. You’ll have to test of course.)

However, regardless of what versions you have, you should only ever include 1 version of the jQuery library. Something that is likely happening here is something like this:


- jQuery 1.2.6 included
    - Autocomplete script 

- jQuery 1.3.2 included
    - jQuery UI 1.5.3 included
    - Content slider script included

When your scripts are included in this order, everything is fine up until the point where the second jQuery library is included. It will essentially overwrite the $ and jQuery variables, meaning that any plugins that have attached themselves to the jQuery object will be removed.

The solution is simple, just include 1 version of the jQuery library before all other scripts that require jQuery.

Did this fix it? If not, it might be worth putting up a sample page to see what’s happening in greater detail.

3

I’ve updated my jquery files but still no joy, here is my code, if you could help that would be great.

Many thanks

Files:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" ></script>

$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

<div id="featured" >
		  <ul class="ui-tabs-nav">
	        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
	      </ul>

	    <!-- First Content -->
	    <div id="fragment-1" class="ui-tabs-panel" style="">
			<img src="images/image1.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
			 </div>
	    </div>

	    <!-- Second Content -->
	    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="images/image2.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
				<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
			 </div>
	    </div>

	    <!-- Third Content -->
	    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="images/image3.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >35 Amazing Logo Designs</a></h2>
				<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
	         </div>
	    </div>

	    <!-- Fourth Content -->
	    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="images/image4.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
				<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
	         </div>
	    </div>

		</div>
4

You’re trying to apply jQuery UI tabs to the <ul>, but you actually want to apply it to the container for things to work.

i.e.


[COLOR=#ff0000]$("#featured")[/COLOR].tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

(And make sure that code gets called inside of a document.ready block)


$(document).ready(function(){
    $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});