Jquery Ajax - la réponse devrait remplacer html

Question

Je commence à Ajax et j'ai quelques problèmes. J'ai une page avec une liste contenant des miniatures de vidéos, quand vous les survolez, il y a une icône "Je n'aime pas ça". Ça c'est fait. Maintenant où iam ayant un problème est:

Lorsque vous cliquez sur cette icône, le titre de la vidéo, la vignette & doit disparaître et une autre vidéo doit être affichée.

Voici mon code Ajax

function ThumbsDown(id,sort,page) { 
$.ajax({ 
    url: "/change/videos/"+id+"/thumbsdown/", 
    type: "POST", 
    data: { 
     "sort": sort?sort:"", 
     "page": page?page:"" 
    }, 
    complete: function(result) { 
     // Instead of calling the div name, I need to be able to target it with $(this) and .parent() to make sure only 1 video change, but for now I only want the response to replace the video 
     $("#content .videoList ul li.videoBox").html(result);    
    } 
}); 
} 

La demande travaille, im gettin une réponse (200 OK). Et il me renvoie le bloc de code HTML pour la nouvelle vidéo.

Le problème est, lorsque je clique sur l'icône, tout le code HTML dans le div est parti. J'ai une étiquette vide, donc je suppose que c'est interprété comme "vide". Mais dans mon onglet firebug .Net, je peux voir clairement qu'il y a une réponse.

Une aide s'il vous plaît? déjà fixé, MERCI

* * EDIT **

Maintenant im ayant des problèmes pour cibler la div spécifique avec $ (ce) et les parents(). Quelqu'un peut-il aider?

Je veux cibler le li #videoBox

<li class="videoBox recommended"> 
    <div class="spacer" style="display: block;"></div> 
    <div class="features"> 
     <div> 
     <a class="dislike_black" title="I dislike this" onclick="ThumbsDown(30835, 'relevance', '1');"></a> 
     </div> 
    ... 

J'ai essayé, et sa ne fonctionne pas.

success: function(data) { 
     $("#content .videoList ul li.videoBox").html(data); // this IS WORKING, but replacing ALL the thumbs 
     $(this).parents("li.videoBox").html(data); // THIS IS NOT 

Qu'est-ce que je fais mal?

Answer 1

Le problème que vous rencontrez est que vous utilisez la fonction de rappel "complète". Cela peut être trompeur, mais ce rappel est destiné à être appelé après un succès ou un échec. C'est plus pour le nettoyage, et ne reçoit pas les données de réponse que vous attendez. Fondamentalement, tout ce que vous devez faire est de changer «complet» en «succès», et vous devriez recevoir votre résultat attendu.

Cependant, personnellement, je ne suggère pas d'utiliser la fonction Ajax, car cela semble tout à fait nécessaire. La fonction Ajax existe principalement pour les transactions complexes, et il semble que vous en ayez une assez simple. Ce que je suggère, utilise la fonction « raccourci » qui jQuery fournit, comme ceci:

$.post("/change/videos/"+id+"/thumbsdown/", {sort:"", page:""}, function(result){ 
    // Instead of calling the div name, I need to be able to target it with $(this) and .parent() to make sure only 1 video change, but for now I only want the response to replace the video 
    $("#content .videoList ul li.videoBox").html(result); 
}, "html"); 

Answer 2

Changement de complete to success

function ThumbsDown(id,sort,page) { 
$.ajax({ 
    url: "/change/videos/"+id+"/thumbsdown/", 
    type: "POST", 
    data: { 
     "sort": sort?sort:"", 
     "page": page?page:"" 
    }, 
    success: function(result) { 
     // Instead of calling the div name, I need to be able to target it with $(this) and .parent() to make sure only 1 video change, but for now I only want the response to replace the video 
     $("#content .videoList ul li.videoBox").html(result);    
    } 
}); 
} 

le rappel complete contrairement à la réussite ne reçoit pas le paramètre de données, seulement le paramètre jqXHR.