Why won't my jQuery work with version 1.9.1?

Question

So basically my whole site works with jQuery version 1.9.1. Although, I would like to use a plugin that only uses version 1.4.1. Is there something small that must be changed within this plugin code for it to be compatible with 1.9.1?

I have tried a few things like converting it to plain Javascript (had no luck) and trying to load version 1.4.1 aswel.. although that only caused many other things on my site to not work also.

$(document).ready(function () {

        // Get all the thumbnail
        $('div.thumbnail-item').mouseenter(function(e) {

            // Calculate the position of the image tooltip
            x = e.pageX - $(this).offset().left;
            y = e.pageY - $(this).offset().top;

            // Set the z-index of the current item, 
            // make sure it's greater than the rest of thumbnail items
            // Set the position and display the image tooltip
            $(this).css('z-index','15')
            .children("div.tooltip")
            .css({'top': y + 10,'left': x + 20,'display':'block'});

        }).mousemove(function(e) {

            // Calculate the position of the image tooltip          
            x = e.pageX - $(this).offset().left;
            y = e.pageY - $(this).offset().top;

            // This line causes the tooltip will follow the mouse pointer
            $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});

        }).mouseleave(function() {

            // Reset the z-index and hide the image tooltip 
            $(this).css('z-index','1')
            .children("div.tooltip")
            .animate({"opacity": "hide"}, "fast");
        });

    });

These are the errors I am recieving:

Failed to load resource: the server responded with a status of 404 (Not Found) http://jqueryui.com/slider/jquery-ui.js
Uncaught ReferenceError: jq141 is not defined (index):574
2999 (index):660
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.ozcaravan-sales.com.au/wp-content/themes/listings/style/images/ui-bg_glass_75_e6e6e6_1x400.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.ozcaravan-sales.com.au/wp-content/themes/listings/style/images/ui-bg_flat_75_ffffff_40x100.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.ozcaravan-sales.com.au/wp-content/themes/listings/style/images/ui-bg_highlight-soft_75_cccccc_1x100.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://dev.wizie.com/team/http://mangocell/favicon.ico
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

@j08691 - I managed to slightly fix it by declaring version 1.9.1 directly before the plugins code. Although, this causes large disruption within other things on my site... Any suggestions? Is it because I am declaring it twice? — Fizzix, Dec 19 '13 at 03:07
@j08691 - Sorry, have been stating the wrong version. Site seems to be using 1.10.2 instead of 1.9.1. — Fizzix, Dec 19 '13 at 03:10
@samitha - May be very difficult since there is quite alot of code. Although, I could supply my site URL? — Fizzix, Dec 19 '13 at 03:10
You could try using [`jQuery.noConflict()`](http://api.jquery.com/jQuery.noConflict/) with either/both versions and converting your plugin and/or site code to use the desired version. Similar question on [SO](http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page) and [jQuery forums](https://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page). — ajp15243, Dec 19 '13 at 03:14
I did some quick testing, and it seems that the plugin works up until version 1.9.1 of jQuery. — Fizzix, Dec 19 '13 at 03:14
@ajp15243 - I have tried converting my plugin to a higher version such as 1.10.2 since it isn't much code at all, although I am not experienced enough in jQuery to do this alone. — Fizzix, Dec 19 '13 at 03:15
I don't mean converting the plugin to use a higher version of jQuery. I mean using `jQuery.noConflict()` to scope the versions, and then converting your plugin to use the version it is compatible with. The second post of the jQuery forum post I linked has something along those lines. — ajp15243, Dec 19 '13 at 03:17
Check the console in devtools. Are there any errors coming up? Any warnings? Otherwise how do you know what works and what does not? — Johnston, Dec 19 '13 at 03:18
"Is it because I am declaring it twice" - are you loading jQuery twice? That would cause a lot of problems — Tieson T., Dec 19 '13 at 03:18
@TiesonT. - Version 1.10.2 is being loaded straight away. I then try and load version 1.4.1 just before my plugin is being called. This worked for the plugin, but not for other plugins on my site. — Fizzix, Dec 19 '13 at 03:21
@Johnston - Very hard to do since only a few jQuery errors are returned, and I am not to sure if they are for other items or not. This plugin is simply for thumbnail hovering. Would you like my URL to have a look? — Fizzix, Dec 19 '13 at 03:23
@Johnston - The plugin is for hovering over thumbnails and getting them to display bigger in a kind of `tooltip` way. This is a link to the download/developers page: http://www.queness.com/post/2294/useful-and-practical-jquery-image-tooltips-tutorial — Fizzix, Dec 19 '13 at 03:48

score 0 · Answer 1 · answered Dec 19 '13 at 03:09

0

With each jQuery version some of the api methods are deprecated and removed and some other are added. I think your plugin is trying to access some of those removed methods from jQuery core. For a solution you could either find the new version of the plugin if its maintained or find a new plugin with same fetatures. You could also use jQuery migrate plugin, but it supports back only from version equal to or greater than jQuery 1.6.4. See more info here

answered Dec 19 '13 at 03:09

Nouphal.M

6,304
1
17
28

So I can simply state `` after my jQuery has loaded? – Fizzix Dec 19 '13 at 03:13
Are you using slider in you demo? – Nouphal.M Dec 19 '13 at 04:22

Johnston · Accepted Answer · 2013-12-19T04:00:43.463

Ok so after investigating I just tried that plugin in 1.9.1 and it worked just fine. I did not get any errors. I don't think 1.9.1 is your issue if your example is not working.
http://jsfiddle.net/NLw5F/

That is the plugin working in jQuery 1.9.1.

    $(document).ready(function () {

    // Get all the thumbnail
    $('div.thumbnail-item').mouseenter(function(e) {

        // Calculate the position of the image tooltip
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;

        // Set the z-index of the current item, 
        // make sure it's greater than the rest of thumbnail items
        // Set the position and display the image tooltip
        $(this).css('z-index','15')
        .children("div.tooltip")
        .css({'top': y + 10,'left': x + 20,'display':'block'});

    }).mousemove(function(e) {

        // Calculate the position of the image tooltip          
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;

        // This line causes the tooltip will follow the mouse pointer
        $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});

    }).mouseleave(function() {

        // Reset the z-index and hide the image tooltip 
        $(this).css('z-index','1')
        .children("div.tooltip")
        .animate({"opacity": "hide"}, "fast");
    });

});

Straight from the demo.

As I mentioned earlier, it seems to work on version 1.9.1 after further testing. Although, I found that my site was using 1.10.2, not 1.9.1. Therefore, the plugin is not working with 1.10.2 — Fizzix, Dec 19 '13 at 04:25

Why won't my jQuery work with version 1.9.1?

2 Answers2