Archivos para ‘html’

6 junio 2011

Combos dependientes con jQuery y AJAX

por auraham

Esta es mi adaptación del ejemplo de combos dependientes de 9Lessons.

index.php

<!--?php      //libreria de funciones de DB     include_once("datalib.php"); ?-->

<script type="text/javascript" language="javascript" src="js/jquery-1.6.1.js"></script><script type="text/javascript" language="javascript" src="js/custom.js"></script>

 <!--?php             $result = getAreas();         ?-->

 <select id="subareas" name="subareas"> </select>

connection.php

<!--?php     $username = "user";     $userpass = "pass";     $server   = "localhost";     $database = "database";          $link = mysql_connect($server, $username, $userpass);          mysql_select_db($database, $link); ?-->

datalib.php

<!--?php include_once("connection.php"); function getAreas() {     $query =    "SELECT * ".                 "FROM areas ";          $result = mysql_query($query);          return $result;     } function getSubareas($id_area) {     $query =    "SELECT * ".                 "FROM subareas ".                 "WHERE id_area = $id_area";     //cuidado aqui! xss!          $result = mysql_query($query);          return $result;      } ?-->

ajax.php

<!--?php <br ?-->
include_once("datalib.php");

if($_POST['id_area'])
{
    $id = $_POST['id_area'];

    $result = getSubareas($id);

    while($row = mysql_fetch_array($result))
    {
        $id   = $row['id_subarea'];
        $data = $row['nombre'];

        echo ''.$data.'';
    }
}
?>

js/custom.js


$(document).ready(function()
{

    //Combo areas
    $("#areas").change(function(){

       //valores del combo
       var id_area = $(this).val();

       //valores por POST
       var postdata = "id_area=" + id_area;

       $.ajax({

           type:"POST",
           url:"ajax.php",
           data:postdata,
           cache:false,
           success: function(html)
           {
               $("#subareas").html(html);

           }
       });

    });

});

Fuente:
9Lessons

19 noviembre 2010

Errores de compatibilidad y DOCTYPE

por auraham

El día de hoy me encontré con uno de esos errores que toman tiempo en resolverse, pero que al final no era nada difícil.

Pasé un diseño en HTML y CSS a una serie de vistas para usarlas dentro de codeigniter, usando PHP. Todo funcionaba correctamente, es decir, la página creada a partir de PHP se veía igual al diseño preliminar en HTML. Sin embargo, al probarla con IE fue distinto. Al principio pensé que el diseño sólo funcioaba dentro de Firefox, pero no era así, funcionaba perfectamente en ambos exploradores, por lo que la idea de una falta de compatibilidad fue descartada.

Después de revisar el código, la única línea distina era una ,que no pensé que fuera tan relevante, el DOCTYPE.

El XHMTL se deriva de XML, por lo cual hereda el DTD o Document Type Definition, el cual es un conjunto de normas que un determinado tipo de documento debe cumplir.

La versión 1.0 del estándar XHTML permite el uso de tres diferentes DTD. Para indicar cuál se usará se emplea la etiqueta doctype, la cual es la primera línea de la página, incluso antes de la etiqueta html.

Estos son los tres DTD

Strict: (Estricto) Es un estándar muy rígido que requiere una separación total de HTML y CSS.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional: (Transitorio) Es el más recomendable, en especial cuando no se sabe cuál usar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset: Poco recomendable, ya que utiliza frames dentro de la página.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

DTD List
Javier Eguíluz Pérez

4 enero 2010

Crear un form para fechas [sencillo] con CSS

por auraham

La idea de este ejemplo es crear una serie de campos de texto de un formulario en línea, es decir, uno seguido del otro, pero con un label sobre cada uno de ellos. Este es el resultado fina:

Primero hagamos la estructura basándonos en una lista desordenada:

<div id="contenedor_fecha">
  <form>
    <ul>
      <li>
        <label for="dia">D&iacute;a</label><br />
        <input type="text" name="dia" id="dia" maxlength="2" class="campo"/>
      </li>
      <li>
        <label for="mes">Mes</label><br />
        <input type="text" name="mes" id="mes" class="campo"/>
      </li>
      <li>
        <label for="anio">A&ntilde;o</label><br />
        <input type="text" name="anio" id="anio" maxlength="4" class="campo"/>
      </li>
    </ul>
   </form>

 </div><!--contenedor_fecha-->

Y este es el resultado

Ahora, sólo cambiaré algunas cosas para body, simplemente por estética.

body{
  margin:0px;
  padding:0px;
  font-family:"dejavu sans";
  font-size:10px;
}

Como se puede ver, todo esta dentro de un div llamado contenedor_fecha, el cual, nos ayudará a centrar (o alinear) todo a la vez. Para centrar todo el contenido usamos margin:0px auto, lo cual quiere decir que nuestra capa contenedor_fecha tendrá la misma distancia a la izquierda y derecha. El valor de width será de 312px (aunque se vea mal, luego lo explicaré).

.contenedor_fecha{
  border:1px solid #a0a0a0;
  width:312px;
  margin:0px auto;
}

Cambiaremos las propiedades de las cajas de texto, para que tengan el mismo ancho y color de borde. Para eso es la clase campo.

.campo{
  border:1px solid #bdcef9;
  width:100px;
}
 

Para quitar las viñetas o bullets podemos usar list-style:none, aunque, al menos en Firefox, desaparecen con un margin y padding de cero. Con la propiedad display le decimos que el elemento de la lista se despliegue como si se tratara de un elemento de bloque, como un DIV. Lo mejor de esto es que no establecemos el valor de width, ya que toma el mínimo posible. La propiedad que alinea a todos los elementos es float.

.contenedor_fecha ul,li{
  margin:0px;
  padding:0px;
}

.contenedor_fecha ul li {
  display:block;
  list-style:none;
  float:left;
}
 

Como puedes ver, la caja contenedor_fecha no rodea los elementos de la lista, esto es porque están flotando. Hay varias maneras de resolver esto. Smashing Magazine nos ofrece tres opciones, aunque usaré la más simple, agregar una etiqueta vacía.

Colocamos una etiqueta llamada vacio justo antes de cerrar la caja contenedor_fecha:

     ...
   </form>

   <div class="vacio"></div>

 </div><!--contenedor_fecha-->

Por último, para ajustar el espacio entre cada elemento, sólo hace falta agregar dos propiedades. En la misma sección donde colocamos el valor de display:block podemos ajustar tanto la alineación del texto, como el espacio entre los campos del texto.

.contenedor_fecha ul li {
  display:block;
  list-style:none;
  float:left;
  margin:2px;
  text-align:center;
}

Cada elemento de la lista se despliega como un bloque de 100px, esto se debe al ancho de las cajas de texto. Además, cada elemento tiene un margin de 2 px. Si solo tomamos en cuenta los márgenes laterales, tendremos 4px por cada elemento, por lo tanto, 12px por los tres elementos. Realizando la suma

300px + 12px = 312px

Por eso el contenedor_fecha debe medir esta suma para poder moverla con mayor facilidad.

Espero te sirva para algún proyecto futuro. Cualquier duda agradeceré el comentario.

Fuentes:
Smashing Magazine

Etiquetas: , ,
Seguir

Get every new post delivered to your Inbox.