Какое DOM или BOM событие происходит, когда AJAXом перегружаем панель?
 

Здравствуйте!

Рад, что работа заставляет меня время от времени работать c JS - для меня он как любимое хобби.

Вот ситуация: на странице jQuery плагином рисуем календарную сетку заполненную данными, которые приходят с контроллера. Все работает.

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

Но после AJAX рэфреша календарь не отрисовывается.

Я еще не смотрел детали, но предполагаю что календарный JS запускается на PageLoad.

И если мы хотим, чтобы он запускался каждый раз, когда панелька обновляется, то на какое событие его fire? какие вообще DOM или BOM события происходят при перезагрузке ДИВа AJAXом?

Спасибо

От автора: вероятно данная тема больше подходит для соседнего раздела (Events, DOM) - на усмотрение модераторов - можно перенести тему туда.

Никаких. Но изменения можно отловить через MutationObserver. Вот только это не совсем хороший вариант. Твой скрипт сам должен генерировать событие.

Какой скрипт?

Событие какого типа?

В результате чего генеровать?

Я так понимаю. Есть JS скриптик, который постоянно следит за содержание какого-то скрытого ДОМ элемента в обновляемом диве.

При каждом обновлении контроллер забрасывает в этот скрытий элемент новое значение.

Тот самый JS скриптик видит изменение и генерирует перезапуск календарного скрипта.

Но совсем не уверен, что мои размышления идут в верном направлении. Вероятно, ларчик проще открывается...

Можешь CustomEvent использовать, но это ни к чему (траблы с кроссбраузерностью). Проще в своем приложении реализовать свой EventEmitter интерфейс. В jQuery кстати уже встроенна поддержка событий.

В тот момент, когда ты обновляешь через ajax элемент - генерируй событие. Другой участок твоего кода, который установил обработчик на данный тип события, отработает при его возникновении.

В общем чета типа:

function EventEmmiter() {
   
}

// ... реализуем интерфейс EventEmmiter

/*
 * @inherits EventEmmiter
 *
 */
function Controller() {
    EventEmitter.call(this);
}

Controller.prototype = Object.create(EventEmitter.prototype, {
    constructor: {value: Controller}
});

Controller.prototype.updateDiv = function() {
    utils.request('some/url', this.onDivContentLoaded.bind(this));
};

Controller.prototype.onDivContentLoaded = function(data) {
    document.querySelector('div').innerHTML = data;
    this.dispatchEvent('divupdated', {data: data});
};



var controller = new Controller();

controller.addEventListener('divupdated', function() {
    alert('Div was updated');
});

controller.updateDiv();

Спасибо danik.js .

Пожалуй, код выше - это будет сложновато для меня сейчас. Это JS работающей на сервере? Или это все ранится в браузере?

А можно поставить вопрос по другому: если сервер вернул AJAXом Див в котором есть JS скрипт: он запустится? или браузер только при первичной загрузки документа считывает весь JS, а после этого DOM может менять, а вновь пришедшие скрипты уже не будут считываться и выполняться?

Если бы скрипт пришедший с фрагментом HTML мог быть считан браузером и мог бы сам запуститься - то не было проблем.

спасибо за помощь