I love jQuery Tools and Flowplayer, but they are not the only jQuery libraries I use. Namely I like to use jQuery UI, and often many of the great plugins written for jQuery.
However, jQuery UI and other jQuery plugins can only be used together with jQuery Tools, if tools are loaded right after jQuery.
This works:
This does not work:
In the latter example where jQuery Tools is loaded after jQuery UI, none of the UI methods will be available, like UI was never loaded in the first place. It seems Tools load in a way that overrides methods add to jQuery by other plugins.
I have been bitten by this bug several times now, so even if it's not fixed, at least other people hopefully will stumble upon this solution.
Here is the full test page:
Try switching the load order of Tools and UI, and test_element is no longer made into a slider - instead we get a javascript error.
However, jQuery UI and other jQuery plugins can only be used together with jQuery Tools, if tools are loaded right after jQuery.
This works:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.1.1/jquery.tools.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
This does not work:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.1.1/jquery.tools.min.js" type="text/javascript"></script>
In the latter example where jQuery Tools is loaded after jQuery UI, none of the UI methods will be available, like UI was never loaded in the first place. It seems Tools load in a way that overrides methods add to jQuery by other plugins.
I have been bitten by this bug several times now, so even if it's not fixed, at least other people hopefully will stumble upon this solution.
Here is the full test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.1.1/jquery.tools.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#test_element').slider();
});
</script>
</head>
<body>
<div id="test_element"></div>
</body>
</html>
Try switching the load order of Tools and UI, and test_element is no longer made into a slider - instead we get a javascript error.
