@aspirantes

Как заставить показать результат ajax запроса, после создания DOM элемента?

В общем никак не могу найти информацию, как заставить ajax внести данные во вновь созданный элемент.
Нужно что-то по типу onlad для label. или любого другого текстового элемента. Странно, что такого нет. При отсутствии элемента здесь указано обновление страницы для того, чтобы отобразился элемент, Элемент само собой подтягивается без значения. Можно конечно первичное значение из php вытянуть, но там так же проблемно через foreach элементы подтягиваются.

P.S. Хотелось бы найти решение на JS Без API и библиотек.

P.P.S. Нашёл тему, но ничего не подошло: https://coderoad.ru/4057236/%D0%9A%D0%B0%D0%BA-%D0...

incount = function(b) {
     var items = b.getAttribute('id');
     var params = 'incount=' + items;
     var xmlHttp = new XMLHttpRequest();
         xmlHttp.onreadystatechange = function() {
          var itemsname = document.getElementsByName("incount "+items+"")[0];
             if(xmlHttp.readyState == 4 && xmlHttp.status == 200)    {
                  if (!itemsname) {
                    location.reload();
                  } else {
                       itemsname.innerHTML = xmlHttp.responseText;
                  }
             }
         }
         xmlHttp.open("POST", "php/count.php");
         xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
         xmlHttp.send(params);
 }

 window.onload = function () {
      if (typeof(incount2) !== "undefined") {
           for (var i = 0; i < incount2.length; i++) {
               var inc=document.getElementsByName(incount2[i])[0];
                    incount(inc);
               }
          }
     }


Сейчас выглядит вот так:

<form>
               <button type='button' onclick="SendPost(this); incount(this)" id="<?php echo $prod['id'];?>">+</button>
          </form>
               <label name="incount <?php echo $prod['id'];?>" id="<?php echo $prod['id'];?>"></label>
                    <script type="text/javascript">
                    if (typeof(incount2) == "undefined") {
                         incount2 = [];
                         incount2.push(document.getElementsByName('incount <?php echo $prod['id'];?>')[0].getAttribute('name'));
                    } else {
                         incount2.push(document.getElementsByName('incount <?php echo $prod['id'];?>')[0].getAttribute('name'));
                    }
                         </script>


Всё ещё криво и длинно. Жаль всё таки онлоада нет.
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
DjailinVasu
@DjailinVasu
Верстальщик, подрастающий фронтендер
Вам сюда
https://developer.mozilla.org/ru/docs/Web/API/Muta...
Подписываетесь на изменения всего дерева dom, или на ту ветвь где должен появиться ожидаемый элемент.
Слушаете childList, дальше по примеру в статье.

В колбеке получаете mutationsList, его перебираете через forEach, для каждого элемента mutationsList смотрите нет ли у него addedNodes (элементы которые только что добавились). Если они есть, перебираете массив из свойства addedNodes, там уже прям лежат node, можно у них смотреть атрибуты, например, в поисках заветного дива.

Пример колбека

var collback = function(mutationsList)  {
                        mutationsList.forEach((mutation) => {
                            if (mutation.addedNodes.length > 0) {
                                mutation.addedNodes.forEach((node) => {
                                    if (
                                        node.localName === "some" &&
                                        node.hasAttribute("some") 
                                    ) {
                                       //вставляем что там надо и не забываем отписаться от прослушки
                                    }
                                });
                            }
                        });
                    });
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@aspirantes Автор вопроса
Нашёл годный вариант наконец-таки:
count_onload = function () {
      if (document.getElementsByName("incount").length !== 0) {
          var inc = document.getElementsByName("incount");
           for (var i = 0; i <inc.length ; i++) {
                    incount(inc[i]);
               }
          }
     }

    var ele = document.getElementsByName("incount")[0];
    console.log(ele);
    ele.addEventListener("load", count_onload(), false);

     //window.onloadFuncs.push(count_onload);
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы