Avoir un spectacle et se cacher dans la même fonction ne semble pas fonctionner - jQuery

Je cherchai autour mais je ne trouvais pas de solution à cela. Je suis sûr que c’est simple, mais la solution m’échappe: /

J'ai une fonction assignée à.Cliquez () sur une entrée de bouton HTML. Tout dans la fonction fonctionne correctement, sauf l'affichage et le masquage ne se déclenchent pas dans le bon ordre. Ma petite image de spinner n'apparaît qu'à la fin de l'exécution de la fonction, semble-t-il, et elle ne se cache pas à nouveau.

Au cas où cela ne serait pas évident, ce que je cherche à obtenir, c’est d’afficher l’image de spinner jusqu’à ce que la sortie PHP soit renvoyée.

<div id="results" style="padding: 20px;"></div>

header date <input type="text" id="headerDate" name="headerDate" size="15" value="20130101" />
#rows <input type="text" id="numRows" name="numRows" size="15" value="10000" />
<input type="button" value="GO" id="goButton" />
<img id="spinner" style="display: none;" src="/images/images/spinner.gif" border="0" width="30" height="30" alt="loading..." />

<script>
$("#goButton").click( function() {
$("#spinner").show();

$.ajax({
url: "do_something.php",
type: "POST",
data: { "headerDate": $("#headerDate").val(), "numRows": $("#numRows").val() },
dataType: "html",
success: function(data) {
$("#results").html(data);
},
error: function() {
$("#results").html("Something went wrong!");
}
});

$("#spinner").hide();
});
</script>

Je suis un peu un noob de jQuery alors s'il vous plaît pardonnez-moi si cela est évident.

Réponses:

Vous devez le mettre dans le succès ou échouer

$.ajax({
url: "do_something.php",
type: "POST",
data: { "headerDate": $("#headerDate").val(), "numRows": $("#numRows").val() },
dataType: "html",
success: function(data) {
$("#results").html(data);

$("#spinner").hide();
},
error: function() {
$("#results").html("Something went wrong!");

$("#spinner").hide();
}
});