Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   событие, которое срабатывает при изменении DOM структуры (https://javascript.ru/forum/events/9785-sobytie-kotoroe-srabatyvaet-pri-izmenenii-dom-struktury.html)

amigo* 05.06.2010 16:29

событие, которое срабатывает при изменении DOM структуры
 
ситуация такая. Есть html страничка, которая при старте подгружает несколько .js файлов (js`ники писал не я).
Следующим шагом происходит get запрос, который очевидно генерируется в одном из js файлов. В ответе - text/javascript функция, которая забивает данными определённый div.

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

Функцию, которая генерирует этот запрос, мне найти не удаётся (js-ники сильно перекручены). Соответственно доступа к функции-обработчику ответа у меня тоже нет. Но данные, полученные в respons`е мне нужно подкорректировать (доступа к php файла сервера нет, можно редактировать только js).

Решение, которое приходит в голову - в window.onload отслеживать нужный мне div и, если в div были вставлены данные, то вызвать свою функцию, подкорректировать эти данные и вернуть обратно.

Так вот как отследить изменение контента div`а я не знаю. Может кто-то ещё идею подкинет?
Может в onload`e считать количество детей этого дива...

exec 05.06.2010 17:01

var old = node.innerHTML;
setInterval(function () {
if (node.innerHTML != old) {
/* handler */
}
}, 100);

micscr 05.06.2010 17:04

Функцию, которая генерирует этот запрос, мне найти не удаётся

поищите получше. Эту функцию фиг скроешь.
Библиотека какая то используется, jQuery например ?

p.s. вообще ваша деятельность - подозрительна - не доплатили программисту что ли ?

micscr 05.06.2010 17:05

exec, жестокая такая проверка. Тормозить работу не будет?

exec 05.06.2010 17:11

micscr, не будет.

amigo* 05.06.2010 17:31

2 exec:
спасобо за вариант решения буду пробовать. Вопрос ещё по ходу - нельзя ли при срабатывании if в конце блока удалить setInterval, чтобы вдальнейшем не делала лишних проверок?

2 micscr:
подгружаются 2 js файла. оба используют jquery. функции в них начинаются так: function($){}(jquery), и внутри функций активно используются методи jquery.
В этих js файлах для того, чтобы найти запрос я искал следующие функции/переменные : XmlHttpRequest, $.get, $.post, load(), getJSON(), getScript(). Такого там не было.
Такой ещё вопрос. Как могут эти файлы использовать библиотеку jquery, если на клиента она не подгружалась? (смотрел в Fiddler`e)

micscr 05.06.2010 17:43

нельзя ли при срабатывании if в конце блока удалить setInterval, чтобы вдальнейшем не делала лишних проверок?

конечно можно удалить.
var inter = setInterval ...
if (больше не надо) {
  clearInterval(inter);
}


Как могут эти файлы использовать библиотеку jquery, если на клиента она не подгружалась?

должна была подгрузиться. Без неё бы не работало, а ведь работает? Смотри в FireBug-е.
XmlHttpRequest, $.get, $.post, load(), getJSON(), getScript(). Такого там не было.

А .ajax не искал? Поищи еще по расширению - php. И вообще - просмотри $(document).ready() - там скорее всего такая подгрузка инициируется.
Можешь ссылку дать - вместе посмотрим.

PeaceCoder 05.06.2010 17:48

Вариант exec хорош, только если например будет модификация атрибутов то триггер тоже стработает.

amigo* 05.06.2010 17:51

http://tour-consulting.com.ua/samo/index.html
Вот этот сайт. Только я не в firebug`e смотрел, а в fiddler`e

micscr 05.06.2010 18:21

подзашифровано там просто пакером. jQuery есть.

amigo* 05.06.2010 18:29

Цитата:

Сообщение от micscr (Сообщение 58030)
подзашифровано там просто пакером. jQuery есть.

А в каком месте jQuery подгружается, можете подсказать? И почему его не видно в firebug`e в подгружаемых библиотеках?

micscr 06.06.2010 12:08

раз есть jQuery значит аякс - запросы идут скорее всего через него. А в jQuery имеется обработчик $.ajaxSuccess() - наверное то что тебе надо - будет вызываться когда будут успешно завершаться аякс-запросы.
Выстави его в конце своего скрипта и изучай.

amigo* 06.06.2010 15:34

спасибо большое, буду пробовать

e1f 07.06.2010 10:15

Цитата:

Сообщение от exec (Сообщение 58016)
var old = node.innerHTML;
setInterval(function () {
if (node.innerHTML != old) {
/* handler */
}
}, 100);

А если изменился класс элемента, тоже сработает ведь, правда? Идея Говно с большой буквы, честно говоря. Тем более, что ТС'у наверняка нужен ajaxSuccess + немного бубнов, как уже отметил micscr

exec 07.06.2010 10:25

Цитата:

А если изменился класс элемента, тоже сработает ведь, правда?
Ага, если искать не по классу.

e1f 07.06.2010 11:12

Цитата:

Сообщение от exec (Сообщение 58191)
Ага, если искать не по классу.

Всмысле? Что искать-то?

exec 07.06.2010 11:14

DOM-объект, у которого нужно отследить изменение содержимого.

e1f 07.06.2010 11:18

exec, я снова. Биндите Вы Ваш метод на node, так? Изменяется класс у потомка node. Бинго -- метод сработал. Еще раз повторюсь -ТС'у необходимо идти явно не этим путем.

exec 07.06.2010 11:28

Ну так и надо было сразу говорить, что речь идёт о потомке элемента, а не о нём самом.
Тогда можно сравнивать по innerText/textContent.

e1f 07.06.2010 11:40

Ок, не вопрос :) тогда делаем так (jQuery):
$(":first-child", node).wrap(document.createElement("DIV"));


Изменение DOM налицо :) Изменения innerText/textContent вроде как нет.

exec 07.06.2010 11:50

В таком случае можно добавить проверку на кол-во всех потомков элемента.

e1f 07.06.2010 12:02

exec, отлично :) Еще пример (взял с jqueri api, влом придумывать):
$("button").click(function() {
    $(this).replaceWith("<div>" + $(this).text() + "</div>");
});

exec 07.06.2010 12:26

Так тут вроде проверка на кол-во потомков сработает — jQuery сначала создаёт новый элемент, вставляет его после нужного узла и удаляет старый. Кол-во потомков должно меняться два раза.

UPD: Описанные выше действия происходят так быстро, что setInterval не успевает их засечь. Но, думаю, всё равно можно какой-нибудь костыль придумать.

e1f 07.06.2010 13:45

exec, DOM Mutation Event уже придумали за Вас :) А костыли -- они для инвалидов, в конце концов.

amigo* 09.06.2010 12:15

Воспользовался методом exec, за что ему спасибо. Ни .ajaxSuccess(), ни .ajaxError() не реагировали на get запрос, который шёл по умолчанию. Когда я подменил этот запрос своим (отправлял его первым), то срабатывал .ajaxError(), в теле ответа которого ничего не было, хотя в firebuge был виден ответ сервера + статус 200.

micscr 09.06.2010 15:44

Я еще тогда но не сильно вникая смотрел, что это не ajax запрос походу - так как на другой домен. Наверное - через <script> и innerHTML.
Если использовал метод exec то добавлял следующую строку ? :

var old = node.innerHTML;
setInterval(function () {
if (node.innerHTML != old) {
var old = node.innerHTML;
/* handler */
}
}, 100);

amigo* 09.06.2010 16:16

Вот так делал:

function resultset_link()
{
	var old = $('#resultset').eq(0).html();
	var inter=setInterval(function () 
    {
		if ($('#resultset').eq(0).html() != old) 
		{
			/*handler;*/
			clearInterval(inter); 
		}
	}, 100);
};


Там есть вызов такого типа: $.remoteScript('get', param1,{},param2).
Только вот синтаксис этой функции на jquery.com я не нашёл.

micscr 09.06.2010 16:22

ну так нормально - если засечь только как один раз вначале отработает. Так же надо было?

amigo* 09.06.2010 16:54

да. обработчик должен был отработать только один раз.
Есть ещё вопрос, который было бы интересно узнать... как в этих библиотеках используется JQuery, при этом не подгружая библиотеку на клиента?

micscr 09.06.2010 16:56

Ага, я уже посмотрел - ты в обработку нажатия кнопки вызов этой функции запихнул. Работает - и нормально.

Валес 11.04.2017 13:39

Есть событие "onDOMSubtreeModified". Срабатывает при изменении в DOM-элемента. В обработчике событий, разумеется, объявляется как "DOMSubtreeModified".


Часовой пояс GMT +3, время: 05:35.