Question

I’m showing a spinning wheel image when users type in a textbox and after the ajax call is done, I want to remove the image. The problem is that the image doesn’t go away. I’m sure the code is executed because I can see the log info stated in the code. What am I doing wrong?

$(document).ready(function () {
    $("[NeedSpellCheck='true']").each(function () {
        $(this).keypress(function (e) {
            $(this).css("background-image", "url(images/loading.gif)");
            $(this).css("background-repeat", "no-repeat");
            $(this).css("background-position", "right");

            $(this).spellchecker(
            {
                url: "~/JQuerySpellCheckerHandler.ashx",
                lang: "en",
                engine: "google",
                suggestBoxPosition: "bottom"
            }).spellchecker("check", function (result) {
                $(this).css("background-image", "none"); // <-- corrected typo
                console.log("removed"); //<-- displayed in console
            });
        });
    });
});

<input type="text" NeedSpellCheck="true" />

Update
I corrected the typo but it still doesn’t work.

Answer 1

You have a typo:

$(this).css("background-image", "none");

If that’s not the issue you may need to reference this outside the plugin:

$(document).ready(function () {
    $("[NeedSpellCheck='true']").each(function () {
        $(this).keypress(function (e) {
            var $this = $(this);  // you could use $this for the following as well
            $(this).css("background-image", "url(images/loading.gif)");
            $(this).css("background-repeat", "no-repeat");
            $(this).css("background-position", "right");

            $(this).spellchecker(
            {
                url: "~/JQuerySpellCheckerHandler.ashx",
                lang: "en",
                engine: "google",
                suggestBoxPosition: "bottom"
            }).spellchecker("check", function (result) {
                $this.css("background-image", "none");  // reference object
                console.log("removed"); //<-- displayed in console
            });
        });
    });
});