¿Cómo volver a poner un botón intacto después de realizar la petición?

[luchi2]

Hola.
Tengo un botón echo en PHP (por el tema de las variables y algunas condiciones) que me ejecuta dos funciones: una para javascript('carrito') y otra para ejecutar AJAX('traerDatos'):

Código PHP:

echo "<div id='compra'><img src='botonComprar.gif' class='compra' onclick='carrito(\"$articulo\",$precio_articulo); traerDatos(\"$articulo\",$precio_articulo);'/></div>";
 

Si se hace clic sobre ese botón se ejecuta la función de AJAX cuyo código es el siguiente:

Código Javascript:

function nuevoAjax()
{ 
    var xmlhttp=false; 
    try 
    { 
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
    }
    catch(e)
    { 
        try
        { 
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        catch(E) { xmlhttp=false; }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp=new XMLHttpRequest(); } 
 
    return xmlhttp; 
}
 
function traerDatos(articulo, precio){
    var capaCarrito=document.getElementById('compra');
     var ajax=nuevoAjax();
    capaCarrito.innerHTML="<center><img  src='AJAX/circuloAnimado.gif'></center>";
    ajax.open("POST", "gestionarCarro.php", true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send("articulo="+articulo+"&precio="+precio);
    ajax.onreadystatechange=function(){
    if(ajax.readyState==4 && ajax.status==200){
        
capaCarrito.innerHTML="<div id='compra'><img src='botonComprar.gif' class='compra' onclick='carrito(\"$articulo\",$precio_articulo); traerDatos(\"$articulo\",$precio_articulo);'/></div>";
    }
}
 
}
 

Se comunica bien con PHP, hace lo que tiene que hacer, mientras que lo hace, el usuario puede ver el 'circuloAnimado.gif', pero cuando termina, no me coloca el mismo botón de forma que una vez echo, aunque se vuelva a dar clic ni ejecuta la función de Javascript ni la da AJAX. Es la primera vez que hago esto, pero ¿cómo se puede volver a poner el mismo botón que estaba antes de la imagen de carga?.
Gracias.

[apacheJack]

Creo que el error está en que no imprimes el botón del carrito correctamente como se hace en PHP usando

Código PHP:

  echo  
   

de nuevo.

Esto solo funcionaría si tuvieses tus funciones en un archivo.php:

Código PHP:

  <?php
$boton_html = "<div id='compra'><img src='botonComprar.gif' class='compra' onclick='carrito(\"$articulo\",$precio_articulo); traerDatos(\"$articulo\",$precio_articulo);'/></div>";
?>   

Código:

capaCarrito.innerHTML="<?php echo $boton_html; ?>"

En caso de que quieras mantener los javascript en un .js, deberías usar su forma de concatenar cadenas de textos usando "+":

Código:

capaCarrito.innerHTML = "<div id='compra'><img src='botonComprar.gif' class='compra' onclick='carrito(\""+ articulo +" \", "+ precio +"); traerDatos(\""+ articulo +"\", " + precio + ");'/></div>"

No te olvides de darle los valores a var articulo y precio en javascript.

No me gusta mucho como lo has organizado, pero creo que te funcionará jaja. Ya me cuentas algo.

[luchi2]

Si funcionó. Gracias.
Para terminar ¿podrías decirme cómo lo organizarías tu? Así aprendo.
Un saludo.