Parecerá raro, pero desde funciones PHP podemos asignar comportamientos a elementos de la página, dinámicamente y por medio de Ajax. Esta es una de las facilidades que nos aportan las librerías Xajax, que ciertamente son muy de agradecer, especialmente para los programadores de PHP, que tienen a su disposición de una manera fácil y rápida las capacidades que trae Ajax para las aplicaciones web.

En DesarrolloWeb.com venimos publicando un manual en el que explicamos el trabajo con Ajax y PHP utilizando Xajax y en este artículo vamos a ver cómo utilizar unos métodos de la clase xajaxResponse para asignar eventos y manejadores de eventos a cualquier elemento de una página web, desde funciones PHP.

Métodos addEvent() y addHandler() de xajaxResponse

Existen un par de métodos para asignar eventos a elementos de la página. Cualquier elemento de la página es susceptible de recibir instrucciones que se deben ejecutar como respuesta a eventos producidos por el usuario. A través de estas dos funciones, muy parecidas, podemos asignar eventos Javascript, de los que ya conocemos anteriormente.

Para asignar un evento necesitaremos tres datos. Primero el identificador (atributo id) del elemento de la página al que se desea asignar el evento. Luego el nombre del evento (onclick, onsubmit...) y por último la función o código javascript a ejecutar como respuesta al evento.

Dado que, tanto addEvent() como addHandler() son métodos de la clase sajaxResponse, tendrán que ejecutarse como llamadas por medio de Ajax a funciones PHP. Veamos un ejemplo de uso:

Haremos un botón HTML, que no hace nada, porque no tiene ningún código Javascript asociado al evento onclick. Luego, por medio de Ajax y Xajax, asignaremos una sentencia asociada al evento onclick, que lógicamente, se ejecutará cuando se haga clic en el botón.

Este es el botón: (cabe fijarse en el atributo id)

<input type=button value="pulsame" id="miboton">

Ahora vamos a tener un enlace, que hará una llamada xajax para asigar ese evento:

<a href="javascript:void(xajax_agrega_evento())">Agregar un evento al botón</a>

Y ahora vamos a ver la función PHP agrega_evento(), que será llamada por Ajax y asignará el evento:

function agrega_evento(){
   $respuesta = new xajaxResponse();
   $respuesta->addEvent("miboton","onclick","alert('hola mundo')");
   return $respuesta;
}

Vemos un uso de Xajax, como los que venimos explicando en el manual de Ajax y PHP de desarrollo web .com, en el que se hace uso del mencionado método addEvent(), que recibe tres parámetros: el identificador del elemento al que queremos asignar el evento, el nombre del evento que se quiere asignar y las sentenicas javascript que se han de ejecutar cuando se produzca el evento.

Una vez ejecutada esta función por medio de Ajax, el botón habrá ganado el evento onclick, de modo que, cuando se pulse, aparecerá una caja de alerta con el mensaje "hola mundo".

Ahora, cabría decir que addEvent() no se encuentra muy documentado en la documentación actual de xajax 0.5, pero funciona. Por su parte, sí está documentado el método addHandler(), que es similar, salvo que addHandler() como último parámetro hay que indicar el nombre de una función Javascript que será encargada de procesar el evento. Por ejemplo, tenemos esta función Javascript:

<script>
function mifuncion(){
   alert ("Este segundo alert se debe al addHandler");
}
</script>

Y ahora podríamos asignar un evento onclick de esta manera:

$respuesta->addHandler("miboton","onclick","mifuncion");

Como se puede ver, se ha colocado el nombre de la función en el tercer parámetro.

Veamos un código de un ejemplo completo que utiliza estos dos métodos para asignar eventos:

<?php
//clase xajax
require ('../xajax/xajax_core/xajax.inc.php');
//instanciamos xajax
$xajax = new xajax();

function agrega_evento(){
   $respuesta = new xajaxResponse();
   $respuesta->addEvent("miboton","onclick","alert('hola mundo')");
   $respuesta->addHandler("miboton","onclick","mifuncion");
   return $respuesta;
}

$xajax->register(XAJAX_FUNCTION, 'agrega_evento');

//procesar peticiones
$xajax->processRequest();
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Generar manejadores de eventos desde Xajax - Con Ajax y PHP</title>
<script>
function mifuncion(){
   alert ("Este segundo alert se debe al addHandler");
}
</script>   
<?php
//librerías xajax javascript
$xajax->printJavascript("../xajax/");
?>

</head>

<body>

<h1>Creo manejadores de eventos a partir de Ajax</h1>

Aquí tengo un botón que no hace nada (púlsalo para comprobarlo), porque no se ha indicado ningún manejador de evento
<br>
<input type=button value="pulsame" id="miboton">


<a href="javascript:void(xajax_agrega_evento())">Agregar un evento al botón</a>

</body>
</html>

</body>
</html>

Otros detalles a comentar sobre la declaración de eventos con Xajax

Si lo deseamos, podemos asignar varias funciones al mismo evento de un elemento HTML, con lo que se ejecutarán las distintas funciones en el orden en el que han sido asignadas al evento.

Además, existe el método removeHandler(), también de xajaxResponse, que sirve para eliminar eventos que hayan sido declarados con addHandler(). El método removeHandler() recibe los mismos parámetros del addHandler() que queremos anular.