Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

com

Libreras jQuery4PHP: jQuery desde PHP

Manual de las libreras jQuery4PHP, para trabajar con el framework jQuery desde PHP, sin necesidad de conocimientos de Javascript.

Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez
Director de DesarrolloWeb.com http://www.desarrolloweb.com (7 captulos)

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

jQuery4PHP: jQuery para PHP

Librera PHP 5 que pone a la disposicin de los programadores en PHP todas las funcionalidades de jQuery y jQueryUI. Vamos a presentar y realizar diversas demostraciones de uso de unas libreras que estamos seguros gustarn a ms de uno. Se trata de un paquete de clases realizadas en PHP que permiten trabajar de una manera sencilla con el framework Javascript jQuery desde cdigo PHP. Seguro que hay muchos desarrolladores que tienen conocimientos de PHP pero que no gozan de soltura en la programacin con Javascript. Quizs t seas uno de ellos y hayas odo hablar de jQuery, un framework que permite hacer cosas realmente sorprendentes con los elementos de las webs, para producir pginas enriquecidas del lado del cliente, comunes en lo que se ha denominado la Web 2.0. Justamente para estas personas, que conocen PHP pero que no han trabajado con Javascript, estn dirigidas las libreras que vamos a relatar. Digamos que son un puente entre las pginas dinmicas del servidor con PHP y las pginas dinmicas del cliente, que permitirn a los desarrolladores trabajar con toda la potencia de jQuery, pero sin salirse de PHP y sin tener que aprender Javascript. A lo largo de los prximos artculos veremos cmo se podr realizar esta tarea y realizaremos varios ejemplos sencillos que nos ayudarn a dar nuestros primeros pasos con jQuery4PHP (jQuery para PHP).
Nota: Aprender Javascript est al alcance de cualquier persona que sepa PHP. En nuestra opinin, Javascript es todava ms sencillo de utilizar que PHP, as que si lo deseas, no deberas tener ningn problema en aprender el lenguaje de programacin del lado del cliente. Para ello te recomendamos accede a la seccin Javascript a Fondo. Adems, en DesarrolloWeb.com tenemos un completo Manual de jQuery, que te ayudar a dominar el framework una vez tengas conocimiento de Javascript. Personalmente prefiero programar con jQuery y PHP que utilizar las libreras jQuery4PHP, pero claro que esto lo afirmo despus de ms de 10 aos programando en Javascript y un par de ellos de experiencia con jQuery. No obstante, opino que para una persona que domine PHP puede resultarle ms rpido aprender a usar estas libreras que aprender a usar Javascript y jQuery. Hasta el momento hemos podido realizar ejemplos sencillos con jQuery4PHP sin demasiadas complicaciones y con buenos y rpidos resultados. Ahora bien, si la cosa se complica mucho en el futuro y se desean hacer scripts ms complejos, quizs el trabajo con jQuery4PHP se convierta en algo demasiado pesado. Es algo para lo que, sinceramente, todavia no tengo la suficiente experiencia para afirmar que pueda ocurrir o no.

Descarga de jQuery4PHP
Las personas que deseen utilizar estas libreras tienen que empezar por la descarga de los scripts PHP que sern necesarios de instalar en nuestro servidor. La descarga la podremos obtener desde el sitio de jQuery4PHP: http://jquery4php.sourceforge.net Encontraremos un enlace para "Download" que nos llevar al sitio de SourceForge donde descargar la ltima versin de las libreras. Comprobaremos que la descarga nos ofrece ya diversos ejemplos de uso de las libreras, que nos pueden ofrecer un vistazo rpido a las posibilidades de jQuery4PHP. Adems, accediendo a la pgina de inicio de las libreras tendremos tambin la oportunidad de ver varios ejemplos y una explicacin rpida sobre sus posibilidades. El el prximo artculo mostraremos cmo realizar una pgina que utilice las libreras jQuery4PHP para programar con jQuery desde PHP.
Artculo por

Miguel Angel Alvarez

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Primera pgina con jQuery4PHP

Realizamos un primer ejemplo con las libreras jQuery4PHP para la programacin en Javascript y jQuery , desde cdigo PHP . En el ejemplo anterior explicamos por encima qu eran las libreras jQuery4PHP y ofrecimos el link a la pgina de producto donde podemos descargarlas. Ahora vamos a crear nuestro primer ejemplo, lo ms bsico posible para comenzar por algo sencillo. Queremos sealar que sobre todo estos primeros ejemplos estn sacados de la propia documentacin de jQuery4PHP. Nosotros nos hemos dedicado a traducirlos y adaptarlos a nuestra propia forma de explicar las cosas. No obstante, recomendamos acceder a la pgina de jQuery4PHP donde encontraremos toda la documentacin de las libreras. Vamos a ver una receta paso por paso para realizar nuestro primer ejemplo.

Descarga de las libreras

Como habamos dicho anteriormente, necesitamos descargar las libreras. En la descarga ya tenemos los archivos PHP para hacer de puente con jQuery y la propia librera de jQuery que debemos tambin disponer para que todo funcione.

Incluir las liberas PHP

En el cdigo de la pgina PHP donde queramos utilizar jQuery4PHP tenemos que hacer un include de las libreras jQuery4PHP. Para ello tenemos que utilizar un cdigo como este:
<?php include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php'); YsJQueryAutoloader::register(); ?>

Para que funcione bien, prestar atencin a la ruta del include, que sea la correcta y que depender de dnde hayis colocado las libreras descargadas.

Incluir jQuery
Ahora tenemos que incluir el framework Javascript jQuery y para ello tenemos que utilizar la etiqueta SCRIPT para cargar el cdigo Javascript a las libreras de jQuery. Este "include" se suele hacer dentro del HEAD de la pgina.
<head> <title>Probando jQuery 4 PHP</title> <script type="text/javascript" src="js/jquery.min.js"></script> </head>

Tambin debemos asegurarnos que la ruta a este archivo Javascript sea la correcta (js/jquery.min.js).

Hacer un elemento, para aplicarle Javascript

Ahora vamos a colocar un poco de HTML, para colocar un elemento al que luego le aplicaremos Javascript por medio de las libreras jQuery4PHP. Puede ser cualquier tipo de elemento. Nosotros hemos escogido un botn.
<button type="button" id="miboton">Pulsame</button>

Por favor, fjate que el botn tiene un atributo id="miboton", que utilizaremos ms tarde para referirnos a l.

Cdigo PHP para generar un mensaje Hola Mundo

Ahora vamos a ver el cdigo PHP que necesitaramos para generar el tpico mensaje de "Hola Mundo", que se mostrar al pulsar el botn anterior.

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

<?php echo YsJQuery::newInstance() ->onClick() ->in('#miboton') ->execute('alert("Hola mundo!")') ?>

Comienza con una sentencia "echo", que es importante para que se escriba en la pgina el cdigo Javascript que PHP generar segn nuestras instrucciones. Luego seguimos haciendo una llamada a un mtodo esttico:
YsJQuery::newInstance()

Con ese cdigo creamos una nueva instancia de la clase necesaria para hacer jQuery y luego aplicamos varios mtodos para cumplir nuestros objetivos. Primero le decimos que queremos definir un evento click.
->onClick()

Luego decimos que el evento se realizar sobre el botn y para ello hacemos una llamada al mtodo in() y le pasamos el selector para el botn. Ese selector se hace a travs del atributo id del botn. Ese selector se hace como en CSS, colocando una almohadilla seguida del identificador del elemento al que queremos referirnos.
->in('#miboton')

Por ltimo ejecutamos una sentencia Javascript para producir un mensaje en una caja de dilogo tipo alert.
->execute('alert("Hola mundo!")')

Y ya est
Con esto hemos terminado nuestro ejemplo. Quizs est bien aclarar que esto no tiene mucho todava de jQuery, pero de momento est bien para ir familiarizndonos sobre el modo de trabajo con jQuery4PHP. Habrs podido observar que el cdigo PHP para comunicar con las libreras jQuery4PHP es un poco particular. Realmente no tiene nada que no hayas podido conocer si trabajas con programacin orientada a objetos en PHP, pero quizs te aclararas mejor si vieses un cdigo como este, que es ms largo, pero que utiliza una sintaxis PHP que posiblemente te sea ms familiar.
<button type="button" id="boton2">Pulsame tambin</button> <?php $instancia = YsJQuery::newInstance(); $instancia->onClick(); $instancia->in('#boton2'); $instancia->execute('document.bgColor="#ff8800"'); $instancia->write(); ?>

En este segundo ejemplo adems tenemos una diferencia, que en vez de iniciar todo con un "echo" de PHP, llamamos al acabar el cdigo al mtodo write() para escribir el Javascript generado en la pgina.
Nota: en la documentacin recomiendan utilizar el echo al principio en vez de la llamada a write() al final, pero no especifican el por qu.

Cdigo completo
Puedes ver a continuacin el cdigo completo de este primer ejemplo. En realidad son dos ejemplos muy similares que implementan dos eventos click sobre dos botones distintos.
<?php include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php'); YsJQueryAutoloader::register(); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

"http://www.w3.org/TR/html4/strict.dtd" > <html lang="es"> <head> <title>Probando jQuery 4 PHP</title> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <h1>Probando el jQuery para PHP</h1> <button type="button" id="miboton">Pulsame</button> <?php echo YsJQuery::newInstance() ->onClick() ->in('#miboton') ->execute('alert("Hola mundo!")') ?> <br> <br> <button type="button" id="boton2">Pulsame tambin</button> <?php $instancia = YsJQuery::newInstance(); $instancia->onClick(); $instancia->in('#boton2'); $instancia->execute('document.bgColor="#ff8800"'); $instancia->write(); ?> </body> </html>

Para acabar, dejamos un enlace para ver el ejemplo en marcha.

Artculo por

Miguel Angel Alvarez

Otra manera de escribir eventos en jQuery4PHP

En la documentacin de jQuery4PHP nos ofrecen otra manera de escribir el cdigo de eventos que ellos llaman mtodo esttico. Estamos ofreciendo una serie de artculos prcticos para ensear a manejar las libreras jQuery4PHP. En artculos anteriores ofrecimos ya una pequea introduccin a las libreras. y un primer ejemplo de uso relatado paso por paso. En el presente artculo vamos a trabajar todava con ejemplos bien sencillos, pero nos introduciremos un poco ms en las interesantes posibilidades que nos ofrece jQuery. Veremos cmo desde PHP podemos hacer cosas tan interesantes como alterar las propiedades CSS de los elementos de la pgina. Adems, repasaremos un mtodo alternativo que nos ofrecen en la documentacin para definir eventos en elementos de la pgina, que se llama mtodo esttico.
Nota: Recordemos que para comenzar debemos incluir las libreras PHP de jQuery4PHP y la propia librera Javascript de jQuery. Todo eso lo vimos en el artculo Primera pgina con jQuery4PHP.

Mtodo esttico de definir eventos con jQuery4PHP

El mtodo esttico se llama as porque se utiliza un mtodo esttico para definir el evento que deseemos. Por tanto, existe un mtodo esttico para cada manejador de evento.

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Por ejemplo, si deseamos definir un evento click, utilizaremos el mtodo esttico click(), de esta manera:
YsJQuery::click()

A continuacin tendremos que definir sobre qu elemento se asocia el evento y la funcin a ejecutar cuando se produzca.
Nota: Antes (ver artculo anterior) comenzbamos todo con otro mtodo esttico: YsJQuery::newInstance(); A partir de aqu, sobre la instancia generada, utilizbamos mtodos normales para definir eventos o ejecutar cdigo. Pero en realidad es todo muy parecido.

Para ilustrar cmo definir eventos con mtodo esttico vamos a realizar un ejemplo sencillo, que sirve para alterar el color de fondo de un elemento cuando pasamos el ratn por encima. Podemos comenzar por ver ejemplo en marcha. Durante este ejemplo aprenderemos tambin a invocar uno de los mtodos de jQuery, css() que sirve para alterar el valor de los atributos CSS de los elementos de la pgina.
echo YsJQuery::mouseover() ->in('#micapa') ->handler( YsJQuery::css() ->inVar("this") ->propertyName("background-color") ->value("#f99") ) ->execute();

Como se puede ver, todo comienza con un echo, igual que antes. Luego se llama al mtodo esttico mouseover(), para definir un evento onMouseOver. Luego se define que el evento se debe asociar al elemento con identificador "micapa". Ms tarde definimos la funcin a ejecutar cuando se produzca el evento, con el mtodo handler(). El paso de cambiar un atributo CSS del elemento es especialmente interesante. Para ello utilizamos el mtodo esttico css(). Sobre ese mtodo tenemos que definir cosas como el elemento que queremos actualizar, la propiedad CSS a cambiar y el nuevo valor a colocar. Con el mtodo esttico de definicin de eventos debemos acabar invocando al mtodo execute(). Ahora podemos ver tambin el cdigo del evento onMouseOut.
echo YsJQuery::mouseout() ->in('#micapa') ->handler( YsJQuery::css() ->inVar("this") ->propertyName("background-color") ->value("#99f") ) ->execute()

Es exactamente igual, slo que estamos alterando la propiedad background-color a otro valor.

Podemos ver el cdigo completo del ejemplo

Ahora veamos el cdigo completo de este ejemplo de jQuery4PHP.
<?php include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php'); YsJQueryAutoloader::register();

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="es"> <head> <title>Probando jQuery 4 PHP</title> <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css" media="all"> #micapa{ width: 200px; padding: 10px; border: 1px solid #ccc; background-color: #99f; } </style> </head> <body> <h1>Probando el jQuery para PHP</h1> <div id="micapa">Pasa el ratn por encima</div> <?php echo YsJQuery::mouseover() ->in('#micapa') ->handler( YsJQuery::css() ->inVar("this") ->propertyName("background-color") ->value("#f99") ) ->execute(); echo YsJQuery::mouseout() ->in('#micapa') ->handler( YsJQuery::css() ->inVar("this") ->propertyName("background-color") ->value("#99f") ) ->execute() ?> </body> </html>

Si lo deseas, puedes ver ejemplo en marcha. Hay que reconocer que este segundo ejemplo todava no ha sido muy espectacular, ms aun si sabemos que este efecto se podra haber realizado slo con Hojas de Estilo en Cascada, con los pseudoElementos hover. Pero bueno, al menos hemos conocido uno de los mtodos ms importantes de jQuery que es el mtodo CSS, con el que podremos cambiar las propiedades CSS de cualquier elemento de la pgina. En el prximo artculo vamos a tratar cosas un poco ms interesantes, puesto que empezaremos a ver la realizacin de efectos dinmicos sencillos con jQuery4PHP.
Artculo por

Miguel Angel Alvarez

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Efectos sencillos con jQuery4PHP

Vamos a realizar un ejemplo con algunos efectos sencillos que se pueden hacer en jQuery, pero programados enteramente sobre PHP . En este artculo vamos a empezar a ver las posibilidades de jQuery para la realizacin de cosas un poco ms espectaculares. El trabajo con jQuery4PHP ya lo hemos empezado a relatar en artculos anteriores del Manual de jQuery4PHP, as que recomendamos su lectura si aun no se haba realizado. Veremos a continuacin cmo realizar efectos sencillos para animacin de elementos de la pgina. Decimos que son sencillos porque se pueden hacer con llamadas a simples mtodos de jQuery, pero si tenemos una ligera idea sobre Javascript, podremos saber que estos efectos no tendran nada de sencillos si no estuviramos utilizando un framework como jQuery. Todos los efectos los vamos a realizar sobre una capa.
<div id="micapa">Esta capa se mueve</div>

Ahora veremos el cdigo PHP para animarla. Comenzaremos por ver un cdigo que se ejecutar cuando el usuario cargue la pgina, sin que se tenga que pulsar ningn botn.
echo YsJQuery::newInstance() ->execute( YsJQuery::animate() ->in("#micapa") ->properties(array( "left"=>"400px", "top"=>"40px" )) ->duration(YsJQueryConstant::SLOW) );

Como vemos el mtodo ejecute() nos sirve para ejecutar cdigo directamente. Dentro del execute() hacemos una llamada al mtodo animate(), que ser el encargado de generar esa animacin. Bsicamente lo que le indicamos es que la animacin se realiza sobre la capa con id="micapa" y que se deben animar las propiedades left y top de CSS (con lo que se producir un movimiento de la capa por la pgina). Ahora vamos a ver cmo se realizara una animacin similar, pero como respuesta a la pulsacin de un botn. Para ello definimos un evento y ejecutamos el cdigo slo cuando se produzca ese evento.
echo YsJQuery::newInstance() ->onClick() ->in("#miboton") ->execute( YsJQuery::animate() ->in("#micapa") ->properties(array( 'fontSize'=>'28px', 'width'=>'300px' )) ->duration(YsJQueryConstant::SLOW) );

Ahora podemos ver un par de efectos todava ms simples, pero tambin bastante visuales. Se ejecutarn como respuesta al evento click sobre otros botones de la pgina. En este primer caso hacemos un efecto de fundido, de opaco a transparente, con lo que haremos que desaparezca la capa "micapa".
echo YsJQuery::newInstance() ->onClick() ->in("#ocultar") ->execute( YsJQuery::fadeOut() ->in("#micapa")

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

->duration(YsJQueryConstant::SLOW) );

Con este otro cdigo haremos un efecto de fundido de transparente a opaco, con lo que conseguiremos que la capa se vuelva a mostrar.
echo YsJQuery::newInstance() ->onClick() ->in("#mostrar") ->execute( YsJQuery::fadeIn() ->in("#micapa") ->duration(YsJQueryConstant::SLOW) ); Nota: Para entender bien estos ejemplos quizs sea necesario, o al menos s recomendable, conocer un poco de jQuery y para ello recomendamos acceder al Manual de jQuery, en la seccin que habla de efectos.

Para acabar, ponemos el cdigo completo de esta prctica con jQuery4PHP.

<?php include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php'); YsJQueryAutoloader::register(); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="es"> <head> <title>Probando jQuery 4 PHP</title> <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css" media="all"> #micapa{ width: 200px; padding: 10px; border: 1px solid #ccc; background-color: #336; color: #fff; position: absolute; top: 200px; left: 0; font-size: 10px; font-family: verdana; } </style> </head> <body> <h1>Probando el jQuery para PHP</h1> <button id="miboton">Anima de otra manera!</button> <button id="ocultar">Ocultar</button> <button id="mostrar">Mostrar</button> <div id="micapa">Esta capa se mueve</div> <?php echo YsJQuery::newInstance() ->execute( YsJQuery::animate() ->in("#micapa") ->properties(array( "left"=>"400px", "top"=>"40px" )) ->duration(YsJQueryConstant::SLOW) );

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

echo YsJQuery::newInstance() ->onClick() ->in("#miboton") ->execute( YsJQuery::animate() ->in("#micapa") ->properties(array( 'fontSize'=>'28px', 'width'=>'300px' )) ->duration(YsJQueryConstant::SLOW) ); echo YsJQuery::newInstance() ->onClick() ->in("#ocultar") ->execute( YsJQuery::fadeOut() ->in("#micapa") ->duration(YsJQueryConstant::SLOW) ); echo YsJQuery::newInstance() ->onClick() ->in("#mostrar") ->execute( YsJQuery::fadeIn() ->in("#micapa") ->duration(YsJQueryConstant::SLOW) ); ?> </body> </html>

Puedes ver el ejemplo en marcha en una pgina aparte. En el siguiente artculo vamos a hacer otra prctica interesante con jQuery4PHP, en la que veremos cmo realizar un Ajax con PHP.
Artculo por

Miguel Angel Alvarez

Ajax con PHP usando jQuery4PHP

Cmo realizar Ajax directamente desde cdigo PHP utilizando las funciones de jQuery que tenemos a , nuestra disposicin con jQuery4PHP . Uno de los usos ms interesantes que nos ofrece un framework Javascript, como jQuery, es la realizacin de scripts que trabajan con la tecnologa Ajax de una manera cmoda y compatible con todos los navegadores. En este artculo veremos cmo realizar Ajax sin salirnos de PHP, lo que es una autntica maravilla para las personas que dominan este lenguaje de programacin del lado del servidor, pero que no conocen para nada Javascript. Con jQuery tenemos a nuestra disposicin diversos modos de realizacin de scripts Ajax, unos ms simples que otros. El mtodo load() jQuery, al que podemos invocar desde PHP gracias a jQuery4PHP, tiene la capacidad de realizar una llamada Ajax con una sola lnea de cdigo! En el caso de utilizarlo desde PHP la cosa se complica un poco, pero aun as es infinitamente ms simple que si tuviramos que realizar el Ajax a mano.

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

10

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Nota: Puedes ver la introduccin a jQuery4PHP, con las explicaciones iniciales que necesitars conocer para poder entender este artculo en el Manual de jQuery4PHP.

Si lo deseas, puedes comenzar por ver en marcha el ejemplo que vamos a realizar para ilustrar el trabajo con Ajax desde estas libreras. En este ejemplo tenemos una capa y un botn:
<button id="miboton">Carga con Ajax!!</button> <div id="micapa"></div>

Al pulsar el botn queremos acceder a un archivo por Ajax y mostrar su contenido dentro de la capa. Para ello utilizaramos el siguiente cdigo PHP.
<?php echo YsJQuery::newInstance() ->onClick() ->in("#miboton") ->execute( YsJQuery::load( "contenido-ajax.php" ) ->in("#micapa") ); ?>

Como se puede ver, si es que vamos entendiendo las libreras jQuery4PHP, estamos definiendo un evento click y lo hacemos sobre el botn anterior, con id="miboton". Una vez se pulse clic se realiza una llamada al mtodo load() de jQuery (que carga un contenido por medio de la tecnologa Ajax). La URL que se desea acceder por Ajax se enva como parmetro al mtodo load(), que en este caso es el archivo "contenidoajax.php", que estar en el mismo directorio que la pgina que tiene el script PHP que estamos creando. Luego, indicamos con el mtodo in() sobre la llamada a load(), que el contenido que haba en ese archivo se debe volcar en la capa con id="micapa". Quizs el cdigo PHP que tenemos que escribir para hacer Ajax utilizando jQuery4PHP no es tan claro como si estuvisemos escribiendo cdigo Javascript directamente con jQuery, pero al menos las personas que dominan PHP podrn hacer todo este proceso sin tener que preocuparse por aprender Javascript y saber cmo interactuan estos dos lenguajes de programacin.
Nota: Otra opcin muy interesante para las personas que desean hacer Ajax directamente desde PHP, sin tener que aprender Javascript, es utilizar las libreras xAjax. Se trata de un framework bastante sencillo, para hacer Ajax y muchas otras cosas que deberamos programar con Javascript, pero sin tener que salirnos de PHP. Todo ello lo puedes aprender desde el Manual de xAjax publicado en DesarrolloWeb.com.

Podemos ver el cdigo fuente completo de este ejercicio a continuacin.

<?php include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php'); YsJQueryAutoloader::register(); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="es"> <head> <title>Probando jQuery 4 PHP</title> <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css" media="all"> #micapa{ font-size: 14px; font-family: verdana; } </style>

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

11

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

</head> <body> <h1>Probando el ajax de jQuery4PHP</h1> <button id="miboton">Carga con Ajax!!</button> <div id="micapa"></div> <?php echo YsJQuery::newInstance() ->onClick() ->in("#miboton") ->execute( YsJQuery::load( "contenido-ajax.php" ) ->in("#micapa") ); ?> </body> </html>

Puedes ver cmo ha quedado este script en una pgina aparte. Adems, dejamos el cdigo del archivo contenido-ajax.php, puesto que tiene un detalle interesante que puede ahorrarnos algn dolor de cabeza. Se trata que las conexiones Ajax funcionan siempre en UTF-8 y si nosotros estamos codificando en otro juego de caracteres, los acentos no se vern bien. Por ello, al enviar desde un archivo PHP texto, que sepamos que va a ser recibido a travs de Ajax, tenemos que asegurarnos de estar trabajando en UTF-8.
<?php echo utf8_encode("hola esto est en un archivo PHP aparte!!!"); ?>

Como se puede ver, el texto que enviamos desde el archivo contenido-ajax.php se pasa antes por la funcin utf8_encode() de PHP, que lo convierte a UTF-8. Obviamente, este ejemplo se puede complicar todo lo que queramos, a medida que nuestras necesidades sean distintas y en futuros artculos explicaremos algunas de las cosas tpicas que desearemos hacer con Ajax. Para empezar, se puede leer el prximo artculo, en el que explicaremos cmo enviar datos desde PHP a las pginas que deseamos acceder por Ajax.
Artculo por

Miguel Angel Alvarez

Cmo enviar datos por POST a pginas Ajax con jQuery4PHP

Cmo se pueden enviar datos a pginas PHP a travs de POST, que accedemos por Ajax utilizando el , framework jQuery4PHP . El framework Javascript jQuery tiene muchas formas de trabajar con Ajax y estamos revisando, a travs de ejemplos, algunas de las ms sencillas. Todo ello lo estamos explicando en el Manual de jQuery para PHP y en concreto en el artculo anterior comenzamos a explicar el modo de trabajo utilizando la tecnologa Ajax, que tenemos que implementar para usar jQuery desde PHP con las libreras jQuery4PHP. Seguramente, durante nuestro trabajo con Ajax, en algn momento necesitemos enviar datos a las pginas que estamos accediendo. El envo de datos no tiene mucho misterio y simplemente se debe indicar como un parmetro adicional en la llamada al mtodo load(), utilizado para cargar un contenido por Ajax. Eso es as en jQuery y tambin en las libreras jQuery4PHP. En este artculo veremos un ejemplos sencillo de trabajo con Ajax y envo de datos por POST. Tendremos dos botones que invocan por Ajax a la misma pgina. En uno de ellos enviaremos un dato por POST y en otro enviaremos un valor distinto.

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

12

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com De ese modo demostraremos lo sencillo que es realizar un script en PHP que accede a una pgina por Ajax y que muestra datos diferentes segn lo que se le enve. El ejemplo se puede ver en marcha para hacerse una idea exacta de lo que vamos a realizar. Podemos comenzar echando un vistazo a los botones que pondrn en marcha las solicitudes Ajax y la capa donde mostraremos los resultados de las mismas.
<button id="miboton2">Carga con Ajax pasando el dato "nombre=pepe"!!</button> <button id="miboton3">Carga con Ajax pasando el dato "nombre=Julin Lpez"!!</button> <div id="micapa2"></div>

A continuacin podemos ver cmo se envan esos valores a una pgina a travs de los siguientes scripts jQuery4PHP.
<?php echo YsJQuery::newInstance() ->onClick() ->in("#miboton2") ->execute( YsJQuery::load( "contenido-ajax2.php", array( "nombre" => urlencode("pepe") ) ) ->in("#micapa2") ); echo YsJQuery::newInstance() ->onClick() ->in("#miboton3") ->execute( YsJQuery::load( "contenido-ajax2.php", array( "nombre" => "Julin Lpez" ) ) ->in("#micapa2") ); ?>

Como se habr podio ver, se realizan dos eventos para cada uno de los dos botones vistos anteriormente. El script es casi idntico al que vimos en el ejemplo anterior sobre Ajax en jQuery4PHP, con la diferencia que ahora estamos enviando datos por POST. Los datos que se envan se deben indicar como parmetro en la llamada al mtodo load() y como se est viendo, se indican en un array asociativo. Hay que fijarse que en cada uno de los dos eventos producidos se indica el mismo ndice ("nombre") en el array asociativo, pero se envan dos valores distintos. La pgina que se solicita por Ajax es la misma en los dos botones y se llama contenido-ajax2.php. Su cdigo lo podemos ver a continuacin.
<?php echo utf8_encode("Ya est!! El dato que recibo en la variable nombre es: ") . $_POST["nombre"]; ?>

Como estamos viendo, se hace un tratamiento para asegurarnos que el texto que se escribe desde PHP utilice el juego de caracteres UTF-8. Pero el dato que nos llega por el $_POST no se convierte a UTF-8 porque realmente ya nos haba llegado con ese formato. Para acabar, colocamos el cdigo completo de la pgina que hace la solicitud por Ajax.
<?php include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php'); YsJQueryAutoloader::register(); ?>

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

13

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="es"> <head> <title>Probando jQuery 4 PHP</title> <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css" media="all"> #micapa{ font-size: 14px; font-family: verdana; } </style> </head> <body> <h1>Probando el ajax de jQuery4PHP</h1> <button id="miboton2">Carga con Ajax pasando el dato "nombre=pepe"!!</button> <button id="miboton3">Carga con Ajax pasando el dato "nombre=Julin Lpez"!!</button> <div id="micapa2"></div> <?php echo YsJQuery::newInstance() ->onClick() ->in("#miboton2") ->execute( YsJQuery::load( "contenido-ajax2.php", array( "nombre" => urlencode("pepe") ) ) ->in("#micapa2") ); echo YsJQuery::newInstance() ->onClick() ->in("#miboton3") ->execute( YsJQuery::load( "contenido-ajax2.php", array( "nombre" => "Julin Lpez" ) ) ->in("#micapa2") ); ?> </body> </html>

Si se desea, puede ser una buena idea ver el ejemplo en marcha. En el artculo siguiente vamos a realizar un paso adicional que nos servir para mostrar un mensaje de carga en el momento que la solicitud Ajax se realiza.
Artculo por

Miguel Angel Alvarez

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

14

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Ajax con mensaje de carga en PHP usando las libreras jQuery4PHP

Cmo hacer un mensaje de cargando, que se muestra al iniciar la solicitud Ajax y se oculta una vez que se ha mostrado la respuesta a esa solicitud, con PHP y jQuery, usando jQuery4PHP . Vamos a continuar explicando cmo realizar Ajax desde aplicaciones PHP, usando jQuery, pero sin necesidad de conocer Javascript. Todo gracias a las libreras que venimos explicando en el Manual de jQuery4PHP. En captulos anteriores aprendimos a hacer sencillos scripts con Ajax y ahora vamos a perfeccionarlos un poquito. Cuando estamos haciendo pginas que usan Ajax, ms tarde o ms temprano vamos a querer hacer un efecto como el que vamos a ver en este artculo. Se trata de hacer un mensaje de aviso de carga de datos, que se muestre cuando se inicia la solicitud Ajax y se oculte cuando se haya recibido ya la respuesta. Los mensajes de carga son tpicos en las aplicaciones Ajax y estoy seguro que el lector los conoce. No obstante, se puede ver en una pgina aparte el resultado de lo que vamos a construir. En este caso vamos a utilizar tres elementos de HTML, un botn para iniciar el proceso, una capa donde mostrar el resultado de la solicitud Ajax y otra capa con el mensaje de carga.
<button id="miboton">Carga con Ajax!!</button> <div id="micapa"></div> <div id="capacargando">Cargando...</div>

La capa con el mensaje de carga est inicialmente oculta por medio de CSS.
#capacargando { display: none; }

El script PHP que vamos a realizar ser ms complejo que en otros ejemplos anteriores, ya que cuando se pulse el botn tendremos que hacer varias cosas, como iniciar la solicitud Ajax y mostrar el mensaje de carga.
echo YsJQuery::newInstance() ->onClick() ->in("#miboton") ->execute( //muestro el mensaje de carga YsJQuery::css() ->in("#capacargando") ->propertyName("display") ->value("block") , //borro cualquier cosa que haya en la capa donde mostrar el resultado YsJQuery::html("") ->in("#micapa") , //inicio la solicitud ajax YsJQuery::load( "contenido-ajax-retardo.php" ) ->in("#micapa") //cuando acabe la solicitud, oculto el mensaje de carga ->callback( new YsJsFunction( YsJQuery::css() ->in("#capacargando") ->propertyName("display") ->value("none") ) ) )

Hemos comentado el cdigo para que se entiendan los pasos que se han realizado cada vez que se pulsa el botn. No

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

15

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com obstante, es interesante que se perciban varias cosas adicionales. Si quieres realizar varias cosas dentro de un execute(), como ese que tenemos al principio del cdigo, tienes que separarlas por comas ",". Hazte a la idea que las sentencias a ejecutar con un execute() son parmetros del mtodo execute(). Sabemos cundo ha terminado una solicitud Ajax haciendo una funcin callback() en el mtodo load(), que se ejecutar cuando se hayan recibido los datos.

Nota: Las funciones callback se pueden implementar en cualquier mtodo jQuery y son funciones que se ejecutan siempre cuando la ejecucin de ese mtodo haya finalizado. Ver el Manual de jQuery para ms explicaciones.

El cdigo fuente completo de este ejercicio se puede ver a continuacin:

<?php include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php'); YsJQueryAutoloader::register(); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="es"> <head> <title>Probando jQuery 4 PHP</title> <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css" media="all"> #micapa{ font-size: 14px; font-family: verdana; } #capacargando { display: none; } </style> </head> <body> <h1>Probando el ajax de jQuery4PHP</h1> <button id="miboton">Carga con Ajax!!</button> <div id="micapa"></div> <div id="capacargando">Cargando...</div> <?php echo YsJQuery::newInstance() ->onClick() ->in("#miboton") ->execute( //muestro el mensaje de carga YsJQuery::css() ->in("#capacargando") ->propertyName("display") ->value("block") , //borro cualquier cosa que haya en la capa donde mostrar el resultado YsJQuery::html("") ->in("#micapa") , //inicio la solicitud ajax YsJQuery::load( "contenido-ajax-retardo.php" ) ->in("#micapa") //cuando acabe la solicitud, oculto el mensaje de carga ->callback( new YsJsFunction( YsJQuery::css() ->in("#capacargando") ->propertyName("display")

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

16

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

->value("none") ) ) ?> </body> </html> )

Ahora podemos ver el cdigo fuente de contenido-ajax-retardo.php, que es la pgina que solicitamos con Ajax. Realmente no tiene nada que no sepamos, pero queremos mostrar que le hemos puesto una llamada a la funcin sleep() para producir un retardo de 3 segundos en la respuesta.
<?php sleep(3); echo utf8_encode("Esta respuesta tard 3 segundos en producirse"); ?>

Eso es todo y se puede ver en funcionamiento en una pgina aparte.

Artculo por

Miguel Angel Alvarez

Libreras jQuery4PHP: jQuery desde PHP: www.desarrolloweb.com/manuales/librerias-jquery4php.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

17