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

[xander61]

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

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

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

PHP код:

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


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

PHP код:

Код......
            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>';
                        });
                    }
 
Тут остальной код..... 


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

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

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

PHP код:

код....
 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.

[Naive]

Дак ты код таймера покажи чтоли

[xander61]

Сообщение от Naive

Дак ты код таймера покажи чтоли

Код таймера:

PHP код:

<script>
function timer_pole(c,DivId,id){
            var timerdiv = document.getElementById(DivId);
            if (timerdiv == null) {
                clearTimeout(this); return;
            }
            if(c<0) c=0;
            Seconds = c;
            Hours = Math.floor(Seconds / 3600);
            Seconds -= Hours * (3600);
            if(Hours < 10) {Hours = "0" + Hours}
            
            Minutes = Math.floor(Seconds / 60);
            Seconds -= Minutes * (60);
            if(Minutes < 10) {Minutes = "0" + Minutes}
            
            Seconds = Math.floor (Seconds);
            if(Seconds < 10) {Seconds = "0" + Seconds}

            timerdiv.innerHTML = Hours + ":" + Minutes + ":" + Seconds;

            if(c<=0) {
                clearTimeout(this);    
                $("#loadA_" + id).load("#div #loadB_" + id);
            }else{        
                c-=1;
                setTimeout(function(){timer_pole(c,DivId,id)},1000);
            }
        
        }
</script> 


[xander61]

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

[mv28jam]

Именуйте таймеры.
clearTimeout() принимает на вход идентификатор, возвращенный setTimeout, а не объект.

var refreshIntervalId = setTimeout(fname, 10000);

/* later */
clearTimeout(refreshIntervalId);

[xander61]

Сообщение от mv28jam

Именуйте таймеры.
clearTimeout() принимает на вход идентификатор, возвращенный setTimeout, а не объект.

var refreshIntervalId = setTimeout(fname, 10000);

/* later */
clearTimeout(refreshIntervalId);

Напишите пожалуйста подробнее как это сделать на моем примере.

<script> 
function timer_pole(c,DivId,id){ 
            var timerdiv = document.getElementById(DivId); 
            if (timerdiv == null) { 
                clearTimeout(this); return; 
            } 
            if(c<0) c=0; 
            Seconds = c; 
            Hours = Math.floor(Seconds / 3600); 
            Seconds -= Hours * (3600); 
            if(Hours < 10) {Hours = "0" + Hours} 
             
            Minutes = Math.floor(Seconds / 60); 
            Seconds -= Minutes * (60); 
            if(Minutes < 10) {Minutes = "0" + Minutes} 
             
            Seconds = Math.floor (Seconds); 
            if(Seconds < 10) {Seconds = "0" + Seconds} 

            timerdiv.innerHTML = Hours + ":" + Minutes + ":" + Seconds; 

            if(c<=0) { 
                clearTimeout(this);     
                $("#loadA_" + id).load("#div #loadB_" + id); 
            }else{         
                c-=1; 
                setTimeout(function(){timer_pole(c,DivId,id)},1000); 
            } 
         
        } 
</script>

[xander61]

Я сделал следующим образом
time_var = setTimeout(function(){timer_pole(c, DivId,id)},1000);
и в обработчике написал clearTimeout(time_var);

success: (function() {
return function(data) {
if (data.status === 'success') {
clearTimeout(time_var);
.......

Срабатывает только на первом таймере, на остальных таймерах все равно накладывает друг на друга.

[mv28jam]

Срабатывает только на первом таймере, на остальных таймерах все равно накладывает друг на друга.

Видимо потому-что есть область видимости переменной.
time_var вы объявили внутри ф-ии, а используете снаружи?

function a(){
	var f='ello';
	alert(f);
}
a()
alert(f);

[xander61]

Сообщение от mv28jam

Видимо потому-что есть область видимости переменной.
time_var вы объявили внутри ф-ии, а используете снаружи?

function a(){
	var f='ello';
	alert(f);
}
a()
alert(f);

Все работает. Для каждой формы добавил свой таймер с оригинальными id. 2 формы 2 таймера Код увеличился аж почти 2 раза но зато работает.