Usando JSON con jQuery en Symfony

JSON es una forma bastante cómoda de tratar con “objetos” y si lo usamos junto con AJAX puede resultar muy sencillo tratar con respuestas que contienen mas de un elemento, tales como una array o un objeto. En el siguiente ejemplo veremos como usar  jQuery y JSON para realizar consultas AJAX en symfony (sin helpers o similares)

Voy a evitar declarar el modelo de datos, por lo que supongo que el lector ya tiene algunos conocimientos básicos de este framework.

1.- El Action

Lo primero que haremos es crear un nuevo método para nuestro action, el objetivo es retornar un texto serializado con información de un usuario.

public function executeAjaxDatosCorredorById(sfWebRequest $request){

  /* Asegurar que la solicitud sea AJAX */
  if (!$request->isXmlHttpRequest())
    return $this->renderText(json_encode(array('error'=>'Sólo respondo consultas vía AJAX.')));

  /* si entra por POST o GET la variable sfUserId, continuar */
  if($request->getParameter('sfUserId'))
  {
     $usuario = sfGuardUserPeer::retrieveByPK($request->getParameter('sfUserId'));
     /* Crear array asociativo con los atributos del objeto $usuario */
     $datosUsuario = array(
        "nombre"    => $usuario->getProfile()->getNombre(),
         "apellidoP" => is_null($usuario->getProfile()->getApellidoP()) ? '' : $usuario->getProfile()->getApellidoP(),
         "apellidoM" => is_null($usuario->getProfile()->getApellidoM()) ? '' : $usuario->getProfile()->getApellidoM(),
         "rut"       => $usuario->getUsername()
      );

      /* retornar el arreglo en formato JSON */
      return $this->renderText(json_encode($datosUsuario));
   }
   return $this->renderText(json_encode(array('error'=>'Faltan parámetros para realizar la consulta')));
}

Listo. la respuesta está lista para ser “interpretada”. Ahora vamos a ver cómo procesamos la consulta:

2.- La funcion AJAX

Los parámetros de esta función son:
sfAction: es dirección http de la accion de symfony a ejecutar.
idTrigger: Id del elemento DOM que desencadena el evento.
valorParametro: valor que toma laa variable GET['sfUserId']

function getDatosUsuarioById(sfAction, idTrigger, valorParametro)
{
      $.ajax(
      {
        url: sfAction,
        data: ({sfUserId: valorParametro}),
        dataType: "json",
        beforeSend: function()
        {
          $("#"+idTrigger).append('<span id="cargando_datos"> Cargando datos...');
        },
        complete: function()
        {
          $("#cargando_datos").hide();
        },
        success: function (data, status)
        {
          $("#propuesta_nombre_contratante").val(data.nombre);
          $("#propuesta_apellido_p_contratante").val(data.apellidoP);
          $("#propuesta_apellido_m_contratante").val(data.apellidoM);
          /* ... etc */
        }
        error: function (data, status, e)
        {
            alert('Ocurrió un error cargando los datos solicitados:.\n'+data.error);
        }
    });
}

En la sección success se puede ver que la respuesta, representada por  data,  se interpreta como si fuera un objeto.

3.- La puesta en marcha

Para ver el código en funcionamiento debemos agregar el siguiente código en la vista o template en la que necesitemos la función recién implementada. En este ejemplo la función getDatosUsuarioById(…) se dispara al entrar en foco el elemento DOM con Id: propuesta_nombre_contratante. Por otra parte, nótese cómo se declara la variable sfCargaDatosUsuario, se utiliza el helper url_for para crear una ruta, utilizando enrutamiento absoluto, hacia el URL del action a ejecutar.

$(document).ready(function(){
  var sfCargaDatosUsuario  = "<?php echo url_for('propuesta/ajaxDatosUsuarioById')?>";
   $("#propuesta_nombre_contratante").focus(function()
   {
        if($("#propuesta_cliente_id").val()>0)
        {
            getDatosUsuarioById(
                sfCargaDatosUsuario,
                "propuesta_cliente_id",
                $("#propuesta_cliente_id").val(),
            );
        }
    });
});

Eso por el momento, espero le sea de utilidad a alguien, iré puliendo esta entrada para que quede más clara.

jQuery – Seleccionando elemento de un Select Box

Una forma sencilla de marcar como “seleccionado” a un elemento de un select box, usando jQuery, es con el siguiente código

$("#miSelectBox option[value="+miValue+"]").attr("selected",true);

Esto puede resultar particularmente útil en un Select Box que haya “hidratado” via AJAX y despues hacer submit haya perdido las opciones y debas volver a cargarlas. Si eso es exactamente lo que andas buscando, se hace así:

var miValue = $("#miSelectBox" ).val();
if (miValue >0)
    $("#miSelectBox option[value="+miValue+"]").attr("selected",true);

Muy sencillo

Fuente: jivebay.com (ojo con algunos selectores utilizados, varios de ellos ya están obsoletos en la versión 1.3 )

Centrado Vertical con Jquery

El centrado vertical no es del todo trivial e implica el uso de múltiples contenedores (divs). Si fueramos a centrar contenido estático podríamos usar esta sólucion basada puramente en CSS, ¿pero si necesitáramos centrar elementos de manera dinámica ? En ese caso podemos usar las bondades de Jquery. Empecemos

1.- Necesitamos un contenedor:

#container {
	height:540px;
	width:600px;
	background-color:#FFF;
	border:2px solid #000 ;
}

2.-Un objeto a centrar… ojo que la posición es relativa

.cuadro_negro {
	height: 90px;
	width: 160px;
	background-color:#000;
	position:relative;
}

3.- El código

<script type="text/javascript">
$(document).ready(function(){

	/* Obtener el alto del contendor  del objeto a centrar. */
	var alto_canvas = $("#container").height();

	/* Obtener el valor del margen a aplicar.  */
	var margen_top = (alto_canvas - $('.cuadro_negro').height())/2;

	/* Aplicar el Margen */
	$('.cuadro_negro').css("top",margen_top);

});
</script>

Eso sería, bastante sencillo. Espero le sea de ayuda a alguien