jquery $ .ajax .done .fail donnant un comportement inattendu

Question

Le code suivant me donne un comportement inattendu. Lorsque le paramètre dataType de l'appel ajax est json, il renvoie une erreur comme dans le cas présent et exécute le chemin d'accès .fail. La ligne $("#greetingsBlock").html(stuff.responseText); s'exécute correctement et remplit le <div th:fragment="greetingsList" class="results-block"> dans le fichier results.html correctement avec le code HTML mis à jour. Cependant, en lisant un autre lien, j'ai supprimé le dataType: "json", de l'appel ajax pour résoudre le problème d'échec et le retour est correctement mappé sur .done(function(stuff). La chose étrange est que la ligne $("#greetingsBlock").html(stuff.responseText); ne met pas à jour le html même si le stuff.responseText est le même que dans le cas .fail. J'ai vérifié les deux cas dans le débogueur. La méthode de contrôleur appelée est la même dans les deux cas et revient sans problème. Je suis un peu perplexe sur celui-ci.

J'utilise jquery 1.9.2, serpolet et Spring MVC dans mon appication

$.ajax({ 
    type : "POST", 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json' 
      }, 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    data : data, 
    url: url 
}) 
    .done(function(stuff) { 
     $("#greetingsBlock").html(stuff.responseText); 
    }) 
    .fail(function(stuff) { 
     $("#greetingsBlock").html(stuff.responseText); 
    }); 

results.html

<div th:fragment="greetingsList" class="results-block"> 
    <h3>Greetings list</h3> 
    <form id="toDelete" th:object="${greetingWrapper}" method="post"> 
     <table> 
      <tr> 
      <th>Delete?</th>0 
      <th>ID</th> 
      <th>Message</th> 
      <th>Date Created </th> 
      </tr> 

      <tr th:each="greeting, rowStat : *{greetings}" th:class="${rowStat.odd}? 'odd'"> 
      <td><input type="checkbox" th:checked="${greeting.delete}" th:field="*{greetings[__${rowStat.index}__].delete}" name="delete"/></td> 
      <td><input type="text" th:field="*{greetings[__${rowStat.index}__].id}" name="id" readonly="readonly" /></td> 
      <td><input type="text" th:field="*{greetings[__${rowStat.index}__].content}" name="content" readonly="readonly" /></td> 
      <td><input type="text" th:field="*{greetings[__${rowStat.index}__].dateCreated}" name="dateCreated" readonly="readonly" /></td> 
      </tr> 
     </table> 

     <button id="deleteGreetings" name="deleteGreetings" 
      th:onclick="'javascript:deleteTheGreetings()'" type="button" >Delete Greeting(s)</button> 
    </form> 
</div> 

Answer 1

ARGGG - juste trébuché sur un correctif. Ce code fonctionne, je n'ai aucune idée de pourquoi cependant. Semble que dans un cas "stuff" est suffisant et l'autre exige "stuff.responseText" '.done (fonction (stuff) {$ ("# greetingsBlock"). Html (trucs);'