Остановка всех скриптов JS при выполнении функции JS.
 

Собсвенно столкнулся с такой ситуацией, когда:
При загрузке страницы выполняются скрипты анимации меню и текстовый редактор tiny_mce. Если мы не дожидаемся пока анимация закончится и нажимаем кнопку с функцией вызова формы поверх всех элементов(JS) - вся анимация замораживается и что САМОЕ СТРАШНОЕ - при закрытии формы методами javascript(display:none) и jquery(hide()) - ничего не работает что было запущено в фоновом режиме!

Господа гуру JS просвятите в чем беда? синхронный вызов функций?

Функция которую вызываю по кнопке:

function image_form_load_show(){
	
	function view_images(callback){
		var event="view_attachments";
		var view_images;
		var xmlhttp = getXmlHttp(); // Создаём объект XMLHTTP
		    		xmlhttp.open('POST', '/admin/script/attachments/attachments_event.php', true); // Открываем асинхронное соединение
		    		xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Отправляем кодировку
		    		xmlhttp.send("event=" + encodeURIComponent(event)); // Отправляем POST-запрос
		    		xmlhttp.onreadystatechange = function() { // Ждём ответа от сервера
		      			if (xmlhttp.readyState == 4) { // Ответ пришёл
		       		 		if(xmlhttp.status == 200) { // Сервер вернул код 200 (что хорошо)
						callback(xmlhttp.responseText);		 		
						}
		      			}
		  		};
	}
view_images(function(resp){
document.body.innerHTML+='<div style="padding: 10px; width:80%; position: absolute; top: 120px; left:10%; z-index: 999;" id="image_upload"><div style="width:100%; background: #d2d2ff; border: 3px rgb(46, 103, 153) solid;   text-align:center; vertical-align: middle; border-radius: 20px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); padding: 15px; "><div><h2 align=center>Выбрать титульное изображение:</h2><div style="background: white; border: 3px solid rgb(46, 103, 153); margin-top: 10px; overflow-y: scroll; height: 400px;">'+resp.replace(/width="170px"/gi,'width="70px"')+'</div><div style="margin-top: 10px;"><span style="display: inline-block; width: 100%; text-align: left;"><form action="/admin/script/content/upload.php" method="post" target="hiddenframe" enctype="multipart/form-data" onsubmit="hideBtn();" style=""><input type="file" id="userfile" name="userfile" /><div id="res"></div><iframe id="hiddenframe" name="hiddenframe" style="width:0px; height:0px; border:0px"></iframe><span style="font-size: medium;"><input type="submit" name="upload" id="upload" value="Загрузить" style="margin-top: 5px;"/><span class="button" onclick="catalog_close_all_form()" id="catalog_close_all_form" style="float:right;"><span>Закрыть</span></span></span></span></div></form></div></div>';})
}

document.body.innerHTML+=

Не неадо так делать.

a+=b;

->

a = a + b;

Т.е. таким образом у вас переписывается заново вся страница.

Ситуация ясна. Буду исправляться. Спасибо за ответ. =)

Нашел такой вот пример:

document.body.removeChild(document.getElementById(id));

Который позволяет удалить элемент в дереве после body.
Собственно назрел вопрос - как вывести полное дерево до элемента document.getElementById(id)? Т.е. хочу удалить тег по id если его родитель не body а друго тег, динамически меняюшийся.

Aeooe,
Добавление и удаление узлов

var element = document.getElementById(id),
       parent = element.parentNode;
       parent.removeChild(element)

Спасибо =)

Aeooe,
вы часто обращитесь к элементам когда их нет ещё на странице