JQuery: Ajax. Загрузить вопрос

Question

У меня есть таблица недавних зарегистрированных гостей. Один из столбцов - это простая ссылка «отправить письмо», которую я использую в Jquery, когда она щелкает и запускает ajax .load в бэкэнд-скрипт php, который отправляет электронное письмо человеку.

Что я не могу понять, так это просто изменить ссылку, по которой щелкнули, на что-то вроде "Отправлено!" и это больше не ссылка.

Код:

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

Самое простое, что можно сделать, это просто заменить ссылку каким-нибудь текстом. По сути, мы просто используем функцию jQuery replaceWith () в вызывающем элементе привязки. Вот упрощенный пример полного HTML-файла, чтобы сделать то, что вы хотите.

<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

Я бы дал пользователю знать, что происходит, а затем рассказал бы им, что произошло. Итак, скажите им, когда он отправляет, а затем скажите, когда он отправил .

Вот так:

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

Конечно, вы, вероятно, захотите вернуться к типу, если по какой-то причине не удалось выполнить внутренний сценарий. Если вам интересны методы для этого, дайте мне знать, и я объясню это более подробно с помощью лучших практик и тому подобного.

Answer 3

Вы можете заменить ссылку текстом «Отправлено!»:

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