El tutorial Jobeet

18.4. Informando al usuario

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') ?>