I've a puzzling difference between two pages that have very similar content. Both pages load the same set of scripts:
<script type="text/javascript" src="scripts/modernizr.min.js"></script>
<script type="text/javascript" src="scripts/jquery.min.js?v=1.8.3"></script>
<script type="text/javascript" src="scripts/jquery.colorbox.min.js"></script>
<script type="text/javascript" src="scripts/jquery.tools.min.js"></script>
<script type="text/javascript" src="scripts/URI.js"></script>
and they then have this $(document).ready()
:
$(document).ready(function () {
$(".profileImage").tooltip({
position: 'top right',
relative: true,
offset: [50, 0]
}).dynamic();
});
On one page, this works fine. On the other page, i get the following as soon as the event fires:
Uncaught TypeError: $(...).tooltip is not a function
On the page that works, I've been able to determine (by pausing and stepping into) that .tooltip()
is part of jquery.tools.min.js
Edit/Update3 (1 and 2 removed because they were probably misleading)
Both these pages come from different parts of an app that implements something like an online forum
On the page where everything works, it's just messages from forum users, and their avatar images. On the page that doesn't work, that page also includes a statistics/graph drawing device that is written in javascript and html5
I've noticed, by pausing at the same point in each page's document.ready
in the debugger, that on the page that works, jQuery is version 1.8.3 and all the methods from jquery-tools are available to call
On the page that doesn't work, jQuery version is 1.9.1
My presumption is that including the statistics/bar graph drawing device has completely replaced the jquery1.8.3+jquery-tools libraries loaded earlier in the page, with jquery1.9.1+NO_TOOLS, hence the reason why the selector still works (jquery's job) but the .tooltip()
function (jquery-tools job)is now absent
I'm not really sure what to do about it though - what's the normal solution to having a page that has its own jquery setup, and then including other things on it that also use and load jquery (different version) etc?
If jQuery
is reloaded it will replace the $
alias and the jQuery
namespace, hence jQuery.fn.tooltip
won't exist anymore.
You should try to reload jQuery.toolbox
after jQuery 1.9.1
is reloaded.
you can do this dynamically like this (https://stackoverflow.com/a/950146/2776550):
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
var myPrettyCode = function() {
// Here, do what ever you want
};
loadScript("my_lovely_script.js", myPrettyCode);
Nevertheless, you should strive to have only one copy and version of jQuery
in your application.