[SOLUCIONADO] javascript no funciona despues de cargar contenido con ajax

[Darkmarine]

Como he dicho en el título tengo un calendario el cual tiene eventos, y al pasar por encima del dia, si es que hay algo sale un popup con información de el. Todo funciona correctamente, hasta que cargo por ajax otro mes, en ese momento el javascript presupongo que ya no lo carga y no se como hacer para cargarlo.

La página web con el calendario es la siguiente http://mrparty.es/eventos.php

En eventos.php tengo este código

Código:

                            <div id="calendariomes">
							<?php include('includes/carga-calendario.php');?>
                            </div>

y carga este contenido, la primera vez es un include normal, pero luego segun cambio de mes lo carga por ajax

Código:

<?php 
include_once('includes.php');
?>
<?php
include('calendar.php');
if (isset($_GET['mes'])){
	$mes = $_GET['mes'];	
}else{
	$mes = date('Y-m-j');
	//$mes = "14-08-2012";
	
}
$calendar = new Calendar($mes);
setlocale(LC_ALL, 'es_ES'); // Spanish
$calendar->week_start = 1;
$compruebo_eventos = dame_lista('eventos','ev_id',0,'ev_activo=1','ev_fecha DESC');
$cc_eventos = count($compruebo_eventos);

for($y=0;$y<$cc_eventos;$y++){
	$dias_eventos[] = dame_campo('eventos','ev_fecha','ev_id='.$compruebo_eventos[$y]);	
}
$calendar->highlighted_dates = $dias_eventos;	
print($calendar->output_calendar());
?>

el calendario es una clase que no la voy a poner porque es muy larga pero digamos que construye todo el calendario. Solo pongo el enlace para que veais que llamo a la función.

Código:

onclick=\"cargarCalendario('".date("Y-m-d", strtotime("$mes -1 month"))."')\"

y la función para sacar información de cada día, que es lo que falla al cambiar d mes es la siguiente

Código:

$(function () {
	$('.date_has_event').each(function () {
		// options
		var distance = 10;
		var time = 250;
		var hideDelay = 500;

		var hideDelayTimer = null;

		// tracker
		var beingShown = false;
		var shown = false;

		var trigger = $(this);
		var popup = $('.events ul', this).css('opacity', 0);

		// set the mouseover and mouseout on both element
		$([trigger.get(0), popup.get(0)]).mouseover(function () {
			// stops the hide event if we move from the trigger to the popup element
			if (hideDelayTimer) clearTimeout(hideDelayTimer);

			// don't trigger the animation again if we're being shown, or already visible
			if (beingShown || shown) {
				return;
			} else {
				beingShown = true;

				// reset position of popup box
				popup.css({
					bottom: 20,
					left: -76,
					display: 'block' // brings the popup back in to view
				})

				// (we're using chaining on the popup) now animate it's opacity and position
				.animate({
					bottom: '+=' + distance + 'px',
					opacity: 1
				}, time, 'swing', function() {
					// once the animation is complete, set the tracker variables
					beingShown = false;
					shown = true;
				});
			}
		}).mouseout(function () {
			// reset the timer if we get fired again - avoids double animations
			if (hideDelayTimer) clearTimeout(hideDelayTimer);

			// store the timer so that it can be cleared in the mouseover if required
			hideDelayTimer = setTimeout(function () {
				hideDelayTimer = null;
				popup.animate({
					bottom: '-=' + distance + 'px',
					opacity: 0
				}, time, 'swing', function () {
					// once the animate is complete, set the tracker variables
					shown = false;
					// hide the popup entirely after the effect (opacity alone doesn't do the job)
					popup.css('display', 'none');
				});
			}, hideDelay);
		});
	});
});

Espero que podais solucionarme el problema, por lo que he buscado por internet hablan de algo como .live pero la verdad es que ando perdidísimo en js, un saludo!

[maycolalvarez]

recuerde que cuando usa AJAX la respuesta es manejada por el propio javascript, por lo tanto tiene que extraer todos los bloques de script del response y ejecutarlos

[kikeking1]

Lo que te dice el amigo maycolalvarez. Cuando traes el nuevo contenido estas cambiado en el dom de la página, por lo que cuando ejecutaste la función que asigna el evento al "popup" al cargar la pagina, solo se itinero sobre los eventos que habian en ese momento (el primer mes) cuando cambias debes ejecutar de nuevo la función, para que itinere de nuevo.

Es decir, la funcion que tienes en "coda.js" (la ultima que nos indicas en tu post) en vez de ejecutarla como funcion anonima, ponle un nombre, el que mas coraje te de.

Cuando carges por primera vez la página, simplemente invoca a la función para que se ejecute y funcione con el primer mapa (generado con el php).

Luego a la función de cargarcalendario() despues de hacer el .html() debes ejecutar tambien la función que carga el popup.

Imaginemos que decides llamar a la funcion "cargapopup()", la cosa quedaria algo asi:

Código:

$(function cargapopup() {
	$('.date_has_event').each(function () {
		// options
		var distance = 10;
		var time = 250;
		var hideDelay = 500;

		var hideDelayTimer = null;

[.....]

					popup.css('display', 'none');
				});
			}, hideDelay);
		});
	});

cargapopup();  // Antes del cierre de $(), para que se ejecute cuando este completamente cargada la página.

});

Y la funcion cargacalendario() quedaria algo asi:

Código:

function cargarCalendario(datos){
//donde se mostrará el resultado de la eliminacion
divResultado = document.getElementById('calendariomes');
//usaremos un cuadro de confirmacion
//instanciamos el objetoAjax
ajax=objetoAjax();
//uso del medotod GET
//indicamos el archivo que realizará el proceso de eliminación
//junto con un valor que representa el id del empleado
ajax.open("GET", "includes/carga-calendario.php?mes="+datos);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
//mostrar resultados en esta capa
divResultado.innerHTML = ajax.responseText
cargapopup();
}
}
//como hacemos uso del metodo GET
//colocamos null
ajax.send(null)
}

P.D.: He visto que estas usando Jquery, pero a la par estas creando el objeto xmlhttp a la vieja usanza, Jquery crea de por si el objeto para ajax y tiene sus propios funciones para realizar las peticiones ajax (.GET(), .POST(), .AJAX() ) que simplifican mucho tanto la creación de codigo como el control de peticiones y estados. Te recomiendo te pases por la documentación de jquery y le eches un vistazo a esto, porque vas a invertir 30 45 minutos en leer y comprender como usarlo y vas a ahorrar muchisimas horas de picado de texto manual. (Y el codigo que tienes ahora mismo podria ser mucho mas limpio y reducido, lo que se traduce en mayor facilidad de mantenimiento y reutilización del codigo)

P.D2.: Sobre el metodo .Live() es para versiones "antiguas" de jquery, apartir de la 1.7 (y va por la 1.8.1) .live() quedo obsoleto y actualmente se usa el evento .on() que es mas o menos lo mismo, pero con sus mejoras y tal, echale un ojo también.


Un saludo y espero haberte ayudado.

[Darkmarine]

muchas gracias por las respuestas, especialment kikeking1 que lo ha explicado muy detalladamente y me ha servido para resolverlo, gracias de nuevo :)