Symfony 1.4, jQuery y Ajax

Habiendo dejado mucho tiempo de escribir artículos sobre Symfony me gustaría hablarles hoy sobre la utilización de Ajax con jQuery dentro de nuestro Framework PHP. Antes de leer este artículo recomiendo la lectura de los artículos de la serie de jQuery y Ajax en donde se explica como generar de una manera muy sencilla peticiones asíncronas al servidor utilizando la librería JavaScript jQuery. En estos artículos verán el concepto erróneo que muchas veces tenemos sobre Ajax y entenderán la idea sobre Hijax.

Symfony en sus versiones anteriores contaba con helpers interesantes para la creación de links y formularios utilizando Ajax mediante prototype. Así como existe hoy en día el helper para link_to() existía un link_to_remote() que era capaz de crear el código JavaScript necesario para la llamada Ajax. Con el tiempo, en las versiones más maduras del framework esto fue eliminado y se creó un plugin que utiliza jQuery llamado sfJqueryReloadedPlugin que continúa con las funciones más utilizadas. El enlace al plugin lo pueden encontrar aquí donde podrán ver la documentación necesaria.

La idea de este artículo NO es sobre la utilización del plugin sino sobre cómo ejecutar las llamadas Ajax directamente desde cero para entender la idea y poder hacer lo que necesitemos sin depender del plugin.

Como veíamos en los artículos de la serie sobre jQuery y Ajax, repetimos varias veces que la llamada asíncrona es simplemente un request al servidor y que cualquier cosa que escribamos en la salida estándar de la página procesadora es devuelto como response al cliente. La misma idea la manejaremos aquí ya que nada en absoluto cambia.

Para hacer las pruebas, dentro de un proyecto de Symfony (versión actual 1.4.9), crearemos un action “test” y otro “procesador” en los cuales trabajaremos.

En primer lugar en el archivo view.yml agreguemos el jQuery, de la siguiente manera. Esto va a requerir que copiemos el archivo jquery-1.5.min.js a la carpeta /web/js/

default:
  http_metas:
    content-type: text/html
 
  metas:
    #title:        symfony project
    #description:  symfony project
    #keywords:     symfony, project
    #language:     en
    #robots:       index, follow
 
  stylesheets:    [main.css]
 
  javascripts:    [jquery-1.5.min.js]
 
  has_layout:     true
  layout:         layout

Una vez que tenemos importada la librería del jQuery, creemos nuestros actions, cada uno con un template.

public function executeTest(sfWebRequest $request)
{
 
}
 
public function executeProcesador(sfWebRequest $request)
{
 
}
<a id="test" href="<?php echo url_for('principal/procesador') ?>">Cargar información</a>
 
<div id="container" style="border:1px solid #000;width:300px;height:300px;overflow:auto;"></div>
<h2>Contenido de ejemplo</h2>
 
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>

De esta manera tenemos una action test que contiene un link que usaremos para la llamada Ajax y un DIV que usaremos para cargar el texto de respuesta. Por otro lado un action procesador que lo único que tendrá será un texto aunque perfectamente podría ejecutar una consulta a una base de datos o hacer cualquier otro tipo de acciones.

Ahora podremos probar entrar a las dos páginas y veremos en la primera el link con el DIV y en la segunda el texto que usaremos de ejemplo.

Ahora agreguemos el código JavaScript necesario en la página test para hacer que se cargue el texto de la segunda página dentro de nuestro DIV mediante Ajax.

<script type="text/javascript">
 
    jQuery(document).ready(function(){
 
        jQuery('#test').click(function(){
 
            jQuery('#container').load(this.href);
 
            return false;
 
        });
 
    });
 
</script>
 
<a id="test" href="<?php echo url_for('principal/procesador') ?>">Cargar información</a>
 
<div id="container" style="border:1px solid #000;width:300px;height:300px;overflow:auto;"></div>

Con este código le decimos exactamente lo mismo que hacíamos en los artículos de la serie de jQuery y Ajax. Cuando el document este ready se agrega un listener al link con ID=test para ser ejecutado en el evento click. En ese momento se enviará una petición Ajax al servidor y se cargará la respuesta dentro del div container. No olvidemos el return false para asegurarnos que el link finalmente no se ejecute por el flujo normal. Lo ideal luego sería una vez finalizado que separemos el código JavaScript del HTML y lo importemos mediante los archivos view.yml.

En caso de no necesitar un template para la página procesadora como ahora lo tenemos (procesadorSuccess.php), por ejemplo si necesitara enviar un XML generado para una búsqueda asíncrona, es posible decirle al action que no retorne el template utilizando return sfView::NONE; y enviar nosotros mismos la respuesta de la siguiente manera.

public function executeProcesador(sfWebRequest $request)
{
    //-- Aquí podríamos ejecutar lo necesario para trabajar con la base de datos,
    //   archivos, arrays, lógica de negocios, etc.
 
    $respuesta = '<persona><nombre>John</nombre><apellido>Doe</apellido></persona>';
 
    $this->getResponse()->setContent($respuesta);
 
    return sfView::NONE;
}

De esta manera le decimos que el contenido de respuesta es simplemente lo que enviemos mediante el método setContent() y luego que no retorne el template correspondiente.

En resumen, no hay ninguna diferencia utilizando Ajax con Symfony, simplemente entendiendo que lo que quede escrito en la página viene como respuesta de la petición ya tenemos entendido como funciona. Es interesante notar que el layout principal de la aplicación (apps/frontend/template/layout.php) no forma parte de la respuesta sino solamente el template correspondiente al action que estamos llamando asíncronamente.

Espero que haya sido de utilidad el artículo. Hasta la próxima.

31 Comments

  1. Hola Juan Ardissone

    soy yo nuevamente……es que realmente no doy al traste con esto de symfony y extjs, he descargado la version ext-4.0.2a-gpl.zip, he copiado los .js de extjs para probar al directorio web/js de mi proyecto symfony, he hecho todo lo que se me ha ocurrido y nada, ni error me da lo que hago, porque si al menos me diera algún tipo de error buscaria en base a ese error, pero ni eso……no me hace nada….hermano realmente te pido encarecidamente qe me ayudes con esto, al menos como configurar todo para que me funcione….o un ejemplo…no se con lo que puedas hermano……..de todas maneras ya me haz ayudado bastante…….muchas gracis

    1. Hola Luis. Algunas consultas para tratar de ayudarte.

      Primero, ¿Ya sabes como incluir JavaScript a tu proyecto Symfony? Creando un archivo .js cualquier con un alert(“hola mundo”) ¿ya sabes como utilizarlo con Symfony? Si la respuesta es no te invitaría a leer primeramente los manuales de Symfony y empezar desde ahí. En caso de que ya lo hayas logrado,

      (segunda pregunta) ¿ya sabes como utilizar ExtJS? ¿Ya haz visto la documentación del framework ExtJS como para saber cuales archivos incluir para poder trabajar?

      Por último, todavía no me dijiste que versión de Symfony estás usando.

  2. Que tal compañeros del foro, muchos saludos a [email protected]
    Soy nuevo en symfony, recien llevo 2 semanas estudiando este framework y me parece bastante interesante sabiendo sacarle todo su potencial.

    Tenemos hecho un sistema con symfony 1.4 que tiene dos aplicaciones backend y frontend y ahora tengo que realizar una aplicacion mobile, pero estoy tratando de hacer con lenguaje wml y el symfony parece que no reconoce ese lenguaje y no me sale nada….

    Por favor ayudemen nosé como hacer… Demen algunas ideas…
    Gracias y hasta pronto..

    1. Hola Sheo en realidad esto no es un foro es un blog 🙂

      Hay varios frameworks JavaScript para trabajar con aplicaciones móviles, entre ellos el jQuery mobile que use para un artículo en este blog. Sea cual sea el framework que elijas es independiente a usarlo con Symfony ya que es JavaScript. Tienes que importar los archivos Js y tus vistas usarlo con la información proveniente de tus actions.

      Te recomendaría darle un vistazo primeramente a los frameworks JavaScript y luego veras que te será más fácil usarlo con Symfony.

  3. Hola Juan, al fin he logrado incluir los archivos de Ext JS necesarios a mi proyecto symfony, … que es un Sistema de Gestión de Información, muy extenso, ya puedo mostrar ventanas etc……ahora mi gran duda, que no lo he podido lograr, es como guardar los datos de los formularios que he creado con Ext JS, siguiendo los patrones de symfony. Porque realmente no quiero migrar de un framework a otro, yo quiero seguir con Symfony, lo que con las vistas de Ext JS, no se si me hago entender.

    – La versión de Symfony que uso es la 1.4.9

    Bueno hermano , de antemano mucha Gracias…Saludos LUIS

  4. Hola Juan, al fin he logrado incluir los archivos de Ext JS necesarios a mi proyecto symfony, … que es un Sistema de Gestión de Información, muy extenso, ya puedo mostrar ventanas etc……ahora mi gran duda, que no lo he podido lograr, es como guardar los datos de los formularios que he creado con Ext JS, siguiendo los patrones de symfony. Porque realmente no quiero migrar de un framework a otro, yo quiero seguir con Symfony, lo que con las vistas de Ext JS, no se si me hago entender.

    – La versión de Symfony que uso es la 1.4.9

    Bueno hermano , de antemano mucha Gracias…Saludos LUIS

Deja un comentario