JQuery: Ajax .load question

Question

I have a table of recent web guest who have registered. One of the columns is a simple "send email" link that I hi-jack with Jquery when it's clicked and fire off an ajax .load to a backend php script that emails the person.

What I can't figure out, is how to simply change the link that was clicked on to something like "Sent!" and it's no longer a link.

The code is:

$(".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

The easiest thing to do would be to just replace the link with some text. Basically, we're just using the jQuery replaceWith() function on the calling anchor element. Here's a simplified example of a complete HTML file to do what you want.

<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 2

you can replace the link with the text "Sent!":

$(".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;                                                      
});

Answer 3

I would let the user know what is happening and then tell them what happened. So, tell them when it is sending and then tell them when it has been sent.

Like so:

$(".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;                                                      
});

Of course, you'd probably want to revert back to an if the backend script failed for some reason. If you are interested in techniques for that, let me know and I will explain that in more detail with best practices and such.