Как обновить правильный элемент списка в неупорядоченном списке при загрузке модального всплывающего представления

У меня есть неупорядоченный список сообщений, где каждое сообщение в элементе списка можно щелкнуть.

<ul id="home-message-list" class="messages">
    <li>
        <a href="#">
            <span class="linkClick" name="message"><a href="#">Hi, How are you?</a></span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="linkClick" name="message"><a href="#">Hi, How are you?</a></span>
        </a>
    </li>
</ul>

Каждый <span class="linkClick"><a href="#">Hi, How are you?</a></span>раз, когда нажимается, я обрабатываю его с помощью ajax-класса на основе .linkClickи открываю всплывающее окно bootstrap modal. Причина, по которой я делаю это таким образом, заключается в том, чтобы иметь возможность динамически заполнять содержание модального.

$('.linkClick').click(function(){
      $.get( "/loadModal")
       .done(function(data) {
          $('#message-model-content').html(data);
          $('#messageModal').modal('show');
       });
 });

Я хочу обновить сообщение в соответствующем элементе списка, из которого modal был открыт после ответа с сервера.

Я могу обрабатывать ответ из модального всплывающего окна, но не уверен, как обновить правильный элемент списка. Я пробовал это, но это не работает.

$(document).on("click", "#btn_sendMessageReply", function(){ 
        $.getJSON('/sendReply', {
        }, function(data) {
            $('#messageModal').modal('hide');
            $(this).closest("li").find("span[name='message']").text(data);
        }); 
      });

Я пробовал это$("span[name='message']").text(data);, но он обновил оба списка

Как я могу обновить правильный элемент списка, из которого был открыт modal pop up ?

Иак, в 06:08 (источник)

1 ответ

  1. Вы можете потерять контекст для $(this)до завершения запроса AJAX. Попробуйте использовать временную переменную для сохранения контекста.

    Ваш код:

    $(document).on("click", "#btn_sendMessageReply", function() {
  $.getJSON('/sendReply', {}, function(data) {
    $('#messageModal').modal('hide');
    $(this).closest("li").find("span[name='message']").text(data);
  });
});

    Изменить на:

    $(document).on("click", "#btn_sendMessageReply", function() {
  var $this = $(this);
  $.getJSON('/sendReply', {}, function(data) {
    $('#messageModal').modal('hide');
    $this.closest("li").find("span[name='message']").text(data);
  });
});

    Редактировать обсуждение в комментариях ниже:

    Вот еще один способ сохранить ссылку на текущую соответствующую строку, добавив к ней класс.

    $('.linkClick').click(function() {
  $('.linkClick.active').removeClass('active'); // clear the active row (if there is one)
  $(this).addClass('active'); // make this the active row
  $.get("/loadModal")
    .done(function(data) {
      $('#message-model-content').html(data);
      $('#messageModal').modal('show');
    });
});

$(document).on("click", "#btn_sendMessageReply", function() {
  $.getJSON('/sendReply', {}, function(data) {
    $('#messageModal').modal('hide');
    $('.linkClick.active').text(data); // active row gets new text
  });
});