Изменить текст ярлыка на мыши с помощью ajax

Question

Я хочу изменить значение метки на мыши. Это то, что я сделал до сих пор:

$(function() { 
    var hoverOff = ""; 
    $("[id*=GV] td").hover(function() { 
     hoverOff = $("label", $(this).closest("td")).text(); 
     $.ajax({ 
      type: "POST", 
      url: "MyMethode.aspx/GetNewValue?text=" + hoverOff, 
      data: "{}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (data) { 
       $("label", $(this).closest("td")).html(data.d); 
       } 
      }); 
     }, 
     function() { 
      $("label", $(this).closest("td")).html(hoverOff); 
     } 
);}); 

В начале я сохранить текущий текст в hoverOff и отправить это значение метода GetNewValue которым возвращает новое значение и в Ajax успеха Я хочу, чтобы применить это значение наклейка. Проблема в том, что текст для метки никогда не изменяется, хотя data.d содержит новый текст. Должен ли я использовать что-то другое вместо .html()?

Answer 1

this внутри Ajax обратного вызова не относится к текущей парил TD, но к объекту jqXHR. Вы можете использовать $.ajax контекстного варианта:

context: this,

КСТАТИ $(this).closest("td") вполне unrelevant потому что, очевидно, даже вы вложенная TDs, $(this).closest("td") всегда возвращают текущий TD, так что вы могли бы просто использовать this:

hoverOff = $("label", this).text(); 

И data: "{}", может быть data: {},, здесь нет смысла устанавливать строку. >> потому что вы настраиваете contentype в формате JSON

Answer 2

Вы можете использовать это решение от https://stackoverflow.com/a/10701170/3421811

$('.btn').hover(
function() { 
    var $this = $(this); // caching $(this) 
    $this.data('initialText', $this.text()); 
    $this.text("I'm replaced!"); 
}, 
function() { 
    var $this = $(this); // caching $(this) 
    $this.text($this.data('initialText')); 
} 
); 

Answer 3

Это проблема контекста вы не можете использовать this внутри функции успеха, попробуйте этот код:

$(function() { 
    var hoverOff = ""; 
    $("[id*=GV] td").hover(function() { 
     var label = $("label", $(this).closest("td")); 
     hoverOff = label.text(); 
     $.ajax({ 
      type: "POST", 
      url: "MyMethode.aspx/GetNewValue?text=" + hoverOff, 
      data: {}, 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (data) { 
       label.html(data.d); 
       } 
      }); 
     }, 
     function() { 
      label.html(hoverOff); 
     } 
);});