Jquery ajax не выполняет успех

Question

Отправка запроса ajax для вставки данных в базу данных. После успешной отправки моего сообщения кнопки не было изменено. При нажатии i загорается сообщение Please wait... при успешном запуске устанавливается новое значение html Done. Записи в db созданы успешно, но текст кнопки до Done не был изменен.

Мой сценарий:

var Friend = { 

    // Add new friend 
    add: function() { 
     var btn = $(".btn-add-friend"); 

     btn.click(function() { 

      $(this).html("Please wait..."); 

      $.ajax({ 
       type: "post", 
       url: baseurl + "/FriendRequest/send", 
       data: { 
        friend: $(this).data('friend') 
       }, 

       success: function(xhr, status) { 
        $(this).html("Done"); // Not wortk 

        alert("done"); // <-- Work 
       }, 
       error: function(response, s, e) { 
        alert(response.responseText); 
       }, 
       complete: function() { 
        //. the some from success 
       } 
      }); 
     }); 
     }, 

    // Initialise 
    init: function() { 
     Friend.add(); 
    } 
}; 

Html:

<button type="button" id="item-<?=$person->account_id;?>" class="btn btn-xs btn-add-friend has-spinner" data-friend="<?= $person->account_id;?>"><i class="fa fa-plus-circle"></i> Add Friend</button> 

Когда я нажимаю на кнопку текст был changet к Please wait.., но после того, как успех не изменил Done и оповещения успешно выполнена.

похоже, что это не часть DOM после нажатия! Я также пытаюсь с on() получить некоторый результат.

Answer 1

this Внутри функции обратного вызова функции ajax есть ... ajax-вызов, а не элемент с щелчком.
Вы должны заменить его с ним

add: function() { 
    var btn = $(".btn-add-friend"); 

    btn.click(function() { 

     var self = $(this); 

     self.html("Please wait..."); 

     $.ajax({ 
      type: "post", 
      url: baseurl + "/FriendRequest/send", 
      data: { 
       friend: self.data('friend') 
      }, 
      success: function(xhr, status) { 
       self.html("Done"); 
      }, 

Answer 2

Чтобы использовать this, вам нужно дополнительный атрибут. Добавьте следующие с url

context:this 

Итак, обновленный код будет

$.ajax({ 
      type: "post", 
      url: baseurl + "/FriendRequest/send", 
      context:this, 
      data: { 
       friend: $(this).data('friend') 
      }, 

      success: function(xhr, status) { 
       $(this).html("Done"); // Will work 

       alert("done"); // <-- Work 
      }, 
      error: function(response, s, e) { 
       alert(response.responseText); 
      }, 
      complete: function() { 
       //. the some from success 
      } 
     }); 

Answer 3

Внутри функции обратного вызова, это относится к jqXHR объекта вызова Ajax, а не элемент. поэтому постарайтесь, чтобы присвоить его переменный перед АЯКСОМ запроса, а затем использовать этот variale внутри функции успеха:

//Before ajax request 
var _this = $(this); 

//Inside success function 
_this.html("Done"); 

Надеется, что это помогает.