<div id="aaa"></div>
<input type=button name=a value=a onClick="document.getElementById('aaa').innerHTML = '<div id=bbb></div>';document.getElementById('bbb').innerHTML = 'text';">
Как создавать динамические видимые дивы?
Всем привет!
У меня такая проблема:
Есть страница с комментариями, в которых каждый комментарий выводится в отдельный div, и на каждый комментарий можно ответить на AJAX'е, но дивы которые новые дивы, которые возвращаются PHP-скриптом и вставляются в страницу не работают, т.е. они отображаются на странице но при обращении к ним и попыткам получить текст выдаётся ошибка "Требуется объект"... Как можно сделать эти дивы видимыми?
У меня такая проблема:
Есть страница с комментариями, в которых каждый комментарий выводится в отдельный div, и на каждый комментарий можно ответить на AJAX'е, но дивы которые новые дивы, которые возвращаются PHP-скриптом и вставляются в страницу не работают, т.е. они отображаются на странице но при обращении к ним и попыткам получить текст выдаётся ошибка "Требуется объект"... Как можно сделать эти дивы видимыми?
может надо как-то JS переинициализировать?
Код покажите.
а какую именно часть? там много очень
и тишина...
так что никто не знает как переинициализировать скрипт JS и все тэги?
Цитата: Rexulnik
так что никто не знает как переинициализировать скрипт JS и все тэги?
А что никто не знает, что вопросы нужно уметь правильно задавать и телепатов тут нет?
Цитата: Nixus
А что никто не знает, что вопросы нужно уметь правильно задавать и телепатов тут нет?
А что я не так задал???
У меня есть дивы в которые вставляются динамически другие дивы и при обращении к этим новым дивам происходит ошибка Нет объекта. Что тут непонятного?
Цитата: Rexulnik
а какую именно часть? там много очень
начиная со строки 125 и заканчивая строкой 207... :D
Цитата: skywalker
начиная со строки 125 и заканчивая строкой 207... :D
А чего не с 1?
Цитата: Rexulnik
А чего не с 1?
Покажите весь когд JS.
хз, я когда вставляю новые полученный от бекенда текст в див через innerHTML, то все внутренние дивы потом нормально получаются через getElementById.. во всех браузерах.. то что если вы делаете не так, то нужен код))
Цитата: Rexulnik
и тишина...
А чего писать то? Ты ясно с кодом накосячил, чего тут можно обсуждать?
Я вот тут: ixbt.com/soft/ajax.shtml подгружал данные с бэкэнда через JS и все было нормально. Если у тебя нечто подобное не получается, то у тебя ясно косяки в коде.
Цитата: Rexulnik
А что я не так задал???
У меня есть дивы в которые вставляются динамически другие дивы и при обращении к этим новым дивам происходит ошибка Нет объекта. Что тут непонятного?
У меня есть дивы в которые вставляются динамически другие дивы и при обращении к этим новым дивам происходит ошибка Нет объекта. Что тут непонятного?
Как ты к внутренним дивам обращаешся? Силой мысли? Или все-таки кодом, который неплохо было бы показать, а не проводить семинар по телепатии.
Думается мне, что автор не имеет понятия о DOM API реализации под JavaScript и поэтому бродить по дереву всплепую.
Rexulnik, можешь показать кусок кода, который создаёт новый див, и кусок кода, который к нему впоследствии обращается?
Вообще, создавать новые дивы через innerHTML не совсем правильно.
Стоит попробовать так:
Так будет правильнее.
Стоит попробовать так:
Код:
var newDiv = document.createElement("div");
newDiv.setAttribute('id','тут пишем id нового дива');
document.getElementById('тут id родительского дива').appendChild(newDiv);
newDiv.setAttribute('id','тут пишем id нового дива');
document.getElementById('тут id родительского дива').appendChild(newDiv);
Так будет правильнее.
Это PHP который выводит комменты при загрузке и такой же код возвращает сервак на AJAX'е:
Это JS:
Код:
function getcomments($id, $status, $karma, $commkarma, $commmin, $lastcomment, $login)
{
$rs = mysql_query('SELECT id, text, date, login FROM comments WHERE parrent_id = '.$id);
while ($a = mysql_fetch_array($rs))
{
$s .= "\r\n".'<div id="'.$a['id'].'"><dd id="'.$a['id'].'">'.date('d.m.Y H:i:s', $a['date']);
$s .= '<div id="t'.$a['id'].'">'.stripslashes($a['text']).'</div>';
$tmp = getcomments($a['id'], $status, $karma, $commkarma, $commmin, $lastcomment, $login);
if (strlen($tmp))
$s .= '<dl>'.$tmp.'</dl>';
$s .= '<br /><a href="#" onclick="showForm('.$a['id'].');return false;">Answer</a>';
$s .= '<br /><a href="#" onclick="showForm('.$a['id'].');return false;">Answer</a>';
$s .= '</dd></div>'."\r\n";
}
return $s;
}
$rs = mysql_query('SELECT id, text, date, login FROM comments WHERE parrent_id = 0 AND blog_id = '.$blog);
while ($a = mysql_fetch_array($rs))
{
$s .= '<div id="'.$a['id'].'"><dl>'.date('d.m.Y H:i:s', $a['date']);
$s .= '<div id="t'.$a['id'].'">'.stripslashes($a['text']).'</div>';
$s .= '<br /><a href="#" onclick="showForm('.$a['id'].');return false;">Answer</a>';
$s .= getcomments($a['id'], $status, $karma, $commkarma, $commmin, $lastcomment, $login)."</dl></div>\r\n";
}
{
$rs = mysql_query('SELECT id, text, date, login FROM comments WHERE parrent_id = '.$id);
while ($a = mysql_fetch_array($rs))
{
$s .= "\r\n".'<div id="'.$a['id'].'"><dd id="'.$a['id'].'">'.date('d.m.Y H:i:s', $a['date']);
$s .= '<div id="t'.$a['id'].'">'.stripslashes($a['text']).'</div>';
$tmp = getcomments($a['id'], $status, $karma, $commkarma, $commmin, $lastcomment, $login);
if (strlen($tmp))
$s .= '<dl>'.$tmp.'</dl>';
$s .= '<br /><a href="#" onclick="showForm('.$a['id'].');return false;">Answer</a>';
$s .= '<br /><a href="#" onclick="showForm('.$a['id'].');return false;">Answer</a>';
$s .= '</dd></div>'."\r\n";
}
return $s;
}
$rs = mysql_query('SELECT id, text, date, login FROM comments WHERE parrent_id = 0 AND blog_id = '.$blog);
while ($a = mysql_fetch_array($rs))
{
$s .= '<div id="'.$a['id'].'"><dl>'.date('d.m.Y H:i:s', $a['date']);
$s .= '<div id="t'.$a['id'].'">'.stripslashes($a['text']).'</div>';
$s .= '<br /><a href="#" onclick="showForm('.$a['id'].');return false;">Answer</a>';
$s .= getcomments($a['id'], $status, $karma, $commkarma, $commmin, $lastcomment, $login)."</dl></div>\r\n";
}
Это JS:
Код:
<script>
function loadXMLDoc(url, poststr, id)
{
req = null;
if (window.XMLHttpRequest)
{
try
{
req = new XMLHttpRequest();
}
catch (e) { }
}
else if (window.ActiveXObject)
{
try
{
req = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e)
{
try
{
req = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) { }
}
}
if (req)
{
req.onreadystatechange = processReqChange;
req.open("POST", url, true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=windows-1251;");
req.setRequestHeader("Content-length", poststr.length);
req.setRequestHeader("Connection", "close");
req.send(poststr);
reqTimeout = setTimeout("req.abort();", 5000);
}
else
{
alert("Your browser not supports AJAX");
}
}
idt = 0;
function processReqChange()
{
if (req.readyState == 4)
{
clearTimeout(reqTimeout);
if (req.status == 200)
{
document.getElementById("comments").innerHTML = req.responseText;
}
else
{
alert("Can't get data.");
}
}
}
function requestdata(params, id)
{
var poststr = "text=" + cyrEsc(document.getElementById("text").value);
if (id == 'comments')
{
poststr += "&id=0" + "&tid=" + idb;
document.getElementById("showcomm").innerHTML = '';
}
else
{
poststr += "&id=" + id + "&tid=" + idb;
document.getElementById("showcomm").innerHTML = '';
}
loadXMLDoc('addcomment.php', poststr, id);
}
oldtext = '';
oldid = 0;
function showForm(id)
{
document.getElementById("showcomm").innerHTML = '';
if (oldid == id)
return;
if (oldid != '')
document.getElementById(oldid).innerHTML = oldtext;
alert(idt);
oldtext = document.getElementById(id).innerHTML;
document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + '<dd><form action="java script:requestdata(document.getElementById(\'form1\'), ' + id + ');" method="post" name="form1" id="form1"><textarea name="text" cols=30 rows=3></textarea></dd><dd><input type="button" onclick="onview(document.form1.text.value, '
+ id + ');" name="view" value=" View " /> <input type="submit" name="submit" onclick="idt = \'t'
+ id + '\';" value=" Add " /></form></dd>';
oldid = id;
flag = false;
}
</script>
<body>
<div id="comments"><?php print $s; ?></div>
</body>
<div id="showcomm">
</div>
function loadXMLDoc(url, poststr, id)
{
req = null;
if (window.XMLHttpRequest)
{
try
{
req = new XMLHttpRequest();
}
catch (e) { }
}
else if (window.ActiveXObject)
{
try
{
req = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e)
{
try
{
req = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) { }
}
}
if (req)
{
req.onreadystatechange = processReqChange;
req.open("POST", url, true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=windows-1251;");
req.setRequestHeader("Content-length", poststr.length);
req.setRequestHeader("Connection", "close");
req.send(poststr);
reqTimeout = setTimeout("req.abort();", 5000);
}
else
{
alert("Your browser not supports AJAX");
}
}
idt = 0;
function processReqChange()
{
if (req.readyState == 4)
{
clearTimeout(reqTimeout);
if (req.status == 200)
{
document.getElementById("comments").innerHTML = req.responseText;
}
else
{
alert("Can't get data.");
}
}
}
function requestdata(params, id)
{
var poststr = "text=" + cyrEsc(document.getElementById("text").value);
if (id == 'comments')
{
poststr += "&id=0" + "&tid=" + idb;
document.getElementById("showcomm").innerHTML = '';
}
else
{
poststr += "&id=" + id + "&tid=" + idb;
document.getElementById("showcomm").innerHTML = '';
}
loadXMLDoc('addcomment.php', poststr, id);
}
oldtext = '';
oldid = 0;
function showForm(id)
{
document.getElementById("showcomm").innerHTML = '';
if (oldid == id)
return;
if (oldid != '')
document.getElementById(oldid).innerHTML = oldtext;
alert(idt);
oldtext = document.getElementById(id).innerHTML;
document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + '<dd><form action="java script:requestdata(document.getElementById(\'form1\'), ' + id + ');" method="post" name="form1" id="form1"><textarea name="text" cols=30 rows=3></textarea></dd><dd><input type="button" onclick="onview(document.form1.text.value, '
+ id + ');" name="view" value=" View " /> <input type="submit" name="submit" onclick="idt = \'t'
+ id + '\';" value=" Add " /></form></dd>';
oldid = id;
flag = false;
}
</script>
<body>
<div id="comments"><?php print $s; ?></div>
</body>
<div id="showcomm">
</div>
Со всеми дивами правильно работает а с новыми ошибка (((
посмотри всё это дело в мозилле с фаербагом... какой ответ приходит от сервака, как всё вставляется, и правильно ли имена у дивов получаются
Где вызывается showForm и с какими параметрами? В какой строчке ошибка?
Цитата: Nixus
Где вызывается showForm и с какими параметрами? В какой строчке ошибка?
showForm вызывается для каждого комментария, под ним динамически вставляется форма. А ошибка в строчке обращения к к не существующему диву: oldtext = document.getElementById(id).innerHTML;
Код:
function showForm(id)
{
document.getElementById("showcomm").innerHTML = '';
if (oldid == id)
return;
if (oldid != '')
document.getElementById(oldid).innerHTML = oldtext;
oldtext = document.getElementById(id).innerHTML; // Вот здесь выскакивает ошибка "Требуется объект"
document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + '<dd><form action="java script:requestdata(document.getElementById(\'form1\'), ' + id + ');" method="post" name="form1" id="form1"><textarea name="text" cols=30 rows=3></textarea></dd><dd><input type="button" onclick="onview(document.form1.text.value, '
+ id + ');" name="view" value=" View " /> <input type="submit" name="submit" onclick="idt = \'t'
+ id + '\';" value=" Add " /></form></dd>';
oldid = id;
flag = false;
}
{
document.getElementById("showcomm").innerHTML = '';
if (oldid == id)
return;
if (oldid != '')
document.getElementById(oldid).innerHTML = oldtext;
oldtext = document.getElementById(id).innerHTML; // Вот здесь выскакивает ошибка "Требуется объект"
document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + '<dd><form action="java script:requestdata(document.getElementById(\'form1\'), ' + id + ');" method="post" name="form1" id="form1"><textarea name="text" cols=30 rows=3></textarea></dd><dd><input type="button" onclick="onview(document.form1.text.value, '
+ id + ');" name="view" value=" View " /> <input type="submit" name="submit" onclick="idt = \'t'
+ id + '\';" value=" Add " /></form></dd>';
oldid = id;
flag = false;
}
Вставь перед строкой, вызывающей ошибку, alert(id); и посмотри какое значение покажет. Есть подозрение, что передается неправильный идентификатор.
Возможно проблема в том, что у тебя несколько элементов с одинаковыми id.
Возможно проблема в том, что у тебя несколько элементов с одинаковыми id.
Цитата: Nixus
Возможно проблема в том, что у тебя несколько элементов с одинаковыми id.
Чего быть не должно в принципе )
Цитата: Nixus
Вставь перед строкой, вызывающей ошибку, alert(id); и посмотри какое значение покажет. Есть подозрение, что передается неправильный идентификатор.
Возможно проблема в том, что у тебя несколько элементов с одинаковыми id.
Возможно проблема в том, что у тебя несколько элементов с одинаковыми id.
Да, что-то я кажись там с ID намутил, я то убрал всё, заменил новым кодом:
Код:
function showForm(id)
{
document.getElementById("showcomm").innerHTML = '';
if (oldid == id)
return;
if (oldid != '')
document.getElementById(oldid).innerHTML = oldtext;
oldtext = document.getElementById(id).innerHTML;
document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + '<dd><form action="java script:requestdata(document.getElementById(\'form1\'), \'' + id + '\');" method="post" name="form1" id="form1"><textarea name="text" cols=30 rows=3></textarea></dd><dd><input type="button" onclick="onview(document.form1.text.value, \''
+ id + '\');" name="view" value=" View " /> <input type="submit" name="submit" onclick="idt = \''
+ id + '\';" value=" Add " /></form></dd>';
oldid = id;
flag = false;
}
{
document.getElementById("showcomm").innerHTML = '';
if (oldid == id)
return;
if (oldid != '')
document.getElementById(oldid).innerHTML = oldtext;
oldtext = document.getElementById(id).innerHTML;
document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + '<dd><form action="java script:requestdata(document.getElementById(\'form1\'), \'' + id + '\');" method="post" name="form1" id="form1"><textarea name="text" cols=30 rows=3></textarea></dd><dd><input type="button" onclick="onview(document.form1.text.value, \''
+ id + '\');" name="view" value=" View " /> <input type="submit" name="submit" onclick="idt = \''
+ id + '\';" value=" Add " /></form></dd>';
oldid = id;
flag = false;
}
Этот код абсолютно нормально работает в опере и всё правильно выполняется, а в IE выдаёт "неизвестную ошибку" на строке
Код:
document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + '<dd><form action="java script:requestdata(document.getElementById(\'form1\'), \'' + id + '\');" method="post" name="form1" id="form1"><textarea name="text" cols=30 rows=3></textarea></dd><dd><input type="button" onclick="onview(document.form1.text.value, \''
причём когда заменить форму на скажем "<p></p>" то всё работает... IE чего-то не даёт вставить форму в див... в чём может быть причина?
Может это 1 из очередных лагов IE?
ура, всё работает! это оказывается всё было из-за тэга dd... всем спасибо.
попробуй так создавать коментарии:
вроде сочинил то что те нужно)
<script>
var countComents=0;
function add_div()
{
countComents++;
text=document.getElementById("coment").value;
newDiv=document.createElement("DIV");
newDiv.innerHTML="Coment #"+countComents+": "+text;
document.getElementById("main_coment_field").appendChild(newDiv);
}
</script>
<div id='main_coment_field'>Coments:
</div>
<input type="text" id="coment" size="50">
<input type="button" value="Add_new_div" onclick="add_div()">
сори писал быстрым ответом код красиво не оформил
вроде сочинил то что те нужно)
<script>
var countComents=0;
function add_div()
{
countComents++;
text=document.getElementById("coment").value;
newDiv=document.createElement("DIV");
newDiv.innerHTML="Coment #"+countComents+": "+text;
document.getElementById("main_coment_field").appendChild(newDiv);
}
</script>
<div id='main_coment_field'>Coments:
</div>
<input type="text" id="coment" size="50">
<input type="button" value="Add_new_div" onclick="add_div()">
сори писал быстрым ответом код красиво не оформил