Archivo de la categoría: Jquery

50% de descuento para Campus Party 2014!

cover2

Uno de los eventos más importantes de Tecnología y ambiente tecnológico del mundo se celebrará en nuestro país en Zapopan, hablamos de CPMX5 y hoy te mostraremos la oportunidad de como obtener tus entradas con el 50 de descuento.

  • Deben registrarse como campusero en www.campus-party.com.mx.
  • Si ya tienes usuario solo debes hacer login.
  • Una vez hecho login en el panel de usuario deben seleccionar la opción «Comprar entrada». (http://www.campus-party.com.mx/webapp/fichaUsuario/pago)
  • Elegir la opción «Comprar con descuento».
  • En el proceso deben usar el siguiente código de descuento: CD501ihw35hi (copia y pega).
  • Una vez elegido el tipo de entrada se procede al pago de la cantidad vía PayPal.

¡Y listo! solo faltaría esperar a que llegue el día de comienzo de #CPMX5 para disfrutar de una semana de contenidos para los fans de la tecnología y lo que esto implica.

Comentario tipo facebook utilizando jQuery

Muchas veces mientras desarrollamos una aplicación web nos vemos en la necesidad de implementar algo que permita a los usuarios involucrarse en lo que sea que estemos haciendo, los sistemas de comentarios son una parte muy común en toda plataforma web de hoy en día, se trata de una de las características principales que no pueden faltar en ningún sitio, blog o red de noticias, básicamente un sistema de comentarios abre un canal de comunicación entre nosotros y los visitantes. Teniendo esto en cuenta no está de más mencionar que existen muchos servicios gratuitos en la red que nos permiten implementar un sistema de comentarios de forma muy rápida como por ejemplo Disqus.

En principio lo mínimo que tiene que tener un sistema de comentarios es un nombre de quien comenta, avatar y texto del comentario, entonces siguiendo este principio básico hoy vamos a implementar una interfaz de sistema de comentarios tipo Facebook utilizando HTML y jQuery. Los comentarios en Facebook tienen una característica muy particular, ha diferencia de muchos otros, Facebook no recarga la página una vez que escribimos y presionamos enter, esto es posible gracias al uso de Ajax, a grandes rasgos Ajax es una tecnología que permite que nuestro navegador (Chrome, Firefox, safari, etc) pueda mandar petición al servidor de manera asíncrona, dándonos después la posibilidad de modificar ciertas secciones de nuestra pagina usando JavaScript.

Echemos un vistazo a como lucen los comentarios en Facebook, después podremos comenzar a desarrollar nuestra copia (y aprender de ello en el proceso :))

facebook_comments

Como mencionaba más arriba, básicamente se compone de, un cuadro de texto para escribir el comentario, y cada comentario tiene nombre, avatar y texto, pues manos a la obra.

Paso 1: Crear la estructura en HTML

Usando HTML vamos a comenzar a crear lo que será nuestro formulario y una lista de comentarios de ejemplo, para esto utilizaremos divs.
El formulario para escribir comentarios puede ser muy sencillo y constar solo de 2 campos, el texto y el nombre de usuario:

<form action="post.php" id="postComment" method="post" accept-charset="utf-8">
   <input type="text" name="newComment" required="" autocomplete="off" placeholder="¿En que estas pensando?" id="newComment"></input>
   <input type="hidden" name="username" id="username" value="Alevsk"></input>
</form>

Y nuestro “modelo” de comentario estará conformado solamente por una imagen y un espacio que mostrara texto, algo como:

<div class="comment">
     <div class="avatar">
         <img src="img/1.png" />
     </div>
     <div class="autoComment">
         <span>Alevsk </span>
         Comentario de ejemplo	    	
     </div>
</div>

Ok, entonces ahora combinando ambas cosas el código completo de nuestro index.html se tendría que ver más o menos así.

<!DOCTYPE html>
	<head>
  		<meta charset="utf-8" />
  		<meta name="viewport" content="width=device-width" />
    	<title>Comentarios tipo facebook con jQuery</title>
    	<script type="text/javascript" src="jquery.js"></script>
    	<script type="text/javascript" src="jquery.validate.js"></script>
	</head>
  	<body>
  		<div id="container">
	  		<div id="comments">
	  			<div class="comment">
					<div class="avatar">
						<img src="img/1.png" />
					</div>

				    <div class="autoComment">
				    	<span>Alevsk </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  			<div class="comment">
					<div class="avatar">
						<img src="img/2.png" />
					</div>

				    <div class="autoComment">
				    	<span>Chell </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  			<div class="comment">
					<div class="avatar">
						<img src="img/3.png" />
					</div>

				    <div class="autoComment">
				    	<span>Calorine </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  		</div>
	  		<div id="commentBox">
	    		<form action="post.php" id="postComment" method="post" accept-charset="utf-8">
	  				<input type="text" name="newComment" required="" autocomplete="off" placeholder="¿En que estas pensando?" id="newComment"></input>
	  				<input type="hidden" name="username" id="username" value="Alevsk"></input>
	  			</form>
	  		</div>
  		</div>
  	</body>
</html>

Notaran que el Head he agregado de una vez la librería de jQuery y un plugin de validación, estos los necesitaremos más adelante ya que nos facilitaran bastante el trabajo :), con el código anterior llevamos algo como la siguiente imagen, ¿no se ve muy lindo verdad?, eso es porque nos falta agregarle un poco de estilos.

facebook_comments_1

Paso 2: Agregar estilos

Agregamos el siguiente código CSS en cualquier lugar dentro de las etiquetas de head (lo correcto sería tener el css en un archivo aparte, pero para fines demostrativos está bien así por ahora).

    	<style type="text/css">
    		body
    		{
    			font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
				font-size: 11px;
    		}
    		#container
    		{
				width: 290px;
				margin: 0 auto;
				height: auto;
				overflow: auto !important;
    		}
    		#commentBox
    		{
				background: #edeff4;
				height: 25px;
				overflow: hidden;
				display: block;
				padding: 10px;
    		}
	    	#postComment input
	    	{
				width: 100%;
	    	}
	    	#postComment .enviar
	    	{
	    		clear: both;
				float: left;
	    	}

	    	#comments
	    	{
				margin-top: 15px;
				float: left;
				width: 100%;
				background: #edeff4;
				overflow: auto;
	    	}
	    	#comments .comment
	    	{
				padding: 10px;
				border-bottom: 1px solid #fff;
				overflow: auto;
	    	}
	    	#comments .comment .avatar
	    	{
				float: left;
				margin-right: 10px;
	    	}
	    	#comments .comment .avatar img
	    	{
	    		width: 32px;
	    		height: 32px;
	    	}
	    	#comments .comment .autoComment
	    	{
				float: right;
				width: 225px;
	    	}
	    	#comments .comment .autoComment span
	    	{
	    		font-weight: bold;
	    		color: #3b5998;
	    		cursor:pointer;
	    	}
    	</style>

Recargamos la página y como por arte de magia esto se va pareciendo un poco más a los comentarios de facebook

facebook_comments_2

ijCBM2h1of0vE

En este punto tenemos algo ya muy bonito, lamentablemente no hace nada!, pero no nos desesperemos ya que solo nos falta una cosa :).

Paso 3: Utilizar jQuery para agregar los nuevos comentarios

Lo que tendremos que hacer ahora será que cuando el usuario escriba su comentario y pulse la tecla enter este sea enviado de manera asíncrona (utilizando Ajax) al servidor, después tendremos que dibujar en la pantalla de alguna manera lo que el visitante acaba de comentar, todo esto sin recargar la página. Esto puede sonar más complicado de lo que es, sobre todo si eres nuevo con jQuery. Por suerte jQuery nos permite manipular el DOM, podemos incluir elementos diatónicamente en nuestro sitio de manera muy sencilla.

¿Recuerdan el plugin de validación que había agregado en un inicio?, bueno pues ahora viene la parte interesante, el plugin nos permite agregar validaciones de todo tipo en los campos y capturar ciertos eventos que ocurren en un formulario, por ahora utilizaremos uno llamado submitHandler. submitHandler nos permite indicar código para ser ejecutado una ves que el formulario ha activa el disparador submit, esto es especialmente util a la hora de validar campos y mostrar información en la pantalla. De nuevo, este código va en cualquier parte de nuestro index.html pero lo recomendable es que este colocado entre las etiquetas head y después de haber includio la libreria jQuery y el plugin de validation.

		<script type="text/javascript">
			$(document).ready(function(){
				$('#postComment').validate({
					submitHandler: function(form) {
		    			
		  			},
			        errorPlacement: function(error,element) {
			          return;
			        },
		      	});
			});
		</script>

Después el bloque de código que se ejecutara dentro del submitHandler será una petición post al servidor utilizando ajax.

$.ajax({
						      type: "POST",
						      contentType: "application/json; charset=utf-8",
						      url: $(form).attr('action'),
						      data: $(form).serialize(),
						      success: function (result) {

						           var comment = $('<div></div>').addClass('comment');
						           var avatar = $('<div></div>').addClass('avatar');
						           var img = $('<img/>').attr({'src':'img/1.png'});
						           var text = $('<div></div>').addClass('autoComment').html('<span>'+$('#username').val()+' </span>'+$('#newComment').val());

						           avatar.append(img);
						           comment.append(avatar);
						           comment.append(text);

						           $('#comments').append(comment);
						           $('#newComment').val('');
						      }
						 });

Por el momento el formulario está mandando una petición al archivo post.php que no tiene nada, pero sería posible agregar código en este archivo que permitiera guardar los comentarios una base de datos (tal vez muestre como hacer eso en un artículo futuro)

<?php 
	// Guardar el contenido en una base de datos
	// O lo que quieras
	echo "Ok"; 
?>

Ok, continuamos, lo verdaderamente importante aquí es el siguiente código:

						           var comment = $('<div></div>').addClass('comment');
						           var avatar = $('<div></div>').addClass('avatar');
						           var img = $('<img/>').attr({'src':'img/1.png'});
						           var text = $('<div></div>').addClass('autoComment').html('<span>'+$('#username').val()+' </span>'+$('#newComment').val());

						           avatar.append(img);
						           comment.append(avatar);
						           comment.append(text);

						           $('#comments').append(comment);

Como mencionaba más arriba jQuery nos permite manipular el DOM, con las instrucciones anteriores estamos creando los divs necesarios con el texto y el nombre del visitante que después serán agregados a la lista de comentarios existentes, esto nos dará la ilusión de que el comentario fue agregado inmediatamente después de ser escrito (aunque podría ser el caso de que la información no haya terminado de ser procesada en el servidor).

Combinando el HTML, el CSS y el javascript nuestro archivo index.html tendría que verse de la siguiente manera:

<!DOCTYPE html>
	<head>
  		<meta charset="utf-8" />
  		<meta name="viewport" content="width=device-width" />
    	<title>Comentarios tipo facebook con jQuery</title>
    	<script type="text/javascript" src="jquery.js"></script>
    	<script type="text/javascript" src="jquery.validate.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#postComment').validate({
					submitHandler: function(form) {
		    			
		    			 $.ajax({
						      type: "POST",
						      contentType: "application/json; charset=utf-8",
						      url: $(form).attr('action'),
						      data: $(form).serialize(),
						      success: function (result) {

						           var comment = $('<div></div>').addClass('comment');
						           var avatar = $('<div></div>').addClass('avatar');
						           var img = $('<img/>').attr({'src':'img/1.png'});
						           var text = $('<div></div>').addClass('autoComment').html('<span>'+$('#username').val()+' </span>'+$('#newComment').val());

						           avatar.append(img);
						           comment.append(avatar);
						           comment.append(text);

						           $('#comments').append(comment);
						           $('#newComment').val('');
						      }
						 });
		  			},
			        errorPlacement: function(error,element) {
			          return;
			        },
		      	});
			});
		</script>
    	<style type="text/css">
    		body
    		{
    			font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
				font-size: 11px;
    		}
    		#container
    		{
				width: 290px;
				margin: 0 auto;
				height: auto;
				overflow: auto !important;
    		}
    		#commentBox
    		{
				background: #edeff4;
				height: 25px;
				overflow: hidden;
				display: block;
				padding: 10px;
    		}
	    	#postComment input
	    	{
				width: 100%;
	    	}
	    	#postComment .enviar
	    	{
	    		clear: both;
				float: left;
	    	}

	    	#comments
	    	{
				margin-top: 15px;
				float: left;
				width: 100%;
				background: #edeff4;
				overflow: auto;
	    	}
	    	#comments .comment
	    	{
				padding: 10px;
				border-bottom: 1px solid #fff;
				overflow: auto;
	    	}
	    	#comments .comment .avatar
	    	{
				float: left;
				margin-right: 10px;
	    	}
	    	#comments .comment .avatar img
	    	{
	    		width: 32px;
	    		height: 32px;
	    	}
	    	#comments .comment .autoComment
	    	{
				float: right;
				width: 225px;
	    	}
	    	#comments .comment .autoComment span
	    	{
	    		font-weight: bold;
	    		color: #3b5998;
	    		cursor:pointer;
	    	}
    	</style>
	</head>
  	<body>
  		<div id="container">
	  		<div id="comments">
	  			<div class="comment">
					<div class="avatar">
						<img src="img/1.png" />
					</div>
				    <div class="autoComment">
				    	<span>Alevsk </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  			<div class="comment">
					<div class="avatar">
						<img src="img/2.png" />
					</div>

				    <div class="autoComment">
				    	<span>Chell </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  			<div class="comment">
					<div class="avatar">
						<img src="img/3.png" />
					</div>

				    <div class="autoComment">
				    	<span>Calorine </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  		</div>
	  		<div id="commentBox">
	    		<form action="post.php" id="postComment" method="post" accept-charset="utf-8">
	  				<input type="text" name="newComment" required="" autocomplete="off" placeholder="¿En que estas pensando?" id="newComment"></input>
	  				<input type="hidden" name="username" id="username" value="Alevsk"></input>
	  			</form>
	  		</div>
  		</div>
  	</body>
</html>

Bueno con este concluye este corto y básico tutorial, les pueda servir como base a la hora de implementar sus sistemas de comentarios y como siempre en los siguientes enlaces pueden descargar el codigo fuente y ver un ejemplo funcionando. Cualquier duda pueden escribirla en la sección de comentarios xD.

salu2

Integrar bootstrap de twitter con CakePHP


Bootstrap de twitter es un poderoso framework para diseñar front-end es por eso que hoy en día muchos desarrolladores web lo utilizan, en este sencillo tutorial aprenderás a integrar bootstrap con CakePHP.

Al descomprimir la carpeta de bootstrap nos encontraremos con 3 directorios en su interior:

/*
bootstrap
├── css
│   ├── bootstrap-responsive.css
│   ├── bootstrap-responsive.min.css
│   ├── bootstrap.css
│   └── bootstrap.min.css
├── img
│   ├── glyphicons-halflings-white.png
│   └── glyphicons-halflings.png
└── js
    ├── bootstrap.js
    └── bootstrap.min.js
*/

Si ya tienes algo de experiencia con cakephp sabrás que en el framework existe la carpeta webroot, que es exactamente a donde tenemos que copiar estos archivos, la estructura de directorios y archivos dentro webroot debe de quedar algo así:

/*
webroot/
├── css
│   ├── bootstrap-responsive.css
│   ├── bootstrap-responsive.min.css
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   └── cake.generic.css
├── favicon.ico
├── files
│   └── empty
├── img
│   ├── cake.icon.png
│   ├── cake.power.gif
│   ├── glyphicons-halflings-white.png
│   ├── glyphicons-halflings.png
│   ├── test-error-icon.png
│   ├── test-fail-icon.png
│   ├── test-pass-icon.png
│   └── test-skip-icon.png
├── index.php
├── js
│   ├── bootstrap.js
│   ├── bootstrap.min.js
│   └── empty
└── test.php
*/

Nota como ahora los archivos de bootstrap están en sus respectivos directorios (css, img y js), ahora estamos listos para mandar llamar los archivos en nuestro default.ctp

Abrimos el archivo default.ctp para modificarlo (se encuentra en app/View/Layout/default.ctp) y buscamos la siguiente porción de código:

	<?php
		echo $this->Html->meta('icon');

		echo $this->Html->css('cake.generic');

		echo $this->fetch('meta');
		echo $this->fetch('css');
		echo $this->fetch('script');
	?>

y las modificamos por estas (solo agregamos las llamadas al css y el js de bootstrap):

	<?php
		echo $this->Html->meta('icon');    
                echo $this->Html->css('bootstrap');     
                echo $this->html->script('bootstrap');
		echo $this->fetch('meta');
		echo $this->fetch('css');
		echo $this->fetch('script');
	?>

Y eso es todo!, podrás comenzar a desarrollar front-end con bootstrap en CakePHP :), yo he copiado el código fuente del ejemplo que nos pone el bootstrap en su sitio en mi layout.ctp para ver que todo funciona bien, el resultado fue:

Tutorial Bing Search API 2.0 y PHP

Ha inicios del mes de agosto la gente de Microsoft mejoro (por no decir que modifico) la forma en que los desarrolladores interactuaban con la api, mejor conocida como bing api 2.0 ahora. Esto lógicamente causo bastantes problemas a las empresas y programadores independientes que no realizaron adoptaron los cambios en sus aplicaciones rápidamente, la mayor novedad que nos presenta ahora la api es que trabaja directamente con Windows Azure Marketplace.

Muchas personas pensaran que modificar sus aplicaciones para que vuelvan a funcionar va a ser una tarea muy tediosa, pero de hecho es bastante sencillo, a continuación he escrito una serie de pasos que te permitirá migrar una aplicación a bing api 2.0, mas concretamente utilizaremos la Bing search api 2.0

  • Registrarte en el Windows Azure Marketplace (usando tu cuenta de hotmail es suficiente)
  • Una vez registrado puedes acceder a la sección de datos del marketplace donde además de Bing Search Api (que es el servicio que utilizaremos en este tutorial) también podrás hacer uso de otros servicios como Microsoft Translator, etc. Lista de servicios de Bing

  • Al hacer clic en el servicio serás enviado a una vista donde se proporciona mas información acerca de la api así como una lista de precios por utilizar la api mensualmente, si crees que tu aplicación no tendrá mas de 5000 peticiones por mes a la api podrías utilizar el paquete gratuito al servicio (el ultimo precio que se muestra) de lo contrario te recomiendo adquirir algún otro paquete con las transacciones por mes que mas se ajusten a tus necesidades
  • Una vez suscrito al paquete de tu preferencia (hacer clic, aceptar términos, etc, etc.) en la sección de claves de cuenta podrás encontrar la key necesaria para poder conectarte al servicio y empezar a hacer uso de el. Así mismo en la sección de Mis datos encontraras un resumen de las aplicaciones que estas utilizando actualmente y el estado del numero de consultas restantes por mes, etc.

Listo eso es todo lo que tienes que configurar para comenzar a hacer uso de la api de bing :), ahora para no dejar el articulo a medias les dejo un pequeño código en PHP que nos regresa los resultados encontrados de la query que le pasemos a la api.

<?php

  $api = 'https://api.datamarket.azure.com/Data.ashx/Bing/Search/v1/Web?$format=json&$top=8&Query=';
  $accountKey = "LA KEY QUE APARECE EN LA SECCION DE CLAVES DE CUENTA";
  $context = stream_context_create(array(
    'http' => array(
        'request_fulluri' => true,
        'header'  => "Authorization: Basic " . base64_encode($accountKey . ":" . $accountKey)
    )
  ));

  $query = 'alevsk';
  $request = $api . '%27'.$query.'%27';

  $jsonResponse =  json_decode(file_get_contents($request, 0, $context));
  print_r($jsonResponse);
  
?>

El código es bastante sencillo pero creo que deja bastante claro cuales son los requerimientos mínimos para interactuar con la api como la autentificación, los sources y el formato de respuesta, si tienes mas dudas acerca de los parámetros que recibe la api puedes utilizar el generador de consultas que proporciona el sitio o también acceder a el utilizando el enlace de “Usar” (el que esta a la derecha en la imagen anterior).

El generador de consultas de bing api 2.0 se trata de una herramienta bastante útil ya que te permite configurar tus request de una manera muy amigable y al final en la parte superior te muestra como quedaría la petición (la URL) que deberías de hacer a la api para obtener los resultados mostrados abajo :).

Muy importante, aquí les dejo la documentacion completa de la api que podrán utilizar como referencia.

Con esto espero que haya quedado claro o por lo menos entendible la nueva manera de interactuar con la api de bing y como siempre digo, si hay dudas respecto al código pueden escribirlas en los comentarios y con gusto las resolveré.

salu2

SelectBox dependientes – ciudades y estados

Retomando los post sobre programación web en esta ocasión les comparto un rápido ejemplo sobre selectbox dependientes, mas concretamente el ejemplo de selectbox de ciudades y estados. Básicamente tenemos 2 selectbox, el primero contendrá los estados de la republica mexicana, cuando seleccionamos alguno el segundo selectbox contendrá ahora las ciudades de ese estado, para hacer esto necesitamos una pequeña base de datos con 2 tablas (ciudades y estados .. obvio), después algo de código php que se encargue de hacer la conexión y otro mas que nos devuelva los datos de las consultas vía JSON y por ultimo nuestro html y javascript que se encargara de mostrar el resultado.

Al terminar el tutorial tendremos algo que se vera así 🙂

Puedes descargar los archivos que se utilizara en la practica a continuación.

Comenzamos pues :).

Comenzamos creando el archivo que hará la conexión a la base de datos, yo acostumbro hacer una clase para eso ya que luego puedo hacer extends de la misma y todo es mas fácil.

<?
  global $ID_BD;
  $ID_BD=mysql_connect("127.0.0.1", "root","");
  mysql_select_db("states_cities", $ID_BD);
  mysql_query("SET NAMES 'utf8'", $ID_BD);  

class mysql {
VAR $ID;
function mysql (){

}
  function _query($sql){

  global $ID_BD;
   

    //echo "$sql\n";
      return mysql_query($sql,$ID_BD);
  }
  
  function _registers($sql){
  
  global $ID_BD;
    [email protected]_query($sql, $ID_BD);
    
    //echo $result;
    //echo $sql;
    if ($row=mysql_fetch_object($result)){
        do{
        
        $registros[]= $row;
        
        }while($row=mysql_fetch_object($result));
    }
    else
      return array();
    return $registros;
  }
  
  function _register ($sql){

  global $ID_BD;
    //echo "$sql";
      $result=mysql_query($sql, $ID_BD);
      if ($row=mysql_fetch_object($result))
        return  $row;
  }
  
  function _close(){
    mysql_close($this->ID);
  }
  
  function _last_id(){
    global $ID_BD;
      return  mysql_insert_id($ID_BD);
  }
}  

?>

Después creamos el archivo que se encargara de hacer las consultas y regresar el JSON correspondiente, realizaremos peticiones a este archivo via ajax por medio de jquery.

<?php
require_once 'mysql.php';

class data extends mysql
{
  function getStates()
  {
    $states = $this->_registers("SELECT * FROM states;");
    return json_encode($states);
  }

  function getCities($idState)
  {
    $idState = (int) $idState;
    $cities = $this->_registers("SELECT * FROM cities WHERE id_state = " . $idState . ";");
    return json_encode($cities);
  }
}

  $data = new data();
  if($_GET['action'] == "getStates")
  {
    echo $data->getStates();
  }
  else if($_GET['action'] == "getCities" && isset($_GET['stateID']))
  {
    echo $data->getCities($_GET['stateID']);
  }

?>

Como podemos ver he empaquetado el código en una clase y casi en la parte final del código reviso si existen algunos parámetros pasados por GET para mandar llamar a las funciones correspondientes :), examinemos por ejemplo la función que nos trae los estados:

  function getStates()
  {
    $states = $this->_registers("SELECT * FROM states;");
    return json_encode($states);
  }

Básicamente hacemos un select y el arreglo asociativo resultante (checar la clase mysql para mas información) lo pasamos por json_encode para ser manipulado con javascript, lo mismo pasa con la función que te arroja las ciudades solo que esa tiene una clausula WHERE que te manda traer solo las ciudades de X estado :).

Finalmente creamos nuestro archivo html donde desplegaremos los 2 selectbox, para eso escribimos el siguiente código.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>SelectBox dependientes</title>
    <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script language="JavaScript">

    Object.size = function(obj) {
      var size = 0, key;
      for (key in obj) {
          if (obj.hasOwnProperty(key)) size++;
      }
      return size;
    };
    $(document).ready(function() {

      //$.ajax({
      $.ajax({
        url: 'data.php?action=getStates',
        dataType: 'json',
        success: function(data) {
          var size = Object.size(data);
          var items = "";
          for(var i = 0; i < size; i++)
          {
            items = items + '<option value="' + data[i].id_state + '">' + data[i].name + '</option>';
            //console.log(data[i].id_state + " : " + data[i].name);
          }  
          $('#states').append(items);
          $('#states').change();
        }
      });

     $('#states').change(function() {
      $.ajax({
        url: 'data.php?action=getCities&stateID=' + $('#states').val(),
        dataType: 'json',
        success: function(data) {
          var size = Object.size(data);
          var items = "";
          for(var i = 0; i < size; i++)
          {
            items = items + '<option value="' + data[i].id_state + '">' + data[i].name + '</option>';
            //console.log(data[i].id_state + " : " + data[i].name);
          }  
          $('#cities').html("");
          $('#cities').append(items);
          $('#cities').change();
        }
      });      
     });

    });      
    </script>
</head>
<body>

<a href="#">Selecciona un estado</a>
<br/>
<select id="states">
</select>
<br/>
<a href="#">Selecciona una ciudad</a>
<br/>
<select id="cities">
</select>
<br/>

<div id="map">
</div>

</body>
</html>

Como pueden ver, al inicio cargamos la librería de JQuery desde google, después hacemos la primera petición al script data.php via ajax para que nos traiga los estados y poder “rellenar el primer selectbox”, después tenemos el siguiente código javascript.

     $('#states').change(function() {
      $.ajax({
        url: 'data.php?action=getCities&stateID=' + $('#states').val(),
        dataType: 'json',
        success: function(data) {
          var size = Object.size(data);
          var items = "";
          for(var i = 0; i < size; i++)
          {
            items = items + '<option value="' + data[i].id_state + '">' + data[i].name + '</option>';
            //console.log(data[i].id_state + " : " + data[i].name);
          }  
          $('#cities').html("");
          $('#cities').append(items);
          $('#cities').change();
        }
      });      
     });


change() nos permite detectar el cambio de selección de un selectbox, entonces utilizamos ese evento para “refrescar” las opción del segundo selectbox, vemos cual es el estado que esta seleccionado, extraemos su valor (es el mismo id que le corresponde en la tabla de estados) y armamos la petición para mandar traer las ciudades :).

Y listo con esto tenemos listo un mini ejemplo de selectbox dependientes, espero les sirva este pequeño snippet :), ya saben cualquier duda pónganla en comentarios.

La verdad es un código bastante sencillo y fácil de implementar (unos 10 mins a lo mucho), con un poco mas de código se podría mostrar la ubicación de la ciudad en google maps o utilizar esto en algún formulario de registro o cualquier otra cosa.

salu2