problema con datos en div que ha sido borrado previamente

[oms02]

Hola a todos. Veréis, tengo un problema que me esta trayendo por la calle de la amargura. A ver si me podéis echar un cable. Os comento:

En esencia se trata de un php en el que se ejecuta una función javascript. El javascript se trata simplemente de un reloj (digital) que se muestra en una serie de divs.

Ahora, (con el javascript ejecutándose), tengo un botón (html) en el que, al pulsar, la función (el reloj js) vuelve a ejecutarse de nuevo; es decir, el reloj empieza de nuevo. El proceso que realizo concretamente es esconder el div contenedor donde esta el reloj, ejecutar la función y mostrar de nuevo los divs.

Bueno, el maldito problema es que todo funciona casi perfecto, a excepción de que al darle al botón, en esa serie de divs se muestran los dos relojes.

Me imagino donde está la raíz del problema y es que al volver a llamarse al mismo código, los divs donde deben mostrarse los dígitos del reloj son los mismos donde antes se mostraba el antiguo reloj (los muestro por la clase y diferencio los digitos por el id).

He tratado de quitar los divs con: remove(), empty(), hide(), y alguno mas…pero el resultado siempre es el mismo: se acaban mostrando (en los mismos divs) los 2 relojes a la vez.


Aqui los codigos con el proceso completo:
El php que se ejecuta al principio:

Código HTML:

<div id="resultado">
<?php require ('reloj.php'); ?>//llamo al archivo donde se ejecuta el reloj
</div>
 

reloj.php

Código HTML:

<!-- aqui hay codigo php previo pero no influye para nada en el problema. -->
 
<div class="cuadro-reloj">
    <script type="text/javascript">tiempo()</script>//funcion js del reloj
    <div class="digito" id="dechora"></div>
    <div class="digito" id="unihora"></div>
    <div class="digito" id="dospuntos1"></div>
    <div class="digito" id="decmin"></div>
    <div class="digito" id="unimin"></div>
    <div class="digito" id="dospuntos2"></div>
    <div class="digito" id="decseg"></div>
    <div class="digito" id="uniseg"></div>
</div>
 

Ahora, mediante js (jquery), el evento que llama a ejecutar de nuevo la funcion si se hace click en el boton.

Código Javascript:

$("#boton-activar-reloj").live("click",function(){
    $.ajax({
        contentType: "application/x-www-form-urlencoded",
        type: "POST",
        url:'activarreloj.php',
        data: "",
        success: function(datos){
            $('.cuadro-reloj').remove();//aqui he probado de todo...
            $('#resultado').html(datos);
        }
    });
});
 

El archivo activarreloj.php contiene también un require al archivo reloj.php

Código HTML:

...
<?php require ('reloj.php'); ?>//llamo al archivo donde se ejecuta el reloj
 

Supongo que para arreglar el problema sobran la mitad de los codigos que os he mostrado pero prefiero dejar claro el proceso.

A ver si me podeis echar una mano, porfa, que llevo varios dias con lo mismo y no hay manera. Muchas gracias por vuestro tiempo.

1 saludo!

[kokoou]

La primera vez que ejecutas el reloj también se muestra 2 veces?

Puedes fijarte en la consola, con firebug(en firefox) o en chrome, cual es el contenido que devuelte "activarreloj.php", porque puede ser que ahí venga 2 veces el reloj y el remove ya lo habías echo previamente.

[oms02]

Hola kokoou. Muchas gracias por contestar.

Pues la primera vez que se ejecuta lo hace perfecto.

Solo ocurre al pulsar el boton. De hecho (no lo habia comprobado antes) cada vez que pulso el boton se muestra una vez mas el reloj. Asi, al pulsar 3 veces el boton, se muestran 4 relojes.

Una cosa que quizas no haya explicado con suficiente claridad: los divs se muestran una vez (como debe suceder) pero en ellos se muestran 2 o mas relojes a la vez. Es decir, alternan los 2 relojes en el mismo div.

Respecto a firebug, no estoy muy acostumbrado a usarlo, pero en la consola no he detectado nada raro: ningun error, advertencia, informacion, ni informacion de depuracion....

[livemusic]

Lo que sucede amigo, este problema es muy amenudo es que estas usando el metodo Live.... cambialo por el metodo click y dejalo algo asi...

Código PHP:

$("#boton-activar-reloj").click(function(){
* * $.ajax({
* * * * contentType: "application/x-www-form-urlencoded",
* * * * type: "POST",
* * * * url:'activarreloj.php',
* * * * data: "",
* * * * success: function(datos){
* * * * * * $('.cuadro-reloj').remove();//aqui he probado de todo...
* * * * * * $('#resultado').html(datos);
* * * * }
* * });
});
 

Y si usas el Metodo Live, para que este se ejecute el Id despues de que el doom este listo ay,, tendriamos una solucion mas compleja.. intentalo de esta manera y me comentas.

[oms02]

Hola livemusic. Muchisimas gracias por contestar.

He probado la posible solucion que me comentas pero sigo exactamente igual...


es que ya me estoy volviendo loco con esto...

[livemusic]

Código Javascript:

$("#boton-activar-reloj").click(function(){
      $('#resultado').empty();
      $.ajax({
            type: "POST",
            url:'activarreloj.php',
            success: function(datos){
                  $('.cuadro-reloj').remove();
                  $('#resultado').html(datos);
            }
      });
});
 

Dime que paso con este codigo... Interesante tu error esperemos la respuesta..

[oms02]

Sigue sin funcionar...

Agradezco mucho tu interes livemusic.

[kokoou]

Prueba esto:

Código Javascript:

$("#boton-activar-reloj").live("click",function(){
    $.ajax({
            contentType: "application/x-www-form-urlencoded",
            type: "POST",
            url:'activarreloj.php',
            data: "",
            success: function(datos){
                    $('.cuadro-reloj').remove();//aqui he probado de todo...
                    // $('#resultado').html(datos);
            }
        });
});
 

Y fijate si el reloj se elimina.

Si el reloj se elimina, correctamente el problema está en el php que estaría cargando más de un reloj, de lo contrario el problema está en que no se está eliminando el reloj insertado anteriormente.

Espero tu respuesta.