AJAX удаление элемента и вставка нового

@xander61 · Регистрация: 22.07.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте уважаемые !

Столкнулся с такой проблемой. Есть JS скрипт таймера, который выводится в блоке.
В блоке div несколько форм, после отправки первой формы из блока, блок обновляется и появляется таймер.

Так вывожу таймер в div блоке, помимо таймера в блоке выводится еще куча инфы:

PHP
1
echo "<br><span class='text_gr' id='".$p2."'></span><script type='text/javascript'>timer_pole($p1,$p2,$p3)</script>";

Обработчик 1-й формы, та часть которая отвечает за обновление блока и вывод таймера.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
Код......
            success: (function() {  
                return function(data) {
                    if (data.status === 'success') {
                        $("#loadA_" + data.id).load("#div #loadB_" + data.id); // Обновление блока
                        $("#pole_" + data.id).after(function (){    // Вставляем в блок таймер                  
                            return '<span style="display: none" id="' + data.id + '"></span><script type="text/javascript">timer_pole(' + data.timer + ',' + data.id + ',' + data.id + ');<\/script>';
                        });
                    }
 
Тут остальной код.....

Здесь все работает.

Проблема возникает после отправки следующей формы

Обработчик второй формы

JavaScript
1
2
3
4
5
6
7
8
9
10
11
код....
 success: (function() {
                return function(data) {
                    if (data.status === 'success') {
                        $("#loadA_" + data.id).load("#div #loadB_" + data.id); // Обновление блока
                        $("#" + data.id).remove(); // удаляем предыдущий элемент с таймером    
                        $("#pole_" + data.id).after(function (){    // Обновление таймера                      
                            return '<span style="display: none" id="' + data.id + '"></span><script type="text/javascript">timer_pole(' + data.timer + ',' + data.id + ',' + data.id + ');<\/script>';
                        });
                    }
Тут остальной код.....

Старый таймер почему то не удаляется и в итоге оба таймера вставляются в одно и то же место и вообщем они накладываются друг на друга и мерцают по очереди. Как полностью удалять старый таймер и выводить только новый. Убирать строку $("#loadA_" + data.id).load("#div #loadB_" + data.id); никак нельзя так как нужно обязательно обновлять блок div.

Добавлено через 16 часов 20 минут
Нашел в чем проблема, но не знаю как исправить правильно. На странице создается 2 таймера с одинаковым id из-за чего функция remove() не срабатывает, пробовал удалять не по id а по классу элемента span, но с моими корявыми руками не получается. То работает как надо то не работает.

@whiteapps · 19.11.2014, 10:00

xander61,
а тут вы точно получаете data со старым id? т.е. с тем который нужно удалить?

JavaScript
1
$("#" + data.id).remove(); // удаляем предыдущий элемент с таймером

@xander61 · 19.11.2014, 11:57 **[ТС]**

Да, точно. В том то и дело что ID и у старого таймера и у нового одинаковый. Получается так что одновременно два таймера выводится с одинаковым ID.

@whiteapps · 19.11.2014, 12:06

xander61,
попробуйте тут воспроизвести баг, а то по представленному коду не очень ясно
http://jsfiddle.net/

@xander61 · 20.11.2014, 01:37 **[ТС]**

Уубрал в span`ах - style="display: none" и у видел что на страницу выводятся 2 таймера с одинаковым ID. Получается так что после отправки и обновления первой формы выводится один таймер, после отправки второй формы старый не удаляетcя и сверху выводится еще один таймер с таким же id. Если меняю на удаление по классу элемента $(".timer_" + data.id).remove(); соответственно добавляю такой же класс ко всем span в которых выводится таймер, то старый таймер удаляется, но все равно работает не корректно, то выводит как нужно, то снова накладывает таймеры друг на друга. http://jsfiddle.net/ - щас сделаю там.

Добавлено через 13 часов 27 минут
Вообщем прочитав кучу документации по jQuery переделал скрипт используя для обновления и добаления информации - append, и работать стал куда быстрее. Такой вопрос если передавать много данных обработчику в success, это нормально, нагрузку на сервер давать не будет?

Пример передачи:

PHP
1
echo json_encode(array(... Тут передаю около 10 разных параметров ....));

@whiteapps · 20.11.2014, 09:20

xander61, 10 параметров - это совсем не страшно
тем более если у вас нет по 100 запросов в минуту

а вообще в идеале следует проводить нагрузочные тесты

Новые блоги и статьи Все статьи Все блоги /
Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определенном условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .

@xander61 0 / 0 / 0 Регистрация: 22.07.2013 Сообщений: 22
	19.11.2014, 11:57 [ТС]
	Да, точно. В том то и дело что ID и у старого таймера и у нового одинаковый. Получается так что одновременно два таймера выводится с одинаковым ID. 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	19.11.2014, 12:06
	xander61, попробуйте тут воспроизвести баг, а то по представленному коду не очень ясно http://jsfiddle.net/ 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	20.11.2014, 09:20
	xander61, 10 параметров - это совсем не страшно тем более если у вас нет по 100 запросов в минуту а вообще в идеале следует проводить нагрузочные тесты 1