Question

I have the following jQuery code:

$.ajax({
  type: "POST",
  url: "/search",
  data: $("form").serialize(),
  success: function(data) {
    $("#tab").addClass("loading"); // THIS LINE DOESN'T WORK
    // . . . LOAD SEARCH RESULTS HERE (USUALLY TAKES SEVERAL SECONDS) . . .
    $("#tab").removeClass("loading");
  }
});

And I have the following CSS:

.loading {
  background: transparent url(../resources/images/loading.gif) no-repeat right center;
  text-indent: -1000px;
}

And I have the following relevant HTML:

<div id="tab">
  <table id="searchResultsGrid"></table>
</div>

I can’t get the line $("#tab").addClass("loading") to work. Watching in FireBug, the class .loading is never added to the #tab object. What am I doing incorrectly?

Thanks!

Answer 1

Try this instead. What’s probably happening is that it’s adding and removing the loading class quickly enough that it steps on itself

// add the class before the ajax call
$("#tab").addClass("loading");

$.ajax({
  type: "POST",
  url: "/search",
  data: $("form").serialize(),
  success: function(data) {
    // . . . LOAD SEARCH RESULTS HERE . . .
  }
  complete: function(data) {
    // remove the class on complete, not success, in case of an error
    $("#tab").removeClass("loading");
  }
});