Как дать предупреждение, когда меняются внутренние данные? - PullRequest
Новая
       8

Как дать предупреждение, когда меняются внутренние данные?

0 голосов
/ 13 ноября 2018

У нас есть простой json, подобный этому 

{
    name: "Johnson"
}

Я использую ajax для отображения имени, как показано ниже 

$.ajax({
    url: /info.json,
    success: function(data) {
        $('<span><b>' + data.name + '</b></span>').append('body')
    }
});

Выходной Html похож на ниже 

<body>
    <label> name </label>
    <span><b>Johnson</b></span>
</body>

Давайте предположим, что имя, которое мы получаем сейчас, изменяется с «Джонсон» на «Майкл».

Выведите Html после того, как имя будет изменено, как показано ниже: 

<body>
    <label> name </label>
    <span><b>Michael</b></span>
</body>

Всякий раз, когдаимя меняется, мы хотим показать всплывающее окно. Нет событий, связанных с документом HTML. Как этого добиться?

В инструментах разработчика, используя опцию взлома, я могу отладить его.Есть ли в Javascript какой-либо другой способ добиться того же?

Ответы [ 5 ]

0 голосов
/ 16 ноября 2018

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

<!DOCTYPE html>
<head>
</head>
<body>
<ol contenteditable oninput="">
  <li>Enter the items</li>
</ol>
<script>
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
  var list = document.querySelector('ol');

  var observer = new MutationObserver(function(mutations) {  
    mutations.forEach(function(mutation) {
      if (mutation.type === 'childList') {
        var list_values = [].slice.call(list.children)
            .map( function(node) { return node.innerHTML; })
            .filter( function(s) {
              if (s === '<br>') {
                return false;
              }
              else {
                return true;
              }
         });
        alert(list_values);
      }
    });
  });

  observer.observe(list, {
    attributes: true, 
    childList: true, 
    characterData: true
  });
</script>
</body>
</html>
0 голосов
/ 14 ноября 2018

Должны ли мы использовать Mutation Observer для вышеуказанного случая, чтобы при каждом изменении данных пользователь получал уведомление через всплывающее окно.

0 голосов
/ 13 ноября 2018

AJAX не получает уведомления, когда данные изменяются на сервере.

Вы можете попробовать длинный опрос или подобный метод, или (если ваш сервер и приложение поддерживают его) сделать это с websocket или HTTP / 2.

Последний может потребовать некоторой разработки (даже обновления сервера) в зависимости от вашей ситуации.

0 голосов
/ 13 ноября 2018

Вам необходимо написать функцию для события модификации контента.Вы можете попробовать с этим кодом: 

$(document).on('DOMSubtreeModified', 'span b', function(){
    console.log("name modified");
    // add your action
})
0 голосов
/ 13 ноября 2018

Вы должны попробовать setInterval () javascript, он проверяет ваш файл снова и снова через несколько раз, что вы должны определить как 

setInterval(function(){
   $.ajax({
        url: /info.json,
        success: function (data) {
           $('<span><b>'+data.name+'</b></span>').append('body')
        }
   });
},3000) //it will call after each 3 sec

, это может вам помочь:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...