23.09.2010, 15:07
|
Новичок на форуме
|
|
Регистрация: 23.09.2010
Сообщений: 7
|
|
проблема со свойством name при использовании appendChild()
Здравствуйте. Проблема следующая.
//возвращает элемент select с заданными параметрами
function getSlc(slcParam){
//alert('sel1');
//var selParam = {sId:'id',sName:'name',sItems:[]};
var slc = document.createElement('SELECT');
slc.id = slcParam.sId;
slc.name = slcParam.sName;
slc.setAttribute('NAME',slcParam.sName); //в IE работает а так slc.name = 'name' нет...
if(slcParam.sFunct != undefined){
var slcMethod = slcParam.sFunct.sMethod;
var usrHandler = slcParam.sFunct.sHandler;
var usrHandlerArg = slcParam.sFunct.sHandlerArg;
//alert(usrHandler+'('+usrHandlerArg+')');
slc.onchange = usrHandler+'('+usrHandlerArg+')'; //грамотно вот так (function() {func(arg);}); #@$%#$%!!!! TODO но не работает! почему!!!?
//slc.setAttribute(slcMethod,usrHandler);
}
var len = slcParam.sItems.length;
var defaultItems = 0; var defaultItemsFlag = false;
var selectedItems = 0; var selectedItemsFlag = false;
//цикл по основному списку-источнику полей
for(var i=0; i<len; i+=1){
if ( i == defaultItems) { defaultItemsFlag = true; }else{ defaultItemsFlag = false; } //опция, которая выделена
if ( i == selectedItems) { selectedItemsFlag = true; }else{ selectedItemsFlag = false; } //опция, которая будет выделена при сбросе формы
var opt = new Option(slcParam.sItems[i],i,defaultItemsFlag,selectedItemsFlag); //var newOpt = new Option("text", "value", isDefaultSelected, isSelected);
slc.options[i] = opt;
}
//alert('slc name: '+slc.name);
return slc;
}
//возвращает строку опций для поля фильтра
function getFFOptionsRow(table,i,field2R){
var tablePreffiks = 'FF';
var newRow = table.insertRow(-1); //добавляем строку в созданной таблице
newRow.className = 'tableData';
newRow.id = tablePreffiks+'tableData_'+field2R.key[i];
//имя поля
var newCell = newRow.insertCell(-1); //в созданной строке добавляем столбец
newCell.align = 'right'; //указываем позиционирование по центру
newCell.innerHTML = ' '+field2R.val[i]+' ';
//тип фильтра
var newCell = newRow.insertCell(-1); //в созданной строке добавляем столбец
newCell.align = 'center'; //указываем позиционирование по центру
var slcParam = {
sId : 'field_'+field2R.key[i]+'_filter_type_slc',
sName : 'field_'+field2R.key[i]+'_filter_type',
sItems : globalArrayOfFilterTypes
};
var slc = getSlc(slcParam);
alert('slc name: '+slc.name);
var buf = document.createElement('SELECT'); //опять работа ушами... ну не хочет appendChild добавлять элемент нормально - событие почему-то записано нормально с функцией, а не срабатывает (при повторном добавлениии новых строк в уже существующую таблицу)
buf.appendChild(slc);
alert('buf: '+buf.innerHTML);
newCell.innerHTML = buf.innerHTML;
//newCell.appendChild(slc);
}
При добавлении элемента select (slc) свойство name, устанавливаемое в getSlc(slcParam) куда-то пропадает. Статьи про различия свойств и аттрибутов прочитал и различия вроде понял. Но почему через slc.setAttribute('name',slcParam.sName); работает, а через свойство name - нет. Да, все это безобразие проверяется под IE8.
Последний раз редактировалось мшеул, 23.09.2010 в 15:11.
|
|
23.09.2010, 15:29
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
slc.onchange = function () {
usrHandler(usrHandlerArg);
};
|
|
23.09.2010, 15:31
|
Новичок на форуме
|
|
Регистрация: 23.09.2010
Сообщений: 7
|
|
Да, как показала проверка, в 'Лисе' все работает как надо... Мда. Надеюсь, что кто-нибудь кроме автора сюда се же заглянет
|
|
23.09.2010, 15:35
|
Новичок на форуме
|
|
Регистрация: 23.09.2010
Сообщений: 7
|
|
Сообщение от Octane
|
slc.onchange = function () {
usrHandler(usrHandlerArg);
};
|
Склеивание скобок было необходимо, чтобы функция не вызывалась при добавлении обработчика onchange а сохранилась как строка (кажется так). По предложенному варианту - спасибо, так, конечно, грамотнее, но проблема не в этом. (Хотя это не работало, если созданный элемент slc просто добавлять через appendChild() - отсюда пришлось использовать buf).
Последний раз редактировалось мшеул, 23.09.2010 в 15:39.
|
|
23.09.2010, 15:49
|
Новичок на форуме
|
|
Регистрация: 23.09.2010
Сообщений: 7
|
|
var slc = getSlc(slcParam);
alert('slc name: '+slc.name);
var buf = document.createElement('DIV'); //опять работа ушами... ну не хочет appendChild добавлять элемент нормально - событие почему-то записано нормально с функцией, а не срабатывает (при повторном добавлениии новых строк в уже существующую таблицу)
buf.appendChild(slc);
alert('buf: '+buf.innerHTML);
Проблема в том, что в первом алерте свойство было, а во втором - уже нет. Форумчане, которые понимают в предмете - просьба помочь.
|
|
27.09.2010, 11:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
function getSlc не проверок на наличие параметра при его добавлении кроме как if(slcParam.sFunct != undefined)
ещё мелочь )))
newCell.innerHTML = ' '+field2R.val[i]+' ';
надо
newCell.innerHTML = ' '+field2R.val[i]+' ';
и вариант может чем поможет )))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table id="tb" border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<script language="JavaScript" type="text/javascript">
function getSlc(c) {
var b = document.createElement("SELECT");
if(c.id)b.id = c.id;
if(c.name)b.name = c.name;
if(c.options){for (var d = c.options.length, a = 0; a < d; a++) {
b.options.length = a + 1;
b.options[a].text = c.options[a][0];
b.options[a].value = c.options[a][1];
if (c.options[a][2]) b.options[a].isDefaultSelected = true;
if (c.options[a][3]) b.options[a].selected = true
}};
if (c.onchange&&typeof c.onchange == "function") b.onchange = c.onchange;
return b
};
//var slcParam ={id:'h3',name:'h3',options:[["Строка 1", 1],["Строка 2", 2],["Строка 3", 3,1,1]],onchange:function (){alert(this.value);}}
//document.body.appendChild(getSlc(slcParam))
function getFFOptionsRow(table,i,field2R){
var tablePreffiks = 'FF';
var newRow = table.insertRow(-1); //добавляем строку в созданной таблице
newRow.className = 'tableData';
newRow.id = tablePreffiks+'tableData_'+field2R.key[i];
//имя поля
var newCell = newRow.insertCell(-1); //в созданной строке добавляем столбец
newCell.align = 'right'; //указываем позиционирование по центру
newCell.innerHTML = ' '+field2R.val[i]+' ';
//тип фильтра
var newCell = newRow.insertCell(-1); //в созданной строке добавляем столбец
newCell.align = 'center'; //указываем позиционирование по центру
var slcParam = {
id : 'field_'+field2R.key[i]+'_filter_type_slc',
name : 'field_'+field2R.key[i]+'_filter_type',
onchange : function (){alert(this.name);},
options:[["Строка 1", 1],["Строка 2", 2],["Строка 3", 3,1,1]]
};
var slc = getSlc(slcParam);
newCell.appendChild(slc);
}
var t= document.getElementById('tb');
var field2R={key:[1,2,3],val:[4,5,6]};
getFFOptionsRow(t,1,field2R)
</script>
</body>
</html>
|
|
28.09.2010, 07:49
|
Новичок на форуме
|
|
Регистрация: 23.09.2010
Сообщений: 7
|
|
Сообщение от рони
|
и вариант может чем поможет )))
|
Спасибо за ответ и замечания. Уж и не надеялся, что к.-нибудь ответит. Попробую переписать код. По результатам отпишусь.
|
|
28.09.2010, 09:50
|
Новичок на форуме
|
|
Регистрация: 23.09.2010
Сообщений: 7
|
|
проблема по-тихоньку решается
Как показали эксперименты проблема была в другом месте (как всегда в таких случаях).
//добавляет строку опций для полей фильтра, отчета, вычислений, объединенных вычислений
function appendFOptionsRow(destinationElementId,field2R){
switch(destinationElementId){
case 'result_field4filter_slc':
var getOptionsTableHeader = getFFOptionsTableHeader;
var getOptionsRow = getFFOptionsRow;
var refreshOptions = checked_values;
var refreshOptionsArg = 'get_filter_button_id';
var inDiv = 'result_field4filter_type_div';
break;
case 'result_field4report_slc':
var getOptionsTableHeader = getRFOptionsTableHeader;
var getOptionsRow = getRFOptionsRow;
var refreshOptions = refresh_option4r_field;
var refreshOptionsArg = '';
var inDiv = 'result_field4report_sort_div';
break;
case 'result_field4calc_slc':
var getOptionsTableHeader = getCFOptionsTableHeader;
var getOptionsRow = getCFOptionsRow;
var refreshOptions = '' ;
var refreshOptionsArg = '';
var inDiv = 'result_field4calc_type_div';
break;
case 'result_field4union_slc':
var getOptionsTableHeader = getUFOptionsTableHeader;
var getOptionsRow = getUFOptionsRow;
var refreshOptions = refreshUnionOption; //для соответствующих функций "включим" список разделителей
var refreshOptionsArg = '';
var inDiv = 'result_field4v_union_type_div';
break;
default:
return;
}
var len = field2R.key.length;
var buf = document.createElement("DIV");
//ШАПКА или указатель на таблицу
var r4table = getOptionsTableHeader(field2R);
var mode = r4table[0];
var table = r4table[1];
if ( len != 0 ) {
for(var i=0; i<len; i+=1){
//вставляем в i строку таблицы table значения из массива field2R
//alert ('строка: '+i+' key: '+field2R.key[i]+' val: '+field2R.val[i])
getOptionsRow(table,i,field2R);
}
}else{
return;
}
if ( mode == 'create' ) {
buf.appendChild(table);
document.getElementById(inDiv).innerHTML = buf.innerHTML;
}
if(refreshOptions != ''){
refreshOptions(refreshOptionsArg); //обновим видимость опций полей в зависимости от типа КО
}
}
Просьба не пинать за представленный код, а предложить пути по улучшению(если есть желание и смотреть на него без слез не можете ).
Проблема была в том что, при добавлении в таблицу первой строки функцией getOptionsRow(table,i,field2R); таблица создавалась только одновременно с ней, висела в памяти, но на форму не добавлялась. Первая же строка с селектами добавлялась в table-объект в памяти (table=createElement('table')), но не объект на документе document.getElementById('ид таблицы'). Только после добавления первой строки таблица добавлялась на страницу. Строка появлялась, но функции и свойство name не включались в объект select (id почему-то появлялось). Последующие же строки уже добавлялись в table=document.getElementById('ид таблицы'). Понимаю, объяснять я мастер , но как умею... Спасибо все, кто откликнулся. Надеюсь кому-то этот топик поможет избежать таких же ошибок. После выложу исправленную версию.
|
|
28.09.2010, 14:25
|
Новичок на форуме
|
|
Регистрация: 23.09.2010
Сообщений: 7
|
|
Смех сквозь слезы... Все вышеуказанное почти заработало. Но... под Лисой. Под Осликом slcParam.name='имя селекта' не хочет работать. Но почему-то работает так slcParam['NAME']='имя селекта'. Селект возвращается функцией getSlc()... Будем разбираться...
|
|
|
|