manual de jquery4php completo

Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

Librerías jQuery4PHP: jQuery desde PHPManual de las librerías 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 AlvarezDirector de DesarrolloWeb.comhttp://www.desarrolloweb.com (7 capítulos)

Librerías 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 autorización.

1

http://www.desarrolloweb.com/

http://www.desarrolloweb.com/manuales/librerias-jquery4php.html



jQuery4PHP: jQuery para PHPLibrería PHP 5 que pone a la disposición de los programadores en PHP todas las funcionalidades de jQuery y jQueryUI.

Vamos a presentar y realizar diversas demostraciones de uso de unas librerías que estamos seguros gustarán a más 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 código PHP.

Seguro que hay muchos desarrolladores que tienen conocimientos de PHP pero que no gozan de soltura en la programación con Javascript. Quizás tú seas uno de ellos y hayas oído hablar de jQuery, un framework que permite hacer cosas realmente sorprendentes con los elementos de las webs, para producir páginas 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, están dirigidas las librerías que vamos a relatar. Digamos que son un puente entre las páginas dinámicas del servidor con PHP y las páginas dinámicas del cliente, que permitirán 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 próximos artículos veremos cómo se podrá realizar esta tarea y realizaremos varios ejemplos sencillos que nos ayudarán a dar nuestros primeros pasos con jQuery4PHP (jQuery para PHP).

Nota: Aprender Javascript está al alcance de cualquier persona que sepa PHP. En nuestra opinión, Javascript es todavía más sencillo de utilizar que PHP, así que si lo deseas, no deberías tener ningún problema en aprender el lenguaje de programación del lado del cliente. Para ello te recomendamos accede a la sección Javascript a Fondo. Además, 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 librerías jQuery4PHP, pero claro que esto lo afirmo después de más de 10 años programando en Javascript y un par de ellos de experiencia con jQuery. No obstante, opino que para una persona que domine PHP puede resultarle más rápido aprender a usar estas librerías que aprender a usar Javascript y jQuery.

Hasta el momento hemos podido realizar ejemplos sencillos con jQuery4PHP sin demasiadas complicaciones y con buenos y rápidos resultados. Ahora bien, si la cosa se complica mucho en el futuro y se desean hacer scripts más complejos, quizás 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 jQuery4PHPLas personas que deseen utilizar estas librerías tienen que empezar por la descarga de los scripts PHP que serán 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 versión de las librerías.

Comprobaremos que la descarga nos ofrece ya diversos ejemplos de uso de las librerías, que nos pueden ofrecer un vistazo rápido a las posibilidades de jQuery4PHP. Además, accediendo a la página de inicio de las librerías tendremos también la oportunidad de ver varios ejemplos y una explicación rápida sobre sus posibilidades.

El el próximo artículo mostraremos cómo realizar una página que utilice las librerías jQuery4PHP para programar con jQuery desde PHP.

Artículo por Miguel Angel Alvarez


2



http://www.desarrolloweb.com/articulos/primera-pagina-jquery4php.html


http://jquery4php.sourceforge.net/

http://www.desarrolloweb.com/manuales/manual-jquery.html

http://www.desarrolloweb.com/javascript/


Primera página con jQuery4PHPRealizamos un primer ejemplo con las librerías jQuery4PHP, para la programación en Javascript y jQuery desde código PHP.

En el ejemplo anterior explicamos por encima qué eran las librerías jQuery4PHP y ofrecimos el link a la página de producto donde podemos descargarlas. Ahora vamos a crear nuestro primer ejemplo, lo más básico posible para comenzar por algo sencillo.

Queremos señalar que sobre todo estos primeros ejemplos están sacados de la propia documentación de jQuery4PHP. Nosotros nos hemos dedicado a traducirlos y adaptarlos a nuestra propia forma de explicar las cosas. No obstante, recomendamos acceder a la página de jQuery4PHP donde encontraremos toda la documentación de las librerías.

Vamos a ver una receta paso por paso para realizar nuestro primer ejemplo.

Descarga de las libreríasComo habíamos dicho anteriormente, necesitamos descargar las librerías. En la descarga ya tenemos los archivos PHP para hacer de puente con jQuery y la propia librería de jQuery que debemos también disponer para que todo funcione.

Incluir las liberías PHPEn el código de la página PHP donde queramos utilizar jQuery4PHP tenemos que hacer un include de las librerías jQuery4PHP. Para ello tenemos que utilizar un código como este: <?php include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php');YsJQueryAutoloader::register();?> Para que funcione bien, prestar atención a la ruta del include, que sea la correcta y que dependerá de dónde hayáis colocado las librerías descargadas.

Incluir jQueryAhora tenemos que incluir el framework Javascript jQuery y para ello tenemos que utilizar la etiqueta SCRIPT para cargar el código Javascript a las librerías de jQuery. Este "include" se suele hacer dentro del HEAD de la página. <head> <title>Probando jQuery 4 PHP</title> <script type="text/javascript" src="js/jquery.min.js"></script></head> También debemos asegurarnos que la ruta a este archivo Javascript sea la correcta (js/jquery.min.js).

Hacer un elemento, para aplicarle JavascriptAhora vamos a colocar un poco de HTML, para colocar un elemento al que luego le aplicaremos Javascript por medio de las librerías jQuery4PHP. Puede ser cualquier tipo de elemento. Nosotros hemos escogido un botón. <button type="button" id="miboton">Pulsame</button> Por favor, fíjate que el botón tiene un atributo id="miboton", que utilizaremos más tarde para referirnos a él.

Código PHP para generar un mensaje Hola MundoAhora vamos a ver el código PHP que necesitaríamos para generar el típico mensaje de "Hola Mundo", que se mostrará al pulsar el botón anterior.


3



http://jquery4php.sourceforge.net/


<?phpecho YsJQuery::newInstance() ->onClick() ->in('#miboton') ->execute('alert("Hola mundo!")')?> Comienza con una sentencia "echo", que es importante para que se escriba en la página el código Javascript que PHP generará según nuestras instrucciones.

Luego seguimos haciendo una llamada a un método estático: YsJQuery::newInstance() Con ese código creamos una nueva instancia de la clase necesaria para hacer jQuery y luego aplicamos varios métodos para cumplir nuestros objetivos. Primero le decimos que queremos definir un evento click. ->onClick() Luego decimos que el evento se realizará sobre el botón y para ello hacemos una llamada al método in() y le pasamos el selector para el botón. Ese selector se hace a través del atributo id del botón. 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 diálogo tipo alert. ->execute('alert("Hola mundo!")')

Y ya estáCon esto hemos terminado nuestro ejemplo. Quizás está bien aclarar que esto no tiene mucho todavía de jQuery, pero de momento está bien para ir familiarizándonos sobre el modo de trabajo con jQuery4PHP.

Habrás podido observar que el código PHP para comunicar con las librerías jQuery4PHP es un poco particular. Realmente no tiene nada que no hayas podido conocer si trabajas con programación orientada a objetos en PHP, pero quizás te aclararías mejor si vieses un código como este, que es más largo, pero que utiliza una sintaxis PHP que posiblemente te sea más familiar. <button type="button" id="boton2">Pulsame también</button><?php$instancia = YsJQuery::newInstance();$instancia->onClick();$instancia->in('#boton2');$instancia->execute('document.bgColor="#ff8800"');$instancia->write();?> En este segundo ejemplo además tenemos una diferencia, que en vez de iniciar todo con un "echo" de PHP, llamamos al acabar el código al método write() para escribir el Javascript generado en la página.

Nota: en la documentación recomiendan utilizar el echo al principio en vez de la llamada a write() al final, pero no especifican el por qué.

Código completoPuedes ver a continuación el código 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"


4




"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 también</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.


Otra manera de escribir eventos en jQuery4PHPEn la documentación de jQuery4PHP nos ofrecen otra manera de escribir el código de eventos que ellos llaman método estático.

Estamos ofreciendo una serie de artículos prácticos para enseñar a manejar las librerías jQuery4PHP. En artículos anteriores ofrecimos ya una pequeña introducción a las librerías. y un primer ejemplo de uso relatado paso por paso.

En el presente artículo vamos a trabajar todavía con ejemplos bien sencillos, pero nos introduciremos un poco más en las interesantes posibilidades que nos ofrece jQuery. Veremos cómo desde PHP podemos hacer cosas tan interesantes como alterar las propiedades CSS de los elementos de la página.

Además, repasaremos un método alternativo que nos ofrecen en la documentación para definir eventos en elementos de la página, que se llama método estático.

Nota: Recordemos que para comenzar debemos incluir las librerías PHP de jQuery4PHP y la propia librería Javascript de jQuery. Todo eso lo vimos en el artículo Primera página con jQuery4PHP.

Método estático de definir eventos con jQuery4PHPEl método estático se llama así porque se utiliza un método estático para definir el evento que deseemos. Por tanto, existe un método estático para cada manejador de evento.


5





http://www.desarrolloweb.com/articulos/jquery4php.html

http://www.desarrolloweb.com/articulos/ejemplos/jquery4php/public_html/pruebas-miguel.php


Por ejemplo, si deseamos definir un evento click, utilizaremos el método estático click(), de esta manera: YsJQuery::click() A continuación tendremos que definir sobre qué elemento se asocia el evento y la función a ejecutar cuando se produzca.

Nota: Antes (ver artículo anterior) comenzábamos todo con otro método estático:

YsJQuery::newInstance();

A partir de aquí, sobre la instancia generada, utilizábamos métodos normales para definir eventos o ejecutar código. Pero en realidad es todo muy parecido.

Para ilustrar cómo definir eventos con método estático vamos a realizar un ejemplo sencillo, que sirve para alterar el color de fondo de un elemento cuando pasamos el ratón por encima.

Podemos comenzar por ver ejemplo en marcha.

Durante este ejemplo aprenderemos también a invocar uno de los métodos de jQuery, css() que sirve para alterar el valor de los atributos CSS de los elementos de la página. 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 método estático mouseover(), para definir un evento onMouseOver.

Luego se define que el evento se debe asociar al elemento con identificador "micapa". Más tarde definimos la función a ejecutar cuando se produzca el evento, con el método handler().

El paso de cambiar un atributo CSS del elemento es especialmente interesante. Para ello utilizamos el método estático css(). Sobre ese método tenemos que definir cosas como el elemento que queremos actualizar, la propiedad CSS a cambiar y el nuevo valor a colocar.

Con el método estático de definición de eventos debemos acabar invocando al método execute().

Ahora podemos ver también el código del evento onMouseOut. echo YsJQuery::mouseout() ->in('#micapa') ->handler( YsJQuery::css() ->inVar("this") ->propertyName("background-color") ->value("#99f") ) ->execute() Es exactamente igual, sólo que estamos alterando la propiedad background-color a otro valor.

Podemos ver el código completo del ejemploAhora veamos el código completo de este ejemplo de jQuery4PHP. <?php include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php');YsJQueryAutoloader::register();


6



http://www.desarrolloweb.com/articulos/ejemplos/jquery4php/public_html/pruebas-eventos-static.php


?>

<!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 ratón 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 todavía no ha sido muy espectacular, más aun si sabemos que este efecto se podría haber realizado sólo con Hojas de Estilo en Cascada, con los pseudoElementos hover. Pero bueno, al menos hemos conocido uno de los métodos más importantes de jQuery que es el método CSS, con el que podremos cambiar las propiedades CSS de cualquier elemento de la página.

En el próximo artículo vamos a tratar cosas un poco más interesantes, puesto que empezaremos a ver la realización de efectos dinámicos sencillos con jQuery4PHP.



7



http://www.desarrolloweb.com/articulos/1956.php

http://www.desarrolloweb.com/articulos/ejemplos/jquery4php/public_html/pruebas-eventos-static.php


Efectos sencillos con jQuery4PHPVamos a realizar un ejemplo con algunos efectos sencillos que se pueden hacer en jQuery, pero programados enteramente sobre PHP.

En este artículo vamos a empezar a ver las posibilidades de jQuery para la realización de cosas un poco más espectaculares. El trabajo con jQuery4PHP ya lo hemos empezado a relatar en artículos anteriores del Manual de jQuery4PHP, así que recomendamos su lectura si aun no se había realizado.

Veremos a continuación cómo realizar efectos sencillos para animación de elementos de la página. Decimos que son sencillos porque se pueden hacer con llamadas a simples métodos de jQuery, pero si tenemos una ligera idea sobre Javascript, podremos saber que estos efectos no tendrían nada de sencillos si no estuviéramos 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 código PHP para animarla. Comenzaremos por ver un código que se ejecutará cuando el usuario cargue la página, sin que se tenga que pulsar ningún botón. echoYsJQuery::newInstance() ->execute( YsJQuery::animate() ->in("#micapa") ->properties(array( "left"=>"400px", "top"=>"40px" )) ->duration(YsJQueryConstant::SLOW) ); Como vemos el método ejecute() nos sirve para ejecutar código directamente.

Dentro del execute() hacemos una llamada al método animate(), que será el encargado de generar esa animación. Básicamente lo que le indicamos es que la animación 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 página).

Ahora vamos a ver cómo se realizaría una animación similar, pero como respuesta a la pulsación de un botón. Para ello definimos un evento y ejecutamos el código sólo cuando se produzca ese evento. echoYsJQuery::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 todavía más simples, pero también bastante visuales. Se ejecutarán como respuesta al evento click sobre otros botones de la página. En este primer caso hacemos un efecto de fundido, de opaco a transparente, con lo que haremos que desaparezca la capa "micapa". echoYsJQuery::newInstance() ->onClick() ->in("#ocultar") ->execute( YsJQuery::fadeOut() ->in("#micapa")


8





->duration(YsJQueryConstant::SLOW) ); Con este otro código haremos un efecto de fundido de transparente a opaco, con lo que conseguiremos que la capa se vuelva a mostrar. echoYsJQuery::newInstance() ->onClick() ->in("#mostrar") ->execute( YsJQuery::fadeIn() ->in("#micapa") ->duration(YsJQueryConstant::SLOW) );

Nota: Para entender bien estos ejemplos quizás sea necesario, o al menos sí recomendable, conocer un poco de jQuery y para ello recomendamos acceder al Manual de jQuery, en la sección que habla de efectos.

Para acabar, ponemos el código completo de esta práctica 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) );


9





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 página aparte.

En el siguiente artículo vamos a hacer otra práctica interesante con jQuery4PHP, en la que veremos cómo realizar un Ajax con PHP.


Ajax con PHP usando jQuery4PHPCómo realizar Ajax directamente desde código PHP, utilizando las funciones de jQuery que tenemos a nuestra disposición con jQuery4PHP.

Uno de los usos más interesantes que nos ofrece un framework Javascript, como jQuery, es la realización de scripts que trabajan con la tecnología Ajax de una manera cómoda y compatible con todos los navegadores. En este artículo veremos cómo realizar Ajax sin salirnos de PHP, lo que es una auténtica maravilla para las personas que dominan este lenguaje de programación del lado del servidor, pero que no conocen para nada Javascript.

Con jQuery tenemos a nuestra disposición diversos modos de realización de scripts Ajax, unos más simples que otros. El método load() jQuery, al que podemos invocar desde PHP gracias a jQuery4PHP, tiene la capacidad de realizar una llamada Ajax con una sola línea de código! En el caso de utilizarlo desde PHP la cosa se complica un poco, pero aun así es infinitamente más simple que si tuviéramos que realizar el Ajax a mano.


10



http://www.desarrolloweb.com/articulos/ajax-jquery4php.html


http://www.desarrolloweb.com/articulos/ejemplos/jquery4php/public_html/pruebas-animacion.php


Nota: Puedes ver la introducción a jQuery4PHP, con las explicaciones iniciales que necesitarás conocer para poder entender este artículo 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 librerías.

En este ejemplo tenemos una capa y un botón: <button id="miboton">Carga con Ajax!!</button><div id="micapa"></div> Al pulsar el botón queremos acceder a un archivo por Ajax y mostrar su contenido dentro de la capa. Para ello utilizaríamos el siguiente código PHP. <?phpechoYsJQuery::newInstance() ->onClick() ->in("#miboton") ->execute( YsJQuery::load( "contenido-ajax.php" ) ->in("#micapa") );

?> Como se puede ver, si es que vamos entendiendo las librerías jQuery4PHP, estamos definiendo un evento click y lo hacemos sobre el botón anterior, con id="miboton". Una vez se pulse clic se realiza una llamada al método load() de jQuery (que carga un contenido por medio de la tecnología Ajax).

La URL que se desea acceder por Ajax se envía como parámetro al método load(), que en este caso es el archivo "contenido-ajax.php", que estará en el mismo directorio que la página que tiene el script PHP que estamos creando. Luego, indicamos con el método in() sobre la llamada a load(), que el contenido que había en ese archivo se debe volcar en la capa con id="micapa".

Quizás el código PHP que tenemos que escribir para hacer Ajax utilizando jQuery4PHP no es tan claro como si estuviésemos escribiendo código Javascript directamente con jQuery, pero al menos las personas que dominan PHP podrán hacer todo este proceso sin tener que preocuparse por aprender Javascript y saber cómo interactuan estos dos lenguajes de programación.

Nota: Otra opción muy interesante para las personas que desean hacer Ajax directamente desde PHP, sin tener que aprender Javascript, es utilizar las librerías xAjax. Se trata de un framework bastante sencillo, para hacer Ajax y muchas otras cosas que deberíamos 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 código fuente completo de este ejercicio a continuación. <?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>


11



http://www.desarrolloweb.com/manuales/xajax.html

http://www.desarrolloweb.com/articulos/ejemplos/jquery4php/public_html/pruebas-ajax.php




</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 cómo ha quedado este script en una página aparte.

Además, dejamos el código del archivo contenido-ajax.php, puesto que tiene un detalle interesante que puede ahorrarnos algún 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 verán bien. Por ello, al enviar desde un archivo PHP texto, que sepamos que va a ser recibido a través de Ajax, tenemos que asegurarnos de estar trabajando en UTF-8. <?phpecho 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 función 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 artículos explicaremos algunas de las cosas típicas que desearemos hacer con Ajax. Para empezar, se puede leer el próximo artículo, en el que explicaremos cómo enviar datos desde PHP a las páginas que deseamos acceder por Ajax.


Cómo enviar datos por POST a páginas Ajax con jQuery4PHPCómo se pueden enviar datos a páginas PHP, a través 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 través de ejemplos, algunas de las más sencillas. Todo ello lo estamos explicando en el Manual de jQuery para PHP y en concreto en el artículo anterior comenzamos a explicar el modo de trabajo utilizando la tecnología Ajax, que tenemos que implementar para usar jQuery desde PHP con las librerías jQuery4PHP.

Seguramente, durante nuestro trabajo con Ajax, en algún momento necesitemos enviar datos a las páginas que estamos accediendo. El envío de datos no tiene mucho misterio y simplemente se debe indicar como un parámetro adicional en la llamada al método load(), utilizado para cargar un contenido por Ajax. Eso es así en jQuery y también en las librerías jQuery4PHP.

En este artículo veremos un ejemplos sencillo de trabajo con Ajax y envío de datos por POST. Tendremos dos botones que invocan por Ajax a la misma página. En uno de ellos enviaremos un dato por POST y en otro enviaremos un valor distinto.


12





http://www.desarrolloweb.com/articulos/enviar-datos-post-aja-jquery4php.html



De ese modo demostraremos lo sencillo que es realizar un script en PHP que accede a una página por Ajax y que muestra datos diferentes según lo que se le envíe.

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 pondrán 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=Julián López"!!</button><div id="micapa2"></div> A continuación podemos ver cómo se envían esos valores a una página a través de los siguientes scripts jQuery4PHP. <?phpechoYsJQuery::newInstance() ->onClick() ->in("#miboton2") ->execute( YsJQuery::load( "contenido-ajax2.php", array( "nombre" => urlencode("pepe") ) ) ->in("#micapa2") );

echoYsJQuery::newInstance() ->onClick() ->in("#miboton3") ->execute( YsJQuery::load( "contenido-ajax2.php", array( "nombre" => "Julián López" ) ) ->in("#micapa2") );?> Como se habrá podio ver, se realizan dos eventos para cada uno de los dos botones vistos anteriormente. El script es casi idéntico 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 envían se deben indicar como parámetro en la llamada al método 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 envían dos valores distintos.

La página que se solicita por Ajax es la misma en los dos botones y se llama contenido-ajax2.php. Su código lo podemos ver a continuación. <?phpecho 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 había llegado con ese formato.

Para acabar, colocamos el código completo de la página que hace la solicitud por Ajax. <?php include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php');YsJQueryAutoloader::register();?>


13




http://www.desarrolloweb.com/articulos/ejemplos/jquery4php/public_html/pruebas-ajax-envio-datos.php


<!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=Julián López"!!</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" => "Julián López" ) ) ->in("#micapa2") ); ?></body></html> Si se desea, puede ser una buena idea ver el ejemplo en marcha.

En el artículo 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.



14



http://www.desarrolloweb.com/articulos/mensaje-carga-ajax-jquery4php.html

http://www.desarrolloweb.com/articulos/mensaje-carga-ajax-jquery4php.html

http://www.desarrolloweb.com/articulos/ejemplos/jquery4php/public_html/pruebas-ajax-envio-datos.php


Ajax con mensaje de carga en PHP usando las librerías jQuery4PHPCómo 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 cómo realizar Ajax desde aplicaciones PHP, usando jQuery, pero sin necesidad de conocer Javascript. Todo gracias a las librerías que venimos explicando en el Manual de jQuery4PHP. En capítulos anteriores aprendimos a hacer sencillos scripts con Ajax y ahora vamos a perfeccionarlos un poquito.

Cuando estamos haciendo páginas que usan Ajax, más tarde o más temprano vamos a querer hacer un efecto como el que vamos a ver en este artículo. 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 típicos en las aplicaciones Ajax y estoy seguro que el lector los conoce. No obstante, se puede ver en una página aparte el resultado de lo que vamos a construir.

En este caso vamos a utilizar tres elementos de HTML, un botón 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á más complejo que en otros ejemplos anteriores, ya que cuando se pulse el botón tendremos que hacer varias cosas, como iniciar la solicitud Ajax y mostrar el mensaje de carga. echoYsJQuery::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 código para que se entiendan los pasos que se han realizado cada vez que se pulsa el botón. No


15



http://www.desarrolloweb.com/articulos/ejemplos/jquery4php/public_html/pruebas-ajax-cargando.php





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 código, tienes que separarlas por comas ",". Hazte a la idea que las sentencias a ejecutar con un execute() son parámetros del método execute().

• Sabemos cuándo ha terminado una solicitud Ajax haciendo una función callback() en el método load(), que se ejecutará cuando se hayan recibido los datos.

Nota: Las funciones callback se pueden implementar en cualquier método jQuery y son funciones que se ejecutan siempre cuando la ejecución de ese método haya finalizado. Ver el Manual de jQuery para más explicaciones.

El código fuente completo de este ejercicio se puede ver a continuación: <?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")


16





->value("none") ) ) )

?> </body></html> Ahora podemos ver el código fuente de contenido-ajax-retardo.php, que es la página que solicitamos con Ajax. Realmente no tiene nada que no sepamos, pero queremos mostrar que le hemos puesto una llamada a la función sleep() para producir un retardo de 3 segundos en la respuesta. <?phpsleep(3);echo utf8_encode("Esta respuesta tardó 3 segundos en producirse");?> Eso es todo y se puede ver en funcionamiento en una página aparte.



17




manual de jquery4php completo

Documents