Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > selected option не сохраняется при переносе ноды


Автор: Greendrake 9.12.2005, 15:50
Динамически двигаю вверх и вниз строчки с полями INPUT и SELECT. Значения INPUT сохраняются, а selected option - никак smile.

Пример тут http://psb.netka.ru/input3.html


Код
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>gluk</title>
    <meta http-equiv="Content-Language" content="ru">
    <script language="JavaScript" type="text/javascript">
      function doit()
      {
        var div=document.getElementById('coolDiv');
        var children=div.childNodes;
        var realChildren=new Array();
        var j=0;
        for (var i in children)
        {
          if (children[i].tagName=='DIV')
            {
              realChildren[j]=children[i];
              j++;
            };
        };
        div.appendChild(realChildren[0].cloneNode(true));
        div.removeChild(realChildren[0]);
      };
    </script>
  </head>
    <body>
    <div id="coolDiv">
      <div id="child1">
        <input type="text" />
        <select>
          <option></option>
          <option>1</option>
          <option>2</option>
        </select>
      </div>
      <div id="child2">
        <input type="text" />
        <select>
          <option></option>
          <option>1</option>
          <option>2</option>
        </select>
      </div>
    </div>
    <input type="button" value="Change"  onclick="doit()" />
  </body>
</html>


Кстати странное дело - если выбрать любую цифру в о втором селекте, то после первой рокировки она сохранится. С первым селектом - нифига.

Автор: GIK 9.12.2005, 16:39
Объясни зачем ты сравниваеш вот это
if (children[i].tagName=='DIV')
у тебя веть все потомки coolDiv есть DIVы
и вообще ставить точки с запятыми после блока необязательно smile
Код интересный для разбора. Нужно время smile

Добавлено @ 16:45
Да совсем забыл помоему в твоем коде не то что ты хочеш сделать.
Покрайней мере это видно из-за того что ты хочеш вставить div со всеми его потомками в конец списка coolDiv.

Автор: Greendrake 9.12.2005, 16:56
Цитата
Объясни зачем ты сравниваеш вот это
if (children[i].tagName=='DIV')
у тебя веть все потомки coolDiv есть DIVы

В том то и дело что в Мозилле среди потомков - много мусора кроме самих дивов.

Цитата
Да совсем забыл помоему в твоем коде не то что ты хочеш сделать.
Покрайней мере это видно из-за того что ты хочеш вставить div со всеми его потомками в конец списка coolDiv.

Я хочу просто менять местами строчки, а вставлять первую в конец, удаляя при этом её же в начале - один из способов.

Кстати я обошёл этот трабл - путём запоминания innerHTML перед удалением ноды, и вставкой запомненного в новую ноду на новом месте. При этом все selected сохраняются. Но это метод-заплатка, а по идее должно работать и так, но не хочет smile

Автор: GIK 9.12.2005, 17:18
Ну а если скопировать в переменную весь дочерний DIV со всеми потомками а затем вставить его
LastChildом или FirstChildом.
Щас проэсперементю smile

Автор: Greendrake 9.12.2005, 17:26
Блин, option selected через innerHTML сохраняется только в IE smile http://psb.netka.ru/input4.html

Код

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Ãëþê</title>
    <meta http-equiv="Content-Language" content="ru">
  </head>
    <body>
        <select onchange="alert(this.innerHTML)">
          <option></option>
          <option>1</option>
          <option>2</option>
        </select>
  </body>
</html>


Ваще не знаю шо делать. Это что-ж получается, динамически тусовать селекты с сохранением выбранного только в ИЕ мона? smile


Автор: GIK 9.12.2005, 18:18
Да..... И так тоже не хочет....
Видимо точто баг какой.
Код

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>gluk</title>
    <meta http-equiv="Content-Language" content="ru">
    <script language="JavaScript" type="text/javascript">
      function doit()
      {  var div=document.getElementById('coolDiv');
        var children=div.childNodes;       
       var v=children[0].cloneNode(true);
       var b=children[1].cloneNode(true);
                 for(var i=0; i<2; i++)
  { div.removeChild(children[0]);
  }    
    div.appendChild(b); 
    div.appendChild(v);  
     }
    </script>
  </head>
    <body>
    <div id="coolDiv">
      <div id="child1">
        <input type="text" >
        <select>
          <option></option>
          <option>1</option>
          <option>2</option>
        </select>
      </div>
      <div id="child2">
        <input type="text" >
        <select>
          <option></option>
          <option>1</option>
          <option>2</option>
        </select>
      </div>
    </div>
    <input type="button" value="Change"  onclick="doit()" />
  </body>
</html>

Автор: Sardar 10.12.2005, 14:05
Цитата(GIK @ 9.12.2005, 15:39)
и вообще ставить точки с запятыми после блока необязательно

Кстати полезно ставить их после любого конечного выражения (statement), повышает читабельность ИМXО, да и потом можно регами удалить на лету все пробелы против любопытных глаз smile

Если нужно просто обменять ноды как ты делал, то проще так:
Код
function doit() {
        var div=document.getElementById('coolDiv');
        var divs=div.getElementsByTagName('div'); //поиск многослойный так что многоуровневые вложения div'ов не делай, либо ставь свою выборку
        //у нас только два дива, грязный стиль, не проверяю =)
        div.insertBefore(divs[0], null);
      };

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

Автор: GIK 10.12.2005, 14:55
Ни фига себе smile
Всего одна строка которая все меняет. Браво......
Вот только логику не вкурю.
Вставка нового узла divs[0] перед существующим null
ЭТО КАК???????????

Автор: Sardar 10.12.2005, 15:11
Цитата(GIK @ 10.12.2005, 13:55)
Вставка нового узла divs[0] перед существующим null

insertBefore вставляет ноду перед уже существующей заданой нодой, если передали null, то вставим в конец списка нод. И как уже говорил если нода существовала ранее, то она удаляеться из старого места и переноситься в нужное. И того строчка означает: взять первый div и вставить его в конец списка smile Так прокручиваем все слои подряд по одному.

Автор: GIK 10.12.2005, 15:26
Понял smile

Автор: Greendrake 10.12.2005, 22:15
Цитата(Sardar @ 10.12.2005, 14:05)
div.insertBefore(divs[0], null);

Оооо.... спассибиссимооо smile selected options сохраняются везде!!!
Видать, cloneNode всё-таки криво реализован во всём кроме ИЕ.

Автор: Greendrake 9.5.2006, 05:14
Дубль два - думал начать новую тему, но всё же решил что это сюда, т. к. природа вопроса одна и та же.

Пациент:

Код
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Fuck</title>
    <script type="text/javascript" language="JavaScript">
      function doIt(){
        var trs = document.getElementsByTagName('TR');
        trs[0].parentNode.insertBefore(trs[0],null);
      };
    </script>
  </head>
  <body>
    <table>
      <tbody>
        <tr><td><input type="checkbox"></td></tr>
        <tr><td><input type="checkbox"></td></tr>
      </tbody>
    </table>
    <input type="button" onclick="doIt()" value="switch">
  </body>
</html>


Симптомы:
Если отметить верхний чекбокс и нажать кнопку, при перемене чекбоксов местами отметка не сохраняется в IE.

Предположительный диагноз:
Глюк IE.

Какие будут мнения у уважаемых коллег? 

Автор: Sardar 9.5.2006, 10:41
Видать какие то внутренние механизмы заставляют создать чекбокс по новой, состояние старого теряеться. И такоке ощущение что это не обойти...
Решение "в наглую" сохранять состояния чекбоксов в битовом массиве. На встречу: а где это понадобилось? 

Автор: Greendrake 9.5.2006, 14:08
Цитата(Sardar @ 9.5.2006,  10:41)
Решение "в наглую" сохранять состояния чекбоксов в битовом массиве. На встречу: а где это понадобилось?

Мда.. видать пока так и придётся.

Понадобилось это в одной навороченной форме, где менеджеры обрабатывают запросы клиентов. Строками в таблице идёт перечень товаров, по ним нужно проставлять разные данные, в том числе в чекбоксах. И нужно чтобы можно было менять порядок товаров в таблице - двигать вверх-вниз... 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)