Problema al procesar respuesta JSON

[neodani]

Buenas,

Tengo una sección de una página que hace una petición en ajax hacía un script el cual me devuelve un json con una variable html donde está todo el código html listo para insertar en la sección que realiza la petición.

Todo me funciona, recibo los datos correctamente, etc. Pero resulta que tengo una función tooltip que uso para algunos enlaces para mostrar la típico burbuja, y funciona por toda la web menos en los datos que recibe de json.

He comprobado que realmente estuviese escribiendo correctamente todo y no sé porqué no es capaz de interpretar el efecto tooltip en todo el div que proviene de la respuesta json.

Sabéis por qué no? tengo que hacer algo? :S

Muchas gracias de antemano

[ocp001a]

imagino que es por cosa de las comillas o apostrofes, deberías revisar el html devuelto para ver cómo se imprime.

[neodani]

He hecho un ejemplo lo mas sencillo posible, la petición solo me devuelve este JSON

{"test":"<a href='\/'><img class='tooltip' title='TITULO PERSONALIZADO' src='\/imagenes\/logos\/logo.png' \/><\/a>"}

Si llamo al script json directamente tampoco me muestra el tooltip, en este caso correcto pq él por si solo no tiene ningun JS, solo está la respuesta JSON de arriba.

He probado con comillas simples y comillas dobles y nada

Así creo el JSON

Código PHP:

$jsondata2['test'] = '<a href="/"><img class="tooltip" title="TITULO PERSONALIZADO" src="/imagenes/logos/logo.png" /></a>';
 
echo json_encode($jsondata2);
 

[Marvin]

Pero el tooltip que necesita para que se vea?? un html en formato html o un html en formato json?

Saludos!

[neodani]

El tooltip lo que necesita es su libreria y la carga

<script type="text/javascript" src="/js/jquery.poshytip.min.js"></script>

$('.poshytip').poshytip({
className: 'tip-twitter',
showTimeout: 1,
alignTo: 'target',
alignX: 'center',
alignY: 'bottom',
offsetY: 10,
allowTipHover: false
});

Con esto es suficiente para que cuando escribas cualquier enlace y le pongas la clase .poshytip te genere el tooltip con el aspecto correspondiente a la libreria.

<a href="#" class="poshytip" title="hola que tal">saludo</a>

Sin embargo cuando recibo los datos de json no se porque el tooltip no pilla bien el aspecto, vamos que es el de toda la vida del navegador.

Me he dado cuenta que en este tipo de páginas que recibes datos desde ajax, si miras el código fuente de la web principal no te aparece el html que traes cuando haces la petición.

No vaya a ser que como el contenido se carga dentro de un div una vez está cargada la página, no lo detecte correctamente? Tendría que cambiar algo para que la función se aplicará también a los datos cargados desde ajax?

[neodani]

Confirmado la parte que el json no tiene nada que ver sino que es la petición en ajax y en como afecta que la página se haya cargado

Porque acabo de hacer una prueba simple de cargar un archivo desde ajax, de esta forma

$("#test").load("/secciones/test.php");

<div id="test"></div>

Y dentro del archivo un trozo de código de la web donde sí funciona el tooltip

<a title="Vista Tabla" class="vtabla poshytip" href="#"></a><a title="Vista Lista" class="vlista poshytip" href="#"></a>

y sin embargo dentro del div test tampoco funciona

Tiene que ser algo del DOM que los JS no tienen afectación sobre los datos cargados desde ajax :S

[neodani]

Otro dato, si al script que cargo vía ajax le añado el document.ready sí que lo pilla bien.

test.php

Código PHP:

<script type="text/javascript">
$(document).ready(function(){
$('.poshytip').poshytip({
    className: 'tip-twitter',
    showTimeout: 1,
    alignTo: 'target',
    alignX: 'center',
    alignY: 'bottom',
    offsetY: 10,
    allowTipHover: false
}); 
});
</script>
<div id="vistas">
<a title="Vista Tabla" class="vtabla poshytip" href="#"></a><a title="Vista Lista" class="vlista poshytip" href="#"></a>
</div>
 

Ahora falta saber como en lugar de esto, se le puede aplicar a la respuesta JSON....

[neodani]

Toma ya! eran correctas las suposiciones, si se lo paso también al JSON para imprimirlo funciona.

Código PHP:

$jsondata['script']="
            <script type='text/javascript'>
            $(document).ready(function(){
            $('.poshytip').poshytip({
                className: 'tip-twitter',
                showTimeout: 1,
                alignTo: 'target',
                alignX: 'center',
                alignY: 'bottom',
                offsetY: 10,
                allowTipHover: false
            }); 
            });
</script>";
 

Lo cual me extraña tener que tener dos veces el $('.poshytip').poshytip una al incio de la web y otra en cada petición ajax que contenga un tooltip, no?

[Marvin]

Me da la sensacion que el tooltip lo estas cargando en el archivo que debe cargarse por ajax y no desde el archivo que lo llama.

Intenta dejar la funcion por defecto en el archivo que va a hacer la llamada de ajax y el archivo a cargar que tenga solo el div con el contenido.

Saludos!

NOTA: Esto es Javascript mods!