CODEWITHSUNDEEP
javascriptjqueryscope
dlras2
dlras2

Reputation: 8486

Why is this function scoping error occuring with jQuery?

I have the following function:

function updateStatuses() {
    $.each($('.status-badge'), function (i, value) {
        value.removeClass('badge-known');
    });
    $.post("/Diagnostics/Update", {  }, function(data) {
        $.each(data, function() {
            setStatus(this.Id, this.Infos, this.Errors, this.Warnings);
        });
    });
    window.setTimeout(function () {
        $.each($('.status-badge:not(.badge-known)'), function(i, value) {
            value.addClass('badge-unknown');
        });
    }, 1000);
}

Basically, I'm updating a group of badges from an AJAX call. If, after 1000ms, any certain badge hasn't been updated, it gains the badge-unknown class.

The function above is called as such:

$(function () { updateStatuses(); });

My problem is that value.removeClass('badge-known'); gives the following error:

TypeError: value.removeClass is not a function

If I comment that line out, the timeout function throws the same error on value.removeClass('badge-unknown');

The confusing thing is, addClass and removeClass are used in setStatus, which is defined just below the above function. What am I doing wrong here?

Upvotes: 0

Views: 127

Answers (2)

Alnitak
Alnitak

Reputation: 339786

There's no need to use .each when calling standard jQuery methods. Most such methods will happily iterate directly over a set of elements.

Also, there's no need for the anonymous function wrapper around your main document.ready handler:

Your whole code can be just this:

function updateStatuses() {
    $('.status-badge').removeClass('badge-known');

    $.post("/Diagnostics/Update", {  }, function(data) {
        $.each(data, function() {
            setStatus(this.Id, this.Infos, this.Errors, this.Warnings);
        });
    });

    window.setTimeout(function () {
        $('.status-badge:not(.badge-known)').addClass('badge-unknown');
    }, 1000);
}

$(updateStatuses);

Upvotes: 4

Kevin B
Kevin B

Reputation: 95030

value is a dom node, not a jQuery object. Try

$(value).removeClass('badge-known');

Upvotes: 3

Related Questions