jqueryjquery-tools

Is it possible for a subsequent script load to remove an already-loaded function in an earlier script?


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?


Solution

  • 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.