Problemas indefinido...?

[Fernarey1810]

Hola a todos... y voy al grano. Hago clic sobre un enlace

Código HTML:

<div onclick="detalle(1)" class="nombreProducto">
 

que debe activar esta funcion (esta funcion cuando recibe los resultados llama a esta otra: onfinish: mostrarDetalle, esta definida mas abajo)

Código Javascript:

function detalle(id) {
    // busca los detalles del producto en el servidor
    $Ajax("producto.php?id="+id, {
        onfinish: mostrarDetalle,    
        tipoRespuesta: $tipo.JSON,
        avisoCargando: "cargando"
    });
}
 

Como veran hago una instancia del objeto XMLHttpRequest... utilizando una libreria que funciona perfectamente. Le paso un parametro: producto.php?id=id, por ej onclick="detalle(1)".

El codigo PHP debe retornar un string tipo JSON, funciona perfectamente este codigo, por las dudas lo pongo pero no es el problema (aclaro que todo esto es solo por practica no para una pagina online):

Código PHP:

<?php
include 'db.php';
 
$producto = $_GET['id'];
 
$query = "SELECT `productos`.*, `categorias`.`nombre` AS 'categoria' FROM `productos` INNER JOIN `categorias` ON `idCategoria` = `categorias`.`id` WHERE `productos`.`id` = ".$producto;
$result = mysql_query($query, $GLOBALS['DB']);
$count = mysql_num_rows($result);
 
$cadena = "[";
$i = 1;         
while ($row = mysql_fetch_array($result)) {
     $cadena .= "{\"id\": \"".$row['id']."\", \"nombre\": \"".$row['nombre']."\", \"descripcion\": \"".$row['descripcion']."\", \"precio\": \"".$row['precio']."\", \"foto\": \"".$row['foto']."\", \"categoria\": \"".$row['categoria']."\"}";
     
     if ($i != $count)
        $cadena.= ", ";
            
     $i++;
}
$cadena .= "]";
echo $cadena;
?>
 

Este es el JSON que retorna, simple una cadena comun y corriente:

[{"id": "1", "nombre": "Aceite de Oliva", "descripcion": "El aceite de oliva es un aceite vegetal de uso principalmente culinario que se extrae del fruto recién recolectado del olivo (Olea europaea) denominada oliva o aceituna.", "precio": "12.5", "foto": "aceite-de-oliva.jpg", "categoria": "Aceites"}]

Cuando quiero interpretar esta cadena, con su respectivo codigo JavaScript:

Código Javascript:

function mostrarDetalle(producto) {
    // creo el contenido de la zona de detalle
    var html = "<div class='detalleNombre'>"+producto.nombre+"</div>";
    
    if (producto.foto != "") {
        // si tiene foto, la incluimos
        html += "<img src='img/"+producto.foto+"' class='detalleFoto' />";
    }
    html += "<input type='button' class='detalleAgregar' value='Agregar al Canasto' onclick='agregar("+producto.id+")' />";
    html += "<div class='detalleCategoria'>Categoria: "+producto.categoria+"</div>";
    html += "<div class='detallePrecio'>Precio: $"+producto.precio+"</div>";
    html += "<div class='detalleDescripcion'>"+producto.descripcion+"</div>";
    $("listaDetalle").innerHTML = html; 
}
 

FIREBUG me muestra el siguiente error, y por ende no puedo tomar los datos... Tienen idea que ocurre????

http://s2.subirimagenes.com/imagen/40555711.png