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

Question

[Gias]

В общем никак не могу найти информацию, как заставить 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>

Всё ещё криво и длинно. Жаль всё таки онлоада нет.

Comments

[Andrew]

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

чиво? непонятно что вы хотите сделать, куда внести? какой созданный элемент?
распишите по пунктам. а лучше в песочницу закиньте всё(html, js) и обращение к JSONPlaceholder, если не хотите светить свой php и вы уверены что не в пыхе дело.

[Gias]

Надо, как то так. <div onload="oQuickReply.swap();" ></div>

Запрос подготовлен, но не выходит его внести в элемент, потому что, элемента не существует. Вот и хотелось бы, что бы при появлении, элемент сам давал повторный запрос.

По факту

<label name="incount <?php echo $prod['id'];?>" id="<?php echo $item['id'];?>" onload="incount(this)"></label>

[Gias]

Mellorn, проблема в том, что данный результат ajax запроса нужен в элементе подгружаемом из массива php. Так как запрос отправляется в PHP, он записывает новую строку в БД, страница обновляется, элемент подгружается из базы данных с множеством значений, и к ним нужно прикрутить еще одно значение из данного запроса. На данный момент у меня подгружает из БД ajax запрос и дополнительно PHP при загрузке страницы, хотелось бы оставить только ajax.

Нужно это для того, чтобы избавить PHP от перебора массива в массиве.

Создать элемент в ajax запросе не могу, потому что при отсутствии элемента, нужно обновить страницу для того, чтобы появился родитель.

[Gias]

В общем на данный момент единственное чего достиг:
1) Присвоил глобальную переменную в теле PHP:

<script type="text/javascript">
                         var incount2 = document.getElementsByName('incount <?php echo $prod['id'];?>')[0];
                    </script>

2) Использовал window.onlad в js файле:
window.onload = incount(incount2);

Если есть более адекватное решение, просьба подсказать.

[Мария Денисова]

aspirantes, в общем что-то я вам там ниже ответом описала. Я не знаю php вообще, но использовала такой подход в схеме, где я никак не могла узнать в какой момент вообще появляется в dom элемент, потому что его вклинивал чужой аякс, недоступный, с котором мне, как виджету, нельзя никак взаимодействовать. И нет никакой возможности его отследить, а реагировать на появление, например, новых товаров в корзине - было надо.
Если у вас похожая ситуация, то подойдет.

Answer 1

[Мария Денисова]

Вам сюда
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") 
                                    ) {
                                       //вставляем что там надо и не забываем отписаться от прослушки
                                    }
                                });
                            }
                        });
                    });

Comments

[Gias]

Не один день уже пробую разобраться в mutation observer, но так и не пойму принцип работы. Это, я так понял, дополнительное приложение... Но в целом это действительно лучшее, что я видел.

[Мария Денисова]

Это на самом деле единственное, что можно применить. Не могу утверждать на 100%, но кажется, именно с ним под капотом работают фреймворки типа angular, react, etc.
Хм, возможно мне было легко, потому что перед этим я нехило вкурила в потоки и rxjs. Я попробую немного объяснить.
Вообще вот по той ссылке в примере нормально рассказано, что он делает. Это немного похоже, как вы прикручиваете слайдер на jquery. В том смысле, что есть некий класс, мы создаем экземпляр. И передаем этому экземпляру объект для работы и настройки. А если слайдер нам больше не нужен, то обычно есть метод, чтобы его отключить.
Тут то же самое. Только у нас тут не слайдер создаться, а поток событий, отфильтрованный наблюдателем по нашему конфигу.
То есть, вот тут:
const observer = new MutationObserver(callback);

Мы создаем наблюдателя, даем ему колбек, который он должен запустить каждый раз, когда событие произойдет и пройдет через фильтр.

observer.observe(target, config);

Сообщаем за кем следить (например, body) и как фильтровать (наш конфиг), тем самым активируя слежение.
В колбеке считываем что изменилось, проводим какие-то действия - например, как в моем ответе, смотрим какие элемент были вставлены в этот момент, есть ли среди них искомый элемент.

И когда нам уже не нужно больше следить за изменениями, мы просто сообщаем нашему наблюдателю, что работу нужно остановить.
observer.disconnect();

Например, это можно сделать в коллбеке из моего примера, потому что вторым параметров в callback функцию, наблюдатель передает себя же (вернее ссылку на себя же).

var collback = function(mutationsList, observer)  {
                        mutationsList.forEach((mutation) => {
                            if (mutation.addedNodes.length > 0) {
                                mutation.addedNodes.forEach((node) => {
                                    if (
                                        node.localName === "some" &&
                                        node.hasAttribute("some") 
                                    ) {
                                       //нашли элемент some с атрибутом some. Провели с ним действия. 
                                      // и прекратили слежение
                                     observer.disconnect();
                                    }
                                });
                            }
                        });
                    });

Answer 2

[Gias]

Нашёл годный вариант наконец-таки:

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);