VPF::Проблема с формированием select в Opera

dfire

Дата 30.8.2007, 22:07 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 10
Регистрация: 30.8.2007

Репутация: нет
Всего: нет

Всем привет.

Столкнулся с проблемой в Opera 9.2x (IF и FF жуют ее без проблем).

пример кода:

Код


<html>
<head>
<title>Opera Bug</title>
<script language="javascript">
var regiondb = new Object()    
regiondb["africa"] = [{value:"1", text:"(africa) Каир"},
                      {value:"2", text:"(africa) Триполи"},
                      {value:"2", text:"(africa) Претория"}];
regiondb["asia"] = [{value:"1", text:"(asia) Банкок"},
                    {value:"2", text:"(asia) Дели"},
                    {value:"3", text:"(asia) Улан-Батор"},
                    {value:"4", text:"(asia) Джакарта"},
                    {value:"5", text:"(asia) Токио"}];

function showForm(formID) {
    switch (formID) {
        case 'step1':
            document.getElementById("step1").style.display = '';
            document.getElementById("step2").style.display = 'none';
            break;
        case 'step2':
            document.getElementById("step1").style.display = 'none';
            document.getElementById("step2").style.display = '';
            break;
    }
}
function setCities(chooser) {
    var cityChooser = chooser.form.elements["city"];
    cityChooser.options.length = 0;
    var choice = chooser.options[chooser.selectedIndex].value;
    var db = regiondb[choice];
    cityChooser.options[0] = new Option("Город: ", "", true, false);
    if (choice != "") {
        for (var i = 0; i < db.length; i++) {
            cityChooser.options[i + 1] = new Option(db[i].text, db[i].value);
        }
    }
}
</script>
</head>
<body>
<form name="dealers" action="">

  <div id="step1">
  <select name="continent" onChange="setCities(this)">
    <option value="" selected>Континент: </option>
    <option value="africa">Африка</option>
    <option value="asia">Азия</option>
  </select>
  <a href="javascript:void(0);" onClick="showForm('step2')">go step #2 >></a>
  </div>

  <div id="step2" style="display:none">
  <select name="city">
    <option value="" selected>Город: </option>
  </select>
  <a href="javascript:void(0);" onClick="showForm('step1')"><< go step #1</a>
  </div>

</form>
</body>
</html>

Суть: имеем два дропа, второй скрыт в блоке <div> с атрибутом display:hide.
Выбираем Африку и идем на второй шаг, смотрим содержимое второго дропа - все Ок.
Идем по линку на первый дроп и выбираем Азию, по линку на второй шаг и снова все Ок.
Идем назад по линку на первый шаг и снова выбираем Африку, по линку на втором шаге видим следующее:
(africa) Каир
(africa) Триполи
(africa) Претория
(asia) Джакарта
(asia) Токио
Прикол в том, что если мы посмотрим на DOM этой странички через девелоперскую консоль Оперы, то увидим,
что последних пунктов во втором дропе нет. Такое впечатление, что это осталось в буфере рендера.
Как это побороть я пока не нашел. Пробовал менять методы очистки вротого дропа:

Код


var sel = document.getElementById('city');
while (sel.childNodes.length) {
    sel.removeChild(sel.firstChild);
}

Код


.innerHTML = '';

и прочие извращения - результат нулевой.
Проблема возникает сугубо при условии формирования второго селекта в скрытом блоке, если переписать
код таким образом, что бы оба дропа были видны сразу - проблема исчезает.

Обойти эту багу можно через перестановку обработчика с метода onchange первого дропа на case второго шага,
тогда формирование содержимого второго селекта пойдет уже в видимом блоке и Опера все отобразит корректно.
Но хотелось бы поизвращаться и решить проблему тем способом, что описан в коде. Может я упустил из виду
какую нить особенность Оперы? Есть идеи?

smartov

Дата 30.8.2007, 22:35 (ссылка)

(нет голосов)

Загрузка ...

свой собственный

Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 7
Всего: 259

dfire, привет.

Используй не display:none а visibility:hidden, тогда она будет рендерить элемент, хоть и не будет его показывать.
А с display:none она даже его не рендерит, видно в этом проблема.

То есть вот так у меня заработало и в опере

Код


<html>
<head>
<title>Opera BugFix</title>
<script language="javascript">
var regiondb = new Object()    
regiondb["africa"] = [{value:"1", text:"(africa) Каир"},
                      {value:"2", text:"(africa) Триполи"},
                      {value:"2", text:"(africa) Претория"}];
regiondb["asia"] = [{value:"1", text:"(asia) Банкок"},
                    {value:"2", text:"(asia) Дели"},
                    {value:"3", text:"(asia) Улан-Батор"},
                    {value:"4", text:"(asia) Джакарта"},
                    {value:"5", text:"(asia) Токио"}];
                    
function hideElement(id) {
    var element = document.getElementById(id);
    if (element == null)
        return;
    element.style.visibility = 'hidden';
    element.style.position = 'absolute';
}

function showElement(id) {
    var element = document.getElementById(id);
    if (element == null)
        return;
    element.style.visibility = '';
    element.style.position = '';
}

function showForm(formID) {
    switch (formID) {
        case 'step1':
            showElement("step1");
            hideElement("step2");
            break;
        case 'step2':
            showElement("step2");
            hideElement("step1");
            break;
    }
}
function setCities(chooser) {
    var cityChooser = chooser.form.elements["city"];
    cityChooser.options.length = 0;
    var choice = chooser.options[chooser.selectedIndex].value;
    var db = regiondb[choice];
    cityChooser.options[0] = new Option("Город: ", "", true, false);
    if (choice != "") {
        for (var i = 0; i < db.length; i++) {
            cityChooser.options[i + 1] = new Option(db[i].text, db[i].value);
        }
    }
}
</script>
</head>
<body>
<form name="dealers" action="">
  <div id="step1">
  <select name="continent" onChange="setCities(this)">
    <option value="" selected>Континент: </option>
    <option value="africa">Африка</option>
    <option value="asia">Азия</option>
  </select>
  <a href="javascript:void(0);" onClick="showForm('step2')">go step #2 >></a>
  </div>
  <div id="step2" style="visibility:hidden">
  <select name="city">
    <option value="" selected>Город: </option>
  </select>
  <a href="javascript:void(0);" onClick="showForm('step1')"><< go step #1</a>
  </div>
</form>
</body>
</html>

dfr

Дата 31.8.2007, 09:19 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 30.8.2007

Репутация: нет
Всего: нет

Спасибо за решение smile

display:none использовал в основном из-за библиотечки Prototype с ее .show() .hide()

smartov

Дата 31.8.2007, 11:35 (ссылка)

(нет голосов)

Загрузка ...

свой собственный

Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 7
Всего: 259

dfr, правильно, я тоже display:none в основном использую, но когда подобные глюки лезут visibility:hidden + position:absolute спасают.

Это сообщение отредактировал(а) smartov - 31.8.2007, 11:35

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »