VPF::Генерация событий для блоков ч/з JavaScript/DOM

Ashen

Дата 1.9.2006, 09:15 (ссылка)

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

Загрузка ...

Шустрый

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

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

Проблема выглядит так - имеется самописный javascript-класс, который изображает на странице два списка с кнопками переупорядочивания элементов и переброски элементов из одного списка в другой.
Класс создается скриптом при загрузке страницы и методом document.write() рисует нужные элементы (которые берутся из массива).
С переупорядочиванием элементов никаких проблем нет - через DOM перебираем эелементы и переименовываем дочерний textNode (элементы списка хранятся в двух массивах-членах класса).
А вот при переброске приходится удалять все элементы списка и генерить их заново через тот же DOM. Все перфектно генерится только в Мозилле, но события не работают - пишет document.getElementById("list_item_1_"+this.name+i) has no properties.
В IE вообще не хочет - пишет "член группы не найден". Пробовал просто генерить события на элементах попроще - в Мозилле вроде работает, а IE вообще игнорит (как будто нету никаких событий).
Что делать???
Вот исходники генерации элемента списка на который и вешаютсф вышеупомянутые события:

Код


function jslTPRebuildList()
{
    // обновление левого списка
        // очистка левого списка
        var left_part=document.getElementById('jsl_1_'+this.name);
        while(left_part.firstChild)
        {
            var tmp=left_part.firstChild;
            left_part.removeChild(tmp);
        }
        // генерация списка вновь
        for(i=0;i<this.count1;i++)
        {
         var newListItem=document.createElement('div');             // создаем div
            var newText=document.createTextNode(this.items1[i]);       // создаем к нему текст
            var newAttr1=document.createAttribute('class');            // создаем атрибут (имя класса)
            newAttr1.value='list_item';                                // аттачим к нему значение
            var newAttr2=document.createAttribute('onclick');          // создаем атрибут (событие)
            newAttr2.value=this.name+'.jslTPSetActive('+(i+1)+',1)';   // аттачим к нему функцию
            var newAttr3=document.createAttribute('id');               // создаем атрибут (идешник)
            newAttr3.value='list_item_1_'+this.name+(i+1);             // аттачим к нему значение
            var newAttr4=document.createAttribute('oncontextmenu');    // создаем атрибут (событие)
            newAttr4.value=this.name+'.jslTPSetActive('+(i+1)+',1);popup(\'popup_'+this.type+'\');return false;'; // аттачим к нему функцию

            var newIcon=document.createElement('div');                   // див с конками
            var newAttr5=document.createAttribute('class');
            newAttr5.value='item_id_icon';
            var newAttr6=document.createAttribute('style');
            newAttr6.value='background:transparent no-repeat center url(i/'+this.icon+')';

            newIcon.setAttributeNode(newAttr5);                        // аттачим к элементу атрибут (имя класса)
            newIcon.setAttributeNode(newAttr6);                         // аттачим к элементу атрибут (доп. стиль)

            //alert("alksdjfh");
            newListItem.appendChild(newIcon);                            // аттачим к элементу списка иконку

            newListItem.appendChild(newText);                           // аттачим к элементу списка текст

            newListItem.setAttributeNode(newAttr1);
            newListItem.setAttributeNode(newAttr2);
            newListItem.setAttributeNode(newAttr3);
            newListItem.setAttributeNode(newAttr4);

            left_part.appendChild(newListItem);                         // аттачим элемент списка к род. диву

        }
}

хелп плиз срочно smile

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

Хочешь помочь новичку - делай вместе с ним;Хочешь помочь старику - сделай за него;Хочешь помочь мастеру - отойди в сторону;Хочешь помочь дураку - сам дурак...

skyboy

Дата 1.9.2006, 09:33 (ссылка)

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

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

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

и как это отлаживать? надо сначала создать html-файл, как у тебя? а откель - то знать, как он выглядит? можешь точнее описать, какие события не работают или скинуть "урезанный" вариант связки JS+HTML?

Ashen

Дата 1.9.2006, 09:54 (ссылка)

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

Загрузка ...

Шустрый

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

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

отослал архив с исходниками на мыло smile

Это сообщение отредактировал(а) Ashen - 1.9.2006, 10:03

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

skyboy

Дата 1.9.2006, 11:32 (ссылка)

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

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

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

хех. под "скинуть" я имел в виду "на форум". Мне есть чем на работе заняться - глянуть на 8-10 строк кода на странице форума - это одно, а копаться во внутренностях чужого механизма - это другое. Работодатели не оценят smile

Давай, бросай сюда. Если сможешь обрезать до размера в 8-10 строк, чтоб проблема сохранилась - будет только лучше, быстрее решится.

Ashen

Дата 1.9.2006, 11:38 (ссылка)

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

Загрузка ...

Шустрый

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

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

М-м-м-м-м....

Код


<html>
<head><title>укороченная версия...</title><head>
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style2.css">
<body>

<script language="javascript">
    var sections1=new Array();
    sections1[0]="1 - Главная";
    sections1[1]="2 - О компании";
    sections1[2]="3 - Клиенты";
    sections1[3]="4 - Портфолио";
    sections1[4]="5 - Галерея";
    sections1[5]="6 - Форум";
    sections1[6]="7 - Контакты";
    var sections2=new Array();
    sections2[0]="1 - Приаттаченая статья";
    sections2[1]="2 - Приаттаченая статья";
    lstSections=new jsTPList(sections1,sections2,"lstSections","article");
</script>
</body>
</html>

javascript

Код


function jslTPRebuildList()
{
    // обновление левого списка
        // очистка левого списка
        var left_part=document.getElementById('jsl_1_'+this.name);
        while(left_part.firstChild)
        {
            var tmp=left_part.firstChild;
            left_part.removeChild(tmp);
        }
        // генерация списка вновь
        for(i=0;i<this.count1;i++)      // !!!! КОД ГЕНЕРИРУЕТ КОРРЕКТНО, НО НЕРАБОТАЕТ
        {
         var newListItem=document.createElement('div');             // создаем div
            var newText=document.createTextNode(this.items1[i]);       // создаем к нему текст
            var newAttr1=document.createAttribute('class');            // создаем атрибут (имя класса)
            newAttr1.value='list_item';                                // аттачим к нему значение
            var newAttr2=document.createAttribute('onclick');          // создаем атрибут (событие)
            newAttr2.value=this.name+'.jslTPSetActive('+(i+1)+',1)';   // аттачим к нему функцию
            var newAttr3=document.createAttribute('id');               // создаем атрибут (идешник)
            newAttr3.value='list_item_1_'+this.name+(i+1);             // аттачим к нему значение
            var newAttr4=document.createAttribute('oncontextmenu');    // создаем атрибут (событие)
            newAttr4.value=this.name+'.jslTPSetActive('+(i+1)+',1);popup(\'popup_'+this.type+'\');return false;'; // аттачим к нему функцию

            var newIcon=document.createElement('div');                   // див с конками
            var newAttr5=document.createAttribute('class');
            newAttr5.value='item_id_icon';
            var newAttr6=document.createAttribute('style');
            newAttr6.value='background:transparent no-repeat center url(i/'+this.icon+')';

            newIcon.setAttributeNode(newAttr5);                        // аттачим к элементу атрибут (имя класса)
            newIcon.setAttributeNode(newAttr6);                         // аттачим к элементу атрибут (доп. стиль)

            //alert("alksdjfh");
            newListItem.appendChild(newIcon);                            // аттачим к элементу списка иконку

            newListItem.appendChild(newText);                           // аттачим к элементу списка текст

            newListItem.setAttributeNode(newAttr1);
            newListItem.setAttributeNode(newAttr2);
            newListItem.setAttributeNode(newAttr3);
            newListItem.setAttributeNode(newAttr4);

            left_part.appendChild(newListItem);                         // аттачим элемент списка к род. диву

        }
}

сходу все равно не разобраться smile

- в сумме исходники всей радости занимают около 1500 строк

Это сообщение отредактировал(а) Ashen - 1.9.2006, 11:40

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

skyboy

Дата 1.9.2006, 12:20 (ссылка)

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

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

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

блин! как я сразу проморгал-то? неверно ты привязываешь обработчики на события! они - не аттрибуты. нельзя их устанавливать при помощи setAttribute! вот тебе темы по теме:
http://forum.vingrad.ru/index.php?showtopic=32350#
там в нижней части поста Sardar'a описано, как работать с разными системами событий.
ещё "живых примеров" на форуме хватает: ищи по attachEvent и addEventListener ;)
а вот и мануал:
под FireFox/Mozilla
под IE

Ashen

Дата 1.9.2006, 12:38 (ссылка)

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

Загрузка ...

Шустрый

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

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

Спасибо !!!

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

Avb

Дата 1.9.2006, 12:39 (ссылка)

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

Загрузка ...

Шустрый

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

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

Ashen, маловато кода.
Вот сразу ошибка jsTPList is not defined.
Этого класса в javascript-е у тебя нет. Выкладывай по-больше, а лучше все.

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