[закрыто][firefox+javascript]перерисовка страницы/элемента

pilot

Есть на странице элемент 
 <input type="text" id="foo" value="foo" />

Меняем ему Javascript'ом value:
 document.getElementById('foo').setAttribute('value','bar');

При этом на HTML странице текст в элементе input не меняется (остается foo но DOM inspector (firefox'овый встроенный) показывает value='bar' для этого элемента. Alert'ы javascript'a тоже показывают что value='bar'.
Надо каким-то образом заставить firefox страницу (элемент?) перерисовать.
Замечания:
- firefox 1.0.7 или 0.10
- размер страницы большой. На маленьком примере все работает правильно(точнее, я меняю value по onclick - меняется, setTimeout'ом - меняется).
- в Opera все работает.
Я погуглил, и вот чего нашел (не знаю насколько это имеет отношение к проблеме): http://www.experts-exchange.com/Web/Web_Languages/JavaScript...
Title: Flicker when modifying DOM in Firefox setTimeout or XHR handler
asked by RichieHindle on 10/17/2005 04:00PM PDT
I have a DHTML page that changes as you type into an input box, much like Google Suggest. My problem is that in Firefox, the region I'm updating flickers. It only flickers when updated from an asynchronous handler like a setTimeout handler or an XMLHttpRequest handler - if I update it synchronously in an onkeyup handler (for example) there's no flicker. But I need to update it in my XMLHttpRequest handler.
Here's a page that demonstrates the problem - a checkbox controls whether to update synchronously (in onkeyup) or asynchronously (in a setTimeout handler). In Firefox, the former works perfectly but the latter flickers.
<html>

<head>

<script type='text/javascript'>

function go

{

    var result = document.getElementById('result');

    var value = document.getElementById('input').value;

    var new_text = document.createTextNode(value);

    var new_div = document.createElement('DIV');

    new_div.appendChild(new_text);

    result.replaceChild(new_div, result.childNodes[0]);

}

function onkey

{

    if (document.getElementById('use_timeout').checked)

    {

        window.setTimeout("go", 10);

    }

    else

    {

        go;

    }

}

</script>

<style type='text/css'>

#result

{

    width: 200px;

    height: 50px;

    background-color: #ffffd0;

    border: 1px solid #666;

}

</style>

</head>

<body>

<p>With the checkbox checked, the DOM is modified in a timer handler, and in Firefox

the page flickers.  With it unchecked, the modification is done in the onkeyup handler, and

there is no flicker.</p>

<form method='get' action='nothing'>

<input type='input' size='20' id='input' autocomplete='off' onkeyup='onkey;' />

<input type='checkbox' id='use_timeout' checked='checked' />

<label for='use_timeout'>Use setTimeout</label>

</form>

<div id='result'><div>Type into the box...</div></div>

</body>

</html>

Только чтобы "посмотреть решение" надо платно зарегистрироваться
Вопросы:
Как заставить firefox перерисовать элемент?
Это баг firefox?
Может ли неправильно написанный скрипт на Javascript вызывать подобный эффект (т.е. допустим в моем скрипте есть ошибка, из-за которой элемент не перерисовывается)? (по-моему ошибок там нет, но кто знает...)

artimon

Атрибут value отвечает только за начальное значение.
Что за привычка всё усложнять? Напиши вместо
document.getElementById('foo').setAttribute('value','bar');

document.getElementById('foo').value='bar';

pilot

Спасибо!
Вроде работает. Но возникает несколько вопросов:
1. Почему работает для тестовых примеров?
 <html>

<head>

<title></title>

<script>

function clk{

    document.getElementById('foo').setAttribute('value',document.getElementById('foo').getAttribute('value')=='foo' ? 'bar' : 'foo');

    alert(document.getElementById('foo').getAttribute('value';

    }

window.setTimeout("clk",10);

</script>

</head>

<body>

<input type="text" id="foo" value="foo" />

</body>

</html>

и
 <html>

<head>

<title></title>

<script>

window.onclick = function(e){

    document.getElementById('foo').setAttribute('value',document.getElementById('foo').getAttribute('value')=='foo' ? 'bar' : 'foo');

    alert(document.getElementById('foo').getAttribute('value';

    }

</script>

</head>

<body>

<input type="text" id="foo" value="foo" />

</body>

</html>

2. Почему в Опере работает и работало "иногда" в firefox?
Вопросы, видимо, риторические...

artimon

Работает до тех пор, пока ты не изменишь значение этого поля вручную.

pilot

Понятно.
Спасибо!
Оставить комментарий
Имя или ник:
Комментарий: