Как перезапускать страницу, если определённый DIV с классом CLASS будет иметь стиль display: none на JavaScript, постоянно отслеживая?

Question

[Speakea1y1289]

Добрый день. Имеется следующий код:

<div class="postroeno_calculator_frame jqmWindow jqm-init"></div>

Нужно постоянно отслеживать данный DIV с классом postroeno_calculator_frame и если данный DIV будет иметь стиль display: none, то должны перезапускать страницу. Как это можно сделать?

Comments

[FKV]

Можно спросит? А для чего все это?

[FKV]

По ходу я догадался зачем вам все это) Неужели вы хотите таким образом отчистить калькулятор?)

Answer 1

[Andrey Suha]

тыц

Comments

[Speakea1y1289]

Не работает.

template_b7989b35efcee57a1dce6f5b623e31db_v1.js?1561661454363548:599 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

Код, который написал:

var target = document.getElementById('ga_input');
 
// создаём экземпляр MutationObserver
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});
 
// конфигурация нашего observer:
var config = { attributes: true, childList: true, characterData: true };
 
// передаём в качестве аргументов целевой элемент и его конфигурацию
observer.observe(target, config);
 
// позже можно остановить наблюдение
observer.disconnect();

Пытаюсь получить изменения у input.

[Stockholm Syndrome]

Speakea1y1289, проверьте что в target

[Andrey Suha]

Speakea1y1289,

let target = document.getElementById('test'),

    // создаём экземпляр MutationObserver
    observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            dl.log(mutation.type);
        });
    }),

    // конфигурация нашего observer:
    config = { attributes: true, childList: true, characterData: true };

// передаём в качестве аргументов целевой элемент и его конфигурацию
observer.observe(target, config);
document.getElementById("test").classList.add("test");

Вот этот код работает, когда я удалил со страницы элемент с id test, то получил такую же ошибку как у Вас.
Я бы Вам советовал внимательно смотреть в свой код и вдумываться в него

[Speakea1y1289]

Stockholm Syndrome, забудем про input. Сейчас мне надо отслеживать div блок, которого по умолчанию нет на странице и он создается при нажатии на кнопку:

(сайт http://postroeno.bitrixstudio24.ru)
Ну вот, при нажатии на эту кнопку создаётся форма в div блоке с классом postroeno_calculator_frame

При закрытии этой формы (нажав на крестик и тыкнув в свободное место) этот DIV приобретает стиль display: none;
Вопрос - как перезапускать страницу при всех этих условиях?

[Andrey Suha]

Повесить обработчик на крестик и на подложку модалки, а если jquery модалка, то у неё вообще есть событие закрытия. Вот отловили закрытие модалки и вызываете window.location.reload()

[Speakea1y1289]

Andrey Suha, В чём проблема?

Вот код:

$( document ).ready(function() {	
	$("#send-datacalc").click( function() {
		var target = document.getElementsByClassName('postroeno_calculator_frame');
		console.log(target);
		 
		// создаём экземпляр MutationObserver
		var observer = new MutationObserver(function(mutations) {
		  mutations.forEach(function(mutation) {
			console.log(mutation.type);
		  });    
		});
		 
		// конфигурация нашего observer:
		var config = { attributes: true, childList: true, characterData: true };
		 
		// передаём в качестве аргументов целевой элемент и его конфигурацию
		observer.observe(target, config);
	});
});

Сайт: postroeno.bitrixstudio24.ru

[Stockholm Syndrome]

Speakea1y1289, ну так у вас target это коллекция, используйте querySelector

var target = document.querySelector('.postroeno_calculator_frame');

[Speakea1y1289]

Stockholm Syndrome,
Не работает!

$( document ).ready(function() {	
	$("#send-datacalc").click( function() {
		var target = document.querySelector('postroeno_calculator_frame');
		console.log(target);
		 
		// создаём экземпляр MutationObserver
		var observer = new MutationObserver(function(mutations) {
		  mutations.forEach(function(mutation) {
			console.log(mutation.type);
		  });    
		});
		 
		// конфигурация нашего observer:
		var config = { attributes: true, childList: true, characterData: true };
		 
		// передаём в качестве аргументов целевой элемент и его конфигурацию
		observer.observe(target, config);
	});
});

[Speakea1y1289]

Stockholm Syndrome, опечатался. Теперь такая херня вылазит, а потом уже нормальный элемент:

[Stockholm Syndrome]

Speakea1y1289, потому что в первый раз нужного элемента нет