18.4. Informando al usuario (El tutorial Jobeet)

Cuando se realizan peticiones AJAX, las páginas no se actualizan instantáneamente. El navegador espera la respuesta del servidor antes de poder actualizar los contenidos de la página. Por tanto, durante ese periodo de tiempo debemos mostrar algún tipo de indicación visual para informar al usuario de que ya se ha realizado la petición.

Una práctica muy extendida consiste en mostrar durante la petición AJAX un pequeño icono en movimiento. Por tanto, añade en el layout la imagen del icono y ocultala por defecto:

<!-- apps/frontend/templates/layout.php -->
<div class="search">
  <h2>Ask for a job</h2>
  <form action="<?php echo url_for('@job_search') ?>" method="get">
    <input type="text" name="query" value="<?php echo $sf_request->getParameter('query') ?>" id="search_keywords" />
    <input type="submit" value="search" />
    <img id="loader" src="/images/loader.gif" style="vertical-align: middle; display: none" />
    <div class="help">
      Enter some keywords (city, country, position, ...)
    </div>
  </form>
</div>

Nota El icono está preparado para que quede bien en el layout actual de Jobeet. Si quieres crear tu propio icono, existen muchos sitios web que permiten hacerlo, como por ejemplo http://www.ajaxload.info/

Ahora que ya disponemos del código HTML completo para que el buscador en tiempo real funcione, crea un archivo llamado search.js que contenga todo el código JavaScript que hemos creado hasta el momento:

// web/js/search.js
$(document).ready(function()
{
  $('.search input[type="submit"]').hide();

  $('#search_keywords').keyup(function(key)
  {
    if (this.value.length >= 3 || this.value == '')
    {
      $('#loader').show();
      $('#jobs').load(
        $(this).parents('form').attr('action'),
        { query: this.value + '*' },
        function() { $('#loader').hide(); }
      );
    }
  });
});

También debes actualizar el layout para incluir este nuevo archivo JavaScript:

<!-- apps/frontend/templates/layout.php -->
<?php use_javascript('search.js') ?>

JavaScript como acción Aunque el código JavaScript que hemos utilizado para el buscador es estático, en ocasiones los archivos JavaScript deben ser dinámicos para poder incluir algo de código PHP (como por ejemplo para utilizar el helper url_for()).

JavaScript no es más que otro formato y, como vimos hace algunos días, Symfony te permite trabajar con los formatos de forma sencilla. Como el archivo JavaScript contiene el comportamiento dinámico de una página, puedes utilizar la misma URL tanto para la página como para el archivo JavaScript (utilizando en este último caso la extensión .js). Si por ejemplo quieres crear un archivo JavaScript para definir el comportamiento del buscador, puedes modificar la ruta job_search de la siguiente forma y puedes crear una plantilla llamada searchSuccess.js.php:

job_search:
  url:   /search.:sf_format
  param: { module: job, action: search, sf_format: html }
  requirements:
    sf_format: (?:html|js)