Tomek Buszewski
Tomek Buszewski

Reputation: 7955

Multiple jQuery/jQueryUI errors out of the blue

I coded my example site a few weeks ago. It worked all right, but now it doesn't. It started yesterday, after Chrome updated itself (or so it seems).

My errors in the console are:

Uncaught TypeError: Cannot read property 'msie' of undefined
Uncaught TypeError: Object [object Object] has no method 'rating' 

Both of them caused by jQuery plugins I use all the time (jQuery Form, jQuery StarRating, jQuery UI, etc). Also, when I hover an element that uses show with jQueryUI, I'm getting

Uncaught TypeError: Property '#<Object>' of object #<Object> is not a function 

My JS code is as follows:

(function($){})(window.jQuery);
$(document).ready(function() {

    /* T.O.C.

    1. Top
    1.0 | Header
    1.1 | Main Menu
    1.2 | Placeholders
    2. Content
    2.1 | Left
    2.1.1 | Box covers
    3. Sidebar
    3.1 | Rates

     */
});

/* 1.0 | Top */
// 1.1 | Main Menu
function searchInput() {
    var totalWidth = 0;
    var n = parseInt(0);
    $('nav#mainMenu ul li:not(.search)').each(function() {
        totalWidth += parseInt($(this).outerWidth(true));
    });
    var inp = 919 - totalWidth;
    $('nav#mainMenu ul li.search form input').width(inp);
};

function slideMenu() {
    $('nav#mainMenu ul li:not(:first), nav#mainMenu ul li ul:not(li a)').each(function() {
        $(this).mouseenter(function() {
            $(this).children('a').addClass('active');
            var left = $(this).outerWidth(true),
                width = 0;
            if($(this).hasClass('help')) { // IF HELP
                $(this).prevAll('li').each(function() {
                    width += $(this).outerWidth(true);
                });
            } else { // ELSE
                $(this).nextAll('li').each(function() {
                    width += $(this).outerWidth(true);
                });
            }

            var width = width + 1;

            if($(this).hasClass('help')) {
                $(this).children('ul').css({ 'right':left, 'width':width });
                $(this).children('ul').show('slide', { direction: 'right' }, 250);
            } else {
                $(this).children('ul').css({ 'left':left, 'width':width });
                $(this).children('ul').show('slide', { direction: 'left' }, 250);
            }
        });
        $(this).mouseleave(function() {
            if($(this).hasClass('help')) {
                $(this).children('ul').hide('slide', { direction: 'right' }, 250, function() {
                    $(this).parent('li').children('a').removeClass('active');
                });
            } else {
                $(this).children('ul').hide('slide', { direction: 'left' }, 250, function() {
                    $(this).parent('li').children('a').removeClass('active');
                });
            }
        });
    });
};

slideMenu();

searchInput();

/* 1.2 | Placeholder */
function Placeholders() {
    if(!Modernizr.input.placeholder){

        $("input").each(
            function(){
                if($(this).val()=="" && $(this).attr("placeholder")!=""){
                    $(this).val($(this).attr("placeholder"));
                    $(this).focus(function(){
                        if($(this).val()==$(this).attr("placeholder")) $(this).val("");
                    });
                    $(this).blur(function(){
                        if($(this).val()=="") $(this).val($(this).attr("placeholder"));
                    });
                }
            });

    }
}

Placeholders();

/* 2. Content */

// 2.2.1 | Box covers
function BoxCovers() {
    $('ul.boxlist li').mouseenter(function() {
        $(this).children('div').stop().fadeIn('fast');
    });
    $('ul.boxlist li').mouseleave(function() {
        $(this).children('div').stop().fadeOut('fast');
    });

    $('.boxlist .rate').rating();
    $('.boxlist form.starRated a').attr('title','');
}

BoxCovers();

function Detailed() {
    $('ul.detailed .rate').rating();
    $('ul.detailed form.starRated a').attr('title','');

    $('ul.detailed li').each(function() {
        $(this).removeClass('grid_4').addClass('grid_14 clearfix');
        var img = $(this).children('img').attr('src'),
            img = img.replace('.jpg','-m.jpg');

        $(this).children('img').attr('src',img).addClass('grid_1');
        $(this).children('div').addClass('grid_9');

        $(this).mouseenter(function() {
            $(this).children('div').children('p.own').stop().fadeIn();
        });

        $(this).mouseleave(function() {
            $(this).children('div').children('p.own').stop().fadeOut();
        });
    });
};

Detailed();

/* 3. Sidebar */
// 3.1.  Rates
function sideRates() {
    $('section#grades div ul li').each(function() {
        var percent = $(this).children('b').text(),
            percent = percent.replace('%',''),
            percent = (percent/100),
            totalSpamWidth = $(this).children('span').width(),
            newWidth = totalSpamWidth * percent;

        $(this).children('span').width(newWidth);
    });
};

sideRates();

Upvotes: 0

Views: 1605

Answers (4)

Kitsuneko
Kitsuneko

Reputation: 1

I managed to fix this error while still using the latest jQuery. My call to the Superfish menu script gave me the "Cannot read property 'msie' of undefined" error when I called it from:

$(document).ready(function() { startScripts(); });

But, then I changed it to:

$(document).load(function() { startScripts(); });

The error disappeared, which suggests that this is a load-order timing issue.

Upvotes: 0

This is caused by the fact that the jQuery.browser property has been removed from jQuery 1.9. Apparently this browser detection feature had been deprecated since jQuery 1.3, but many plugins/libraries probably still rely on it (jQuery Tools, to name just one I like to use in my projects).

See: http://jquery.com/upgrade-guide/1.9/#jquery-browser-removed for official reference.

For a quick repair, use the previous version of jQuery, e.g.:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Upvotes: 2

Deep Frozen
Deep Frozen

Reputation: 2075

For the sake of having an answer instead of a comment:

You are using the latest jQuery. This version probably has something removed or changed that you are using. I suggest you keep to the version you created the page on instead of fetching the latest. That way it will never break because of version differences.

Upvotes: 1

Samuel Liew
Samuel Liew

Reputation: 79113

"Cannot read property 'msie' of undefined"

This hints that jQuery isn't even loading. Check using developer tools (F12), network tab, refresh the page, and see if any 404 error occurs for any script/resource.

Upvotes: 0

Related Questions