Can't Get jQuery UI Plugin to Work!

[chaseman]

I've downloaded the package from jqueryui.com,

 

I've selected all the components just so I can try them all out.

 

Then in my HTML document I link to the correct jQuery files like these:

 

<link type="text/css" href="../js/css/themename/jquery-ui-1.8.11.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="../js/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../js/js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="../js/js/jquery-1.5.2.js"></script>

 

The first three belong to the UI plugin while the fourth belongs to the actual jQuery library.

 

Now I try the same example given in documentation which is the date picker:

<script type="text/javascript">
$(document).ready(function() {
$('#date').datepicker();
});
</script>

<form action="" method="post">
<input type="text" name="date" id="date" />
</form>

 

And it doesn't work.

 

Other things I try with the jQuery UI plugin do not work either, but the normal jQuery library works fine though - so that means the path is pointing to the correct files, and filenames.

 

This for example does NOT work:

 

$('#disclaimer p').hover(function() {
$(this).animate({height: '+=300px'}, 2000, 'easeOutBounce');
});

 

But this DOES:

 

$('#disclaimer p').hover(function() {
$(this).animate({height: '+=300px'}, 2000, 'swing');
});

 

What could be the reason, that the UI plugin doesn't work for me?

[JonnoTheDev]

You are not including all these libraries are you? You have clashing versions of the jQuery library. If you need to use 2 different versions of jQuery in the same document you must follow the instructions on the jQuery website.

<link type="text/css" href="../js/css/themename/jquery-ui-1.8.11.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="../js/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../js/js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="../js/js/jquery-1.5.2.js"></script>

 

You are using 1.5.1 & 1.5.2 in the same document. Should be:

 

<link type="text/css" href="../js/css/themename/jquery-ui-1.8.11.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="../js/js/jquery-1.5.2.js"></script>
<script type="text/javascript" src="../js/js/jquery-ui-1.8.11.custom.min.js"></script>

 

Also, use absolute paths or relative to the document root as it is easier if you move files into folders for any reason:

 

<link type="text/css" href="/js/css/themename/jquery-ui-1.8.11.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="/js/js/jquery-1.5.2.js"></script>
<script type="text/javascript" src="/js/js/jquery-ui-1.8.11.custom.min.js"></script>

 

 

[chaseman]

Thank you a lot that worked. I didn't even notice the clashing versions.