VPF::onchange для клонированных объектов

weaverl

Дата 23.4.2011, 18:46 (ссылка)

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

Загрузка ...

Новичок

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

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

Помогите пожалуйста разобраться. На форме два select. При изменениии первого, меняется второй. Все работает, пока методом cloneNode я не создаю два таких же. onchange не срабатывает ни на один. Как сделать, чтобы хотябы изменеие работало для изначальных двух select'ов?
так выглядит форма:

Код


<body id = "body1">
<form id="form1" name="form1" method="post" action="" >
<div id="0">
   <table width="310" border="0">
     <tr>
       <td width="133">Наименование</td>
       <td width="167"><label>
<select name="select1" style="width:164px" id = "select1"  class="select_element"  onChange="MkSizeValues(this.selectedIndex)">
         <option value="0.06" >БРУС</option>
                <option value="0.09">БРУСОК</option>
                <option value="0.135">ДОСКА</option>
         </select>
       </label></td>
     </tr>
     <tr>
       <td>Размер, мм </td>
       <td><label>
         <select name="select2" style="width:164px" class="select_element2">
         </select>
       </label></td>
     </tr>
     <tr>
       <td>Объем\Кол-во</td>
       <td><label>
         <input type="text" id = "value" name="textfield" style="width:75px"/>
         <select name="select3" style="width:65px">
         <option >шт.</option>
         <option >м куб.</option>
         </select>
       </label></td>
     </tr>
   </table>
   <p style="height:5px"></p>
</div>
 
 <p>
   <label>
   <input type="button" name="Button" value="Button"  onclick = "addElement();"/>
   </label>
   <label>
   <input type="button" name="Submit2" value="Submit" onclick = "AddRezult();"/>
   </label>
   <label></label>
   <label>
   <input type="text" name="textfield2" id = "val2"/>
   </label>
 </p>
</form>
</body>

Функция копирования:

Код


var my_div = null;
var newDiv = null;
var newp = null;
var i = 1;

function addElement() {


  my_div = document.getElementById("0");
  newDiv = document.createElement("div");
  newDiv.id = i;
  var elem = document.getElementById("form1");
  
  elem.insertBefore(newDiv, my_div.nextSibling);
  //elem.insertBefore(newDiv, my_div);
  
  var selectCont = newDiv;
  var select = my_div;
  
  var newSelect = select.cloneNode(true);
  selectCont.appendChild(newSelect);
  
 
  my_div = newDiv;
    i++;
}

Функции для заполнения select

Код


var aSizeValues = new Array(
"100x100x6000, 100x150x6000, 150x150x6000, 100x200x6000, 150x200x6000, 200x200x6000",
"50x50x6000",
"25x100x6000, 25x150x6000, 25x200x6000, 30x100x6000, 30x150x6000, 30x200x6000, 40x100x6000, 40x150x6000, 40x200x6000, 50x100x6000, 50x200x6000"
);

function getSizeValuesByName(index){
    var sSizeValues = aSizeValues[index]; 
    return sSizeValues.split(","); // преобразуем строку в массив размеров
}

// главная ф-ция, выводящая динамически список 
function MkSizeValues(index){
    var aCurrSizeValues = getSizeValuesByName(index);
    var nCurrSizeValuesCnt = aCurrSizeValues.length;
    var oSizeList = document.forms["form1"].elements["select2"];
    var oSizeListOptionsCnt = oSizeList.options.length;
    oSizeList.length = 0; 
    for (i = 0; i < nCurrSizeValuesCnt; i++){
         if (document.createElement){
            var newSizeListOption = document.createElement("OPTION");
            newSizeListOption.text = aCurrSizeValues[i];
            newSizeListOption.value = aCurrSizeValues[i];
            // тут мы используем для добавления элемента либо метод IE, либо DOM, которые, alas, не совпадают по параметрам…
           // (oSizeList.options.add) ? oSizeList.options.add(newSizeListOption) : oSizeList.add(newSizeListOption, null);
            oSizeList.options[i] = new Option(aCurrSizeValues[i], aCurrSizeValues[i], false, false);
        }else{
            // для NN3.x-4.x
            oSizeList.options[i] = new Option(aCurrSizeValues[i], aCurrSizeValues[i], false, false);
        }
    }
}

ksnk

Дата 23.4.2011, 19:45 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Ну, дык! При клонировании не копируются события. Нужно их вручную потом вставлять.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

weaverl

Дата 23.4.2011, 19:48 (ссылка)

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

Загрузка ...

Новичок

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

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

А почему событие для изначальных перестает работать? И вручную как их вызвать?

Это сообщение отредактировал(а) weaverl - 23.4.2011, 19:49

ksnk

Дата 23.4.2011, 22:24 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

если посмотреть на процедуру копирования - получится, что сначала вставляется див с идентификатором i++, а затем в него вставляется копия div'а с ID='0'. То есть, после копирования получится уже два ID=0. Это, видимо, можно легко увидеть файрбагом.
Ну и , соответственно, перестают срабатывать функции вычисления чего-то там, которые ищут именно этот ID/

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

weaverl

Дата 24.4.2011, 09:45 (ссылка)

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

Загрузка ...

Новичок

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

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

Спасибо за помощь! Значит придется по-другому создавать новые объекты.

Котокобра

Дата 24.4.2011, 12:34 (ссылка)

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

Загрузка ...

Шустрый

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

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

Цитата(ksnk @ 23.4.2011, 19:45

)

При клонировании не копируются события.

проверил. клонирует

Код


<script>
function MkClone(){
    var formObject = document.getElementsByTagName('form')[0];
    var lastObjectIndex = formObject.getElementsByTagName('input').length;
    var lastObject = document.getElementById("r" + (lastObjectIndex-1));
    var newObject = formObject.insertBefore(lastObject.cloneNode(true), lastObject);
    newObject.id = "r" + lastObjectIndex;
}
</script>



<form>
    <input type="radio" id="r0" onClick="MkClone()" /><label for="r1">radio 1</label>

</form>

weaverl, сорри, что сейчас не вникаю в твой код, опаздваю...

Котокобра

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

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

Загрузка ...

Шустрый

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

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

в общем, я думаю, надо предложенный автором кусок кода переписать заново, т.е. сначала реализовать клонирование, потом заполнение select'оров, потом все остальное. да и вообще код почистить...

ksnk

Дата 25.4.2011, 00:14 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Цитата(Котокобра @ 24.4.2011, 12:34

)

проверил. клонирует

ну да. Если события установлены на onXX свойства тега, то клонирует. Я спутал с динамически установленными событиями :(

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Котокобра

Дата 25.4.2011, 00:29 (ссылка)

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

Загрузка ...

Шустрый

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

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

ksnk, код надо было смотреть, а не только по текст отвечать smile

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