boomrest
-
Posts
3 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by boomrest
-
Как обратиться к элементу созданному в результате ajax-запроса?
boomrest replied to boomrest's question in JavaScript
Можно было догадаться... Спасибо большое-прибольшое -
Как обратиться к элементу созданному в результате ajax-запроса?
boomrest posted a question in JavaScript
Файл ajax.js function showContent(link,contentBody) { var cont = document.getElementById(contentBody); var loading = document.getElementById('loading'); var http = createRequestObject(); if( http ) { http.open('get', link); http.onreadystatechange = function () { if(http.readyState == 4) { cont.style.display='block'; cont.innerHTML = http.responseText; } } http.send(null); } else { document.location = link; } } // создание ajax объекта function createRequestObject() { try { return new XMLHttpRequest() } catch(e) { try { return new ActiveXObject('Msxml2.XMLHTTP') } catch(e) { try { return new ActiveXObject('Microsoft.XMLHTTP') } catch(e) { return null; } } } } Файл zapis.php Время записи: <input type="text" id="date1" size="10" maxlength="10" /> <input type="text" id="time1" size="5" maxlength="5" /> Файл index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <style> #zapis { width: 270px; height: 40px; top: 100px; left: 200px; margin: 0px auto; padding: 15px 0px 0px 30px; border:1px solid #FF9966; background: #CCFFCC; position: absolute; display: none; z-index: 100; } </style> <script type="text/javascript" src="ajax.js"></script> <script> function dateTime() { document.getElementById('date1').value = '14-02-2012'; document.getElementById('time1').value = '10:07'; } </script> </head> <body> <div id="block_box"></div> <div id="add"> <h1>Добавление записи</h1> <!-- По событию onChange в <div id="zapis"></div> выводится результат скрипта zapis.php --> <select name='var1' onChange="showContent('zapis.php','zapis'), dateTime()"> <option value='1' selected>Вариант 1</option> <option value='2' selected>Вариант 2</option> <option value='3' selected>Вариант 3</option> </select> <div id="zapis"></div> <!-- ...вот сюда --> <div id="loading" style="display: none">Загрузка...</div> </div> </body> </html> Для записи значения даты и времени в input id="date1" и id="time1" (файл zapis.php) нужно вызвать функцию js dateTime() (файл index.php). Но как это сделать? Понятно, что пока не сработает для списка событие onChenge, инпутов ещё не существует и обращение к ним вызовет ошибку. Если вставить вызов функции dateTime() в onChange() - да, работает, но только до того момента, пока не пропал фокус с выбранного элемента списка. Т.е. сразу же надпись пропадает. Пробовал вызов нужной функции засунуть в onLoad файла zapis.php, т.е. <body onLoad='dateTeme()'> - не работает. В zapis.php даже alert не работает почему-то. (Кстати, почему?) Как мне обратиться по id к элементу, созданному в результате ajax запроса? Не может быть, что нет выхода. Спасибо. -
Да запросто. Элемент <table> представляет таблицу. Считается, что это нарушает семантику (т.е. смысл) разметки, поскольку мы в этом случае используем таблицы для представления того, что таблицей, по своей сути, не является. Это единственное, почему "таблицы - это плохо". Ну, не считая нагромождения тегов, конечно. Однако элемент <table> до сих пор часто используют - ради свойств, которыми он обладает. display: table - не задаёт таблицу, и элемент, к которому мы его примените, таблицей не станет - ни прямо, ни косвенно. Однако он получит те самые свойства, ради которых обычно применяют таблицы. Таким образом, мы убиваем двух зайцев: оставляем разметку чистой и заставляем элемент вести себя так, как нам удобно. Это вообще никоим образом не табличная вёрстка - просто потому, что таблиц мы не используем. Я крайне разочарован в div-ах, xhtml, IE и т.д. Раньше делал макет сайтов в таблицах, оказалось, что это семантически не верно. Решил валидность соблюсти, сделать все по правилам. И столкнулся с извечной проблемой форматирования div. Проблема в верстке класического макета на div: Шапка -> 3 колонки -> Подвал (Рис 1). Но вот незадача... Не получается сделать универсальный макет, когда колонки пустые, а подвал "прилеплен" книзу страницы, как в таблицах. В табличной верстке при задании высоты любой средней ячейки в 100%, отсчет ведется от контейнера <table> и таблица получается растянута полностью по высоте (Рис 3). В то время, как в <div> отсчет ведется от размера страницы (или от родителя) и при задании height: 100% подвал "уходит" вниз (Рис 2). Можно конечно подсчитать % средней части, но если изменится разрешение экрана, то и этот процент изменится. Например, при разрешении экрана 1024px (по высоте), хэдер=200px, футер=100px, высота средних колонок получается 64%. Но с другим разрешением экрана % изменится и подвал "отлипнет" от низа страницы или появится прокрутка. Можно ли сделать на div как в таблицах. И зачем тогда вся эта хваленая валидность, если нельзя? Рис 1. Как получается Рис 2. Как надо, но не получается. div height=100% Рис 3. А должно быть так (как в таблицах). Вот код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <style type="text/css"> body { margin: 0px; padding: 0px; height:100%; } html { margin: 0px; padding: 0px; height:100%; } #wrapper { text-align:center; width: 100%; height: 100%; } #header { height: 200px; width: 100%; text-align:center; background:#f99; } #sidebar1 { height:100%; width: 20%; float:left; text-align:center; background:#3366CC; } #content { height:100%; width:60%; float:left; text-align:center; background:#999999; } #sidebar2 { height:100%; width: 20%; float:left; text-align:center; background:#66FF66; } #footer { height: 100px; width: 100%; text-align:center; background-color: #0f0; clear: both; } </style></head> <body"> <div id="wrapper"> <div id="header">header</div> <div id="sidebar1">sidebar1</div> <div id="content">content</div> <div id="sidebar2">sidebar2</div> <div id="footer">footer</div> </div> </body> </html> Извините, что картинки большие. Спасибо