JQuery: Ajax. Question de la question

Question

J'ai une table de l'invité Web récent qui s'est enregistré. L'une des colonnes est un simple lien "envoyer un e-mail" que je hi-jack avec Jquery quand il est cliqué et déclenche un ajax .load à un script php backend qui envoie un courriel à la personne.

Ce que je ne peux pas comprendre, c'est comment simplement changer le lien sur lequel on a cliqué sur quelque chose comme "Envoyé!" et ce n'est plus un lien.

Le code est:

$(".sendEmail").click(function(){ 
var element = $(this); 
var guest_id = element.attr("id");           
$.post("WebGuest_SendEmail.php",{id: guest_id}, function(data) { 
    $(this).html(data); //NOT SURE WHAT TO DO HERE ON SUCCESS. 
    });        
return false;        
}); 

Answer 1

Je laisserais l'utilisateur de savoir ce qui se passe et puis leur dire ce qui est arrivé. Donc, dites-leur quand il envoie et puis dites-leur quand il a été envoyé.

Comme si:

$(".sendEmail").click(function(){ 
    var element = $(this); 
    var guest_id = element.attr("id"); 
    element.replaceWith('Sending...');                    
    $.post("WebGuest_SendEmail.php",{id: guest_id}, function(data) { 
     $(this).html(data); //NOT SURE WHAT TO DO HERE ON SUCCESS. 
     element.replaceWith('Sent!'); 
    });              
    return false;              
}); 

Bien sûr, vous voudrez probablement revenir à un si le script de back-end a échoué pour une raison quelconque. Si vous êtes intéressé par des techniques pour cela, faites le moi savoir et je vais vous expliquer cela plus en détail avec les meilleures pratiques et autres.

Answer 2

La meilleure chose à faire serait de remplacer simplement le lien avec un texte. Fondamentalement, nous utilisons simplement la fonction jQuery replaceWith() sur l'élément d'ancrage appelant. Voici un exemple simplifié d'un fichier HTML complet pour faire ce que vous voulez.

<script src="lib/jquery.js" type="text/javascript"></script> 
<script> 
$(document).ready(function() { 
    $(".sendEmail").click(function(){ 
    var element = $(this); 
    $.post("test.html", {}, function(data) { 
     element.replaceWith("Sent!");  
    }); 
    return false; 
    }); 
}); 
</script> 

<a href="#" class="sendEmail">click me</a> 

Answer 3

vous pouvez remplacer le lien avec le texte « Envoyé! »:

$(".sendEmail").click(function(){ 
var element = $(this); 
var guest_id = element.attr("id"); 
element.replaceWith('Sent!'); 
$.post("WebGuest_SendEmail.php",{id: guest_id}, function(data) { 
     $("#container").html(data); //NOT SURE WHAT TO DO HERE ON SUCCESS. 

    });              
return false;              
});