Selects anidados con AJAX y JQuery

Los selects anidados o dependent cascading selects como dicen los ingleses , son usados hoy en día en la mayoria de formularios cuando nos registramos en una web. El ejemplo más comun es a la hora de elegir nuestro pais de procedencia , donde seguidamente carga en otro select las provincias de dicho pais. El otro día precísamente publique un listado completo de paises + provincias.

Hacer esto con JQuery es más que sencillo. Tan solo necesitaremos 3 archivos:

index.php Donde tendremos un formulario simple con sus correspondientes selects.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<script type="text/javascript" src="cargarProvincias.js"></script>   
<script type="text/javascript" src="../jquery.js"></script> 
<? 
   include_once ('db.php');
   $conn= get_db_conn();
 
$paises=mysql_query("SELECT * from paises",$conn);
   ?>
<form id="form" action="" method="post" class="niceform">
<dl><dt>  	  <label><span class="rojo">*</span> Pais :</label></dt>
          	  <dd>	 <select name="pais" id="pais"  onchange="cargarProvincias();" />
                                 <option value="null">Selecciona un pais</option>
           	 <? 	          while($row=mysql_fetch_assoc($paises)){
					print '<option value="'.$row['id'].'" >'.$row['pais'].'</option>';
											}?>
				</select>
                 </dd>
</dl>                                                  
 
<dl><dt>      <label><span class="rojo">*</span> Provincia :</label></dt>
           		<dd>	 <select name="provincia" id="provincia"  />
                                <option value="null">Selecciona un pais</option>
           			</select></dd>
</dl>
</form>

Un archivo encargado de buscar las provincias según el pais indicado. Primero se conectará a la base de datos, y luego devolverá los resultados.

ajax_provincias.php

1
2
3
4
5
6
7
8
9
10
11
12
13

<? 
   include_once ('db.php');
   $conn= get_db_conn();
   ?>
<? 
$conn=get_db_conn();
$pais= cleanQuery($_GET['pais']);
$provincias=mysql_query("SELECT * FROM estados WHERE relacion = '$pais'",$conn);
?><?
while( $row= mysql_fetch_assoc($provincias)){
		echo '<option value="'.$row['id'].'">'.$row['estado'].'</option>';
}
?>

Y por último el código JQuery que hará la magia de pasar el Pais seleccionado al archivo ajax_provincias.php mediante AJAX y luego cargará los valores devueltos dentro del segundo SELECT

cargarProvincias.js

1
2
3
4
5
6
7
8
9
10
11
12
13

function cargarProvincias(){
	$('#provincia').html('<option selected>Cargando</option>');
 
 	var idPais= $('#pais').val();
 
	var toLoad= 'cargar_provincias.php?pais='+ idPais ;
	$.post(toLoad,function (responseText){
 
	$('#provincia').html(responseText);
 
							});
 
}

Para terminar , le pueden echar una ojeada al DEMO ONLINE
Y descargar el código del ejemplo.

Listado completo de paises y provincias

Se que últimamente los tengo abandonados pero no me da el tiempo para tantas cosas, intentaré escribir un par de artículos este fin de semana.

Ahora los que les traigo es una lista de paises con sus respectivas provincias / estados en español. Se trata de un archivo SQL listo para ingresar en la base de datos con un total de 239 paises y 4291 provincias.

Esto viene genial para cuando necesitamos hacer por ejemplo un select dependiente (lo explico en el próximo artículo) en un formulario para que una ves elegimos el pais nos muestre sus respectivas provincias. Espero que les sirva de ayuda. Un saludo y hasta pronto.

Descargar Paises.sql

SHIPTimer – Gestion de flota pesquera o barcos en general

Hoy les traigo un review del programa SHIPtimer . Programa online realizado por Timersys.

SHIPtimer nace como el complemento ideal para las empresas pesqueras y armadores de barcos.

Con dicho software de gestión podrá controlar toda su flota y los trabajos que se realizan en ella.

Como Jefe de la empresa podrá controlar que los trabajos se hagan y el estado de los mismos desde cualquier lugar que se encuentre.

Para el Jefe Técnico de la flota es la herramienta ideal para mantener organizado todo, y poder guardar un historial completo. Podrá detectar tendencias en los problemas y así evitarlos o por ejemplo controlar los gastos según la cantidad de materiales que se soliciten.

Entre las principales características se encuentran:

• Ficha técnica completa de los barcos (Motores, tanques, números de serie, etc)
• Múltiples usuarios (podrá crear todos los usuarios que necesite)
• Software online (Al ser online podrá acceder desde cualquier sitio)
• Listado completo de trabajos con múltiples opciones de ordenación
• Task Manager (Podrá agregar tareas con avisos que le recordarán cuando realizarlas)
• Categorías y estados personalizables (Ej. de categorías: Electricidad, carpintería, etc;  Ej de estados: Nuevo, En progreso, Esperando repuestos)
• Control de talleres que realizan los trabajos
• Control de materiales a comprar y comprados por trabajo, o barco
• Búsquedas complejas (podrá encontrar cualquier trabajo realizado gracias a los múltiples métodos de búsqueda)
• Informes personalizados (Podrá imprimir informes de acuerdo al criterio deseado)
• Envio de emails (Podrá enviar actualizaciones de sus trabajos via email a múltiples usuarios de una forma más que sencilla)

Si desea puede ver el video tutorial que le explica las principales características del programa.

O visitar el DEMO Online y jugar un poco. ( Usuario : demo Password: demo)

Como añadir Google custom search a WordPress y modificar el template page

En este tutorial les voy a explicar una de las formas para agregar google custom search a wordpress. Como saben los que me siguen hace tiempo, no siempre me gusta usar plugins ya que el template de mi wordpress esta modificado y no siempre funcionan a la perfección.

Lo primero que necesitamos es ir a la página de Adsense y crear un motor de búsqueda personalizado.

Ingresas los datos que pide el formulario:

1. En «¿Qué quiere buscar?« seleccionamos Sólo los sitios que seleccione.
2. En «Seleccione algunos sitios« debemos ingresar la URL del blog donde se va a realizar la búsqueda.
3. En «Seleccione una edición« seleccionamos Edición estándar.
4. En «Palabras clave» podes poner algunos keywords que describar tu blog.
5. Despues elegimos el lenguaje de tu blog.
6. El formato o estilo de  la caja de texto. ( Más adelante voy a explicar como cambiar el estilo)
7. Y donde abrir los resultados. En este caso elegimos nuestro propio sitio y ponemos una dirección del estilo «http://masquewordpress.com/buscar«.
8. Elegimos solo mostrar anuncios en la parte derecha(esto a gusto de cada uno).
9. Cambiamos el estilo con la paleta de colores.
10. Aceptamos las Condiciones de servicio.
11. Elegimos un nombre para el buscador y le damos a obtener el código.

Seguir leyendo

Listado de las mejores fuentes echas a mano para diseños.Parte II

Siguiendo el hilo del post anterior aca les dejo el resto del listado de fuentes tipográficas echas a mano.

MrHodgey

Seguir leyendo

Listado de las mejores fuentes echas a mano para diseños.Parte I

De la mano de Smashing magazine llega este listado impresionante de fuentes tipográficas de estilo «echas a mano». Algunas de ellas echas a mano realmente y escaneadas luego a la computadora. Son ideales para inspirarse o para el diseño creativo usando un estilo diferente al que estamos acostumbrados.

Fiodor Sumkin

Maxwell Lord

Seguir leyendo

Como mostrar posts de forma aleatoria en el sidebar de wordpress

Hoy estuve mirando como hacer para mostrar algunos posts de forma aleatoria en el sidebar derecho de mi blog. Esto además de servir para que mis lectores vean una selección de posts al azar ,y así descubrir alguno que les sea de interes, es de utilidad para que los buscadores indexen más cantidad de páginas y así aumentar la posibilidad de que indexen todo el sitio.
Aunque existen infinidad de Plugins que crean widgets para realizar esta función, yo buscaba algo más simple y que pudiera agregar yo a mi template. Si algo he descubierto últimamente es que los widgets no se llevan bien con los templates modificados.
Despues de navegar por unos minutos di con un template tag (Se utilizan para mostrar información dinámica y así poder crear o modificar templates de una forma facil).

La template tag es cuestión es :

1

 <?php get_posts('arguments'); ?>

Donde la función get_posts se encarga de devolver cierta cantidad de posts dependiendo de los argumentos que le pasemos. Veamos algunos ejemplos:

1.Últimos Posts ordenados alfabeticamente por título.

El siguiente código muestra los últimos 10 posts ordenados alfabeticamente de forma ascendente. De ellos mostrará la fecha, el título y el extracto del artículo.

1
2
3
4
5
6
7
8
9
10
11
12

<?php
 $postslist = get_posts('numberposts=10&order=ASC&orderby=title');
 foreach ($postslist as $post) : 
    setup_postdata($post);
 ?> 
 <div>
 <?php the_date(); ?>
 <br />
 <?php the_title(); ?>   
 <?php the_excerpt(); ?>
 </div>
 <?php endforeach; ?>

1.Mostrar Posts de forma aleatoria.

El siguiente código mostrará 5 posts elegidos al azar por la función MySQL RAND() en el atributo orderby. Esta es la función que utilizo yo en mi barra lateral derecha para mostrar últimos artículos.

1
2
3
4
5
6
7
8
9

<h2>Últimos artículos</h2>
    <ul>
 <?php
 $rand_posts = get_posts('numberposts=6&orderby=rand');
 foreach( $rand_posts as $post ) :
 ?>
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
 <?php endforeach; ?>
    </ul>

Como pueden ver es muy fácil obtener los posts con diferentes opciones. Para ver un listado completo de opciones consulten la página de codex wordpress. Un saludo y hasta otra.