[SOLUCIONADO] JS deja de funcionar despues de llamada AJAX. Casi solucionado, pero...

[daicon]

Hola,

PUes eso, no consigo dar exactamente con la clave para que me siga funcionando un codigo JS despues de una llamada AJAX.
He buscando en el foro, y hay varias respuesta.
Lo tipico es que hay que volver a cargar el codigo JS para el nuevo contenido AJAX.

Vale... pero mi problema es el siguiente.
Lo que he hecho es crear una funcion JS con el codigo que tiene que tener el javascript, y esta funcion es llamada cada vez que se pulsa en uno te los botones que hace la llamada ajax.

El problema es que hay 7-8 botones, y no me gustaria tener que editar todo el codigo html de esos botonces para meterle el onlick-> llamada a la funcion JS.
Lo veo un poco chapucero... EDITO: Lo he probado y ni si quiera funciona. no se que ocurre, pero no funciona. parece ser que si intento volver a cargar el cod Js a la vez que la llamada no se hace bien. EN cambio si pruebo con un boton sin hacer una llamada ajax si funciona... pero claro esto no me soluciona nada.

¿No hay una forma para que se llame siempre que se ejecuta una funcion PHP en concreto? Esta funcion siempre es llamada cuando se pulsa uno de estos 7-8 botonces...

Me entendeis?


EDITO: Hay otra cosa que me preocupa y no entiendo.
La funcion es esta:

Código:

function calen_dina(){
window.addEvent('domready', function(){
		var myFxc = $$('.zc_month_dayblock');
		myFxc.makeResizable({
			modifiers: {x: false, y: 'height'},
			limit: {y: [50, 350]}
		});

});
}

SI le quito el windows.addevent... no funciona. ¿No deberia de dar igual?

He probado metendo codigo JS en mi php a pelo...
Lo curioso es que la primera vez que se carga la web completa lo hace bien, en cambio cuando uso ajax, aun sabiendo que se tiene que llamar a esa fucnion para hacer la solicitud ajax, ya no funciona.

¿Que esta pasando?

EDITO2: Pongo un poco mas de detalles que creo importantes. He intentado meter en la funcion PHP que se ejecuta con cada llamada ajax lo siguiente:

Código:

$document = JFactory::getDocument();
			$jsmario = <<< EOD
	function calen_dina(){
window.addEvent('domready', function(){
		var myFxc = $$('.zc_month_dayblock');
		myFxc.makeResizable({
			modifiers: {x: false, y: 'height'},
			limit: {y: [50, 350]}
		});

});
}
EOD;
$document->addScriptDeclaration($jsmario);
	
?>
	<script>
	calen_dina();
	</script>
<?php

Decir que que estoy en Joomla, pero creo que no deberia de influir.

GRacias!

[alexg88]

Buenas,

Por lo que veo utilizas Mootools.

Lo 1º:

Código Javascript:

function calen_dina(){
window.addEvent('domready', function(){
        var myFxc = $$('.zc_month_dayblock');
        myFxc.makeResizable({
            modifiers: {x: false, y: 'height'},
            limit: {y: [50, 350]}
        });
 
});
}
 

Es necesario el window.addEvent('domready', .... porque aquí le estás indicando que este código se ejecute cuando el DOM este cargado (supongo que sabes lo que es el DOM y sino míralo en Google). Si no pones el código dentro de este evento se ejecutaría antes de que los elementos del DOM estén cargados y por tanto no funcionarían.

2º: Para hacer que funcione con elementos cargados dinámicamente (AJAX) tienes que volver a llamar al código anterior, pero sin el addEvent. ¿Por qué, te preguntarás? En este caso ya no tienes que esperar a que se cargue el DOM (ya está cargado). Es importante en este caso, ejecutar la función sólo para los nuevos elementos (esto dependerá de como cargues el contenido).

Un ejemplo (suponiendo que los nuevos elementos han sido cargados dentro del divCargado):

Código Javascript:

var myFxc = 
$("divCargado").getElements(".zc_month_dayblock");
        myFxc.makeResizable({
            modifiers: {x: false, y: 'height'},
            limit: {y: [50, 350]}
        });
 

Sobre los botones, lo mejor sería que tuviesen una clase común y añadir un evento click a todos ellos a la vez con el código correspondiente, pero eso depende de como tengas el código (habría que ver más código para conocer exactamente lo que se puede hacer)

Un saludo

[daicon]

Iniciado por alexg88

Buenas,

Por lo que veo utilizas Mootools.

Lo 1º:

Código Javascript:

function calen_dina(){
window.addEvent('domready', function(){
        var myFxc = $$('.zc_month_dayblock');
        myFxc.makeResizable({
            modifiers: {x: false, y: 'height'},
            limit: {y: [50, 350]}
        });
 
});
}
 

Es necesario el window.addEvent('domready', .... porque aquí le estás indicando que este código se ejecute cuando el DOM este cargado (supongo que sabes lo que es el DOM y sino míralo en Google). Si no pones el código dentro de este evento se ejecutaría antes de que los elementos del DOM estén cargados y por tanto no funcionarían.

2º: Para hacer que funcione con elementos cargados dinámicamente (AJAX) tienes que volver a llamar al código anterior, pero sin el addEvent. ¿Por qué, te preguntarás? En este caso ya no tienes que esperar a que se cargue el DOM (ya está cargado). Es importante en este caso, ejecutar la función sólo para los nuevos elementos (esto dependerá de como cargues el contenido).

Un ejemplo (suponiendo que los nuevos elementos han sido cargados dentro del divCargado):

Código Javascript:

var myFxc = 
$("divCargado").getElements(".zc_month_dayblock");
        myFxc.makeResizable({
            modifiers: {x: false, y: 'height'},
            limit: {y: [50, 350]}
        });
 

Sobre los botones, lo mejor sería que tuviesen una clase común y añadir un evento click a todos ellos a la vez con el código correspondiente, pero eso depende de como tengas el código (habría que ver más código para conocer exactamente lo que se puede hacer)

Un saludo

Hola, gracias!!
Ya esta solucionado!! perfecto!
He tenido que investigar un poco mas, ya que no daba con el sitio desde donde tenia que llamar a la funcion nueva, pero ya esta todo bien!