Combos dependientes con php y jquery

Posted by pavel | General, JQuery, PHP | Sábado 11 Abril 2009 20:18

Tengo un combo dinámico con php del cual obtengo el id y el nombre del país seleccionado el cual me devuelve los datos mediante el formato Json los valores que se ponen en la segunda lista dependiendo del valor seleccionado en la primera.

Ahora pondremos dos combos, uno será el combo del país y la otra será el combo de la ciudad cual se llenara nuevamente en el evento onchange de la lista del país.

?Ver código PHP
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
26
27
28
29
30
31
32
33
34

<?
//Esta es una clase q implemente para la coneccion a la bd en el cual utilize la libreria adodb
include_once("database.php");
$coneccion=database::conectar();
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/combosDependientes.js" ></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Combos Dependientes</title>
</head>
<body>
<label>Pais :</label>
<?
		$querypais="select id_pais,pais_nom from pais order by pais_nom";
		$rspais=database::Reader($querypais,$coneccion);
 
				echo "<select name="pais">";
				echo "<option value="0">--Seleccione un pais--</option>";
			foreach (database::result($rspais) as $rowPais){
					echo "<option value='".$rowPais['id_pais']."'>".$rowPais['pais_nom']."</option>";			
			}
 
				echo "</select>";
 
 
?>
<p>
<label>Ciudad :</label>
<select name="ciudad"><option value="0">--Seleccione una ciudad--</option></select>
</p>
</body>
</html>

Luego creamos el fichero ciudad.php que se va encargar de rellenar la lista dependiente enviando los datos por el formato Json.

?Ver código PHP
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
26
27
28
29
30
31

<?php
include_once("database.php");
$coneccion=database::conectar();
 
	$queryciudad="select id_ciudad,ciudad_nom from ciudad where id_pais='".$_GET['idpais']."' order by ciudad_nom";
	$rsciudad=database::Reader($queryciudad,$coneccion);//ejecutamos la consulta
 
		$json = '[';
		$json_names = array();
			//verificamos si existe algun registro
		if(database::numfila($rsciudad)>0){
			//recorremos los registros retornados  
			foreach (database::result($rsciudad) as $rowciudad)
			{
 
				$ciudad=utf8_encode($rowciudad[ciudad_nom]);
				$json_names[] = "{optionValue: $rowciudad[id_ciudad], optionDisplay: '$ciudad' }";
			}
 
		}else{
				$json_names[] =  "{optionValue: '', optionDisplay: 'Seleccione'}";
 
		}
 
		$json .=implode(',', $json_names);//separamos el array por comas
		$json .= ']';
 
 
		echo $json; //devolvemos en formato json la data  
		unset($json,$json_names);//destruimos las variables creadas
?>

Por ultimo lanzamos una petición a nuestro fichero ciudad.php con los parámetros id_pais, cargamos con los datos que necesitamos para que al detectar un cambio en el elemento del select del pais este envié la petición indicando que quiero recibir los datos en formato json para luego recorrerlo y pintar las option que necesito para rellenar el select de la ciudad

?Ver código JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(function(){ 
	$("select[@name=pais]").change(function(){
		var idpais=$(this).val();//obtenemos el valor del pais seleccionado
 
 
	$.getJSON('ciudad.php?idpais='+idpais,function(json){//cargamos la lista dependiente
			var options = "";
			for(var i=0;i<json.length;i++){
			options+='<option value='+json[i].optionValue+'>'+json[i].optionDisplay+'</option>';
			}
			$('select[@name=ciudad] option').remove();
			$('select[@name=ciudad]').append(options);
		})
 
 
	})
 
 
})

Menu Web al estilo Apple y mejorado con Jquery

Posted by pavel | JQuery | Viernes 27 Marzo 2009 20:08

Un tutorial muy bueno que tiene implementado Apple en su sitio web, ademas esta mejorado con Jquery que realiza un efecto al pasar sobre cada uno de los enlaces mostrando una imagen.

menu_apple

Sin duda como para implementarlo en algún diseño web.

Tutorial :Enlace para ver el tutorial(inglés)

Autotab: plugin de jquery para auto-tabulacion de formularios

Posted by pavel | JQuery | Viernes 27 Marzo 2009 19:42

Autotab es un plugin de jquery que nos permite la auto-tabulacion entre los campos de un formulario .además filtra los caracteres a la hora de ingresar caracteres en el campo.

Una vez introducido el máximo de caracteres en el campo de texto, automáticamente pasa el foco al siguiente campo.

creamos el formulario, estableciendo el tamaño y el número máximo de caracteres permitidos

?Ver código HTML
1
2
3
4
5
6

<form>
<div><strong>Numero de Telefono</strong></div>
<input type="text" name="area_code" id="area_code" maxlength="3" size="3" /> -
<input type="text" name="number1" id="number1" maxlength="3" size="3" /> -
<input type="text" name="number2" id="number2" maxlength="4" size="5" />
</form>

Inicializamos el script, definiendo el formato, y los campos anteriores

?Ver código JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12

<script>
$(function(){
 
 
$('#area_code').autotab({ target: 'number1', format: 'numeric' });
 
$('#number1').autotab({ target: 'number2', format: 'numeric', previous: 'area_code' });
 
$('#number2').autotab({ previous: 'number1', format: 'numeric' });
 
})
</script>

Documentacion Autotab

Cambiar tab por enter

Posted by pavel | JQuery | Viernes 27 Marzo 2009 19:06

Aqui hay un pequeño ejemplo donde podremos tabular con la tecla enter:

?Ver código HTML
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script language="JavaScript">
$(function(){
	$("input[@type=text]").keydown(function(e){
		if (e.keyCode == 13) {
				var  tabIndex = parseFloat($(this).attr("tabindex")) + 1;
				$("input[@tabindex=" + tabIndex + "]").focus();
				return false;
		}
	})
})
</script>
</head>
<body>
<form >
Campo 1: <input type="text" name="campo1" tabindex="1" /><br />
Campo 2: <input type="text" name="campo2" tabindex="2" /><br />
Campo 3: <input type="text" name="campo3" tabindex="3" /><br />
<input type="submit" value="Enviar" />
</form>
</body>
</html>

obtener el valor de un radio button

Posted by pavel | JQuery | Viernes 27 Marzo 2009 18:42

Si tienes un formulario que incluye radiobutton, puedes obtener el valor del elemento seleccionado de esta manera:

?Ver código HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
$(function(){
 
 
 
$("button[@name=obtener]").click(function(){
var valor=$("input[@name=radio_button]:checked").val();
alert(valor);
})
 
})
 
</script>
</head>
 
<body>
<input name="radio_button" type="radio" value="1" />
<button type="button" name="obtener">Obtener</button>
</body>
</html>

Libreria ADOdb para PHP

Posted by pavel | PHP | Miércoles 7 Enero 2009 19:08

ADODB, es un conjunto de librerías de base de datos para PHP y Python, nos es útil para conectarnos a diferentes motores de bases de datos.

La ventaja reside en que la base de datos puede cambiar sin necesidad de reescribir cada llamada a la base de datos realizada por la aplicación.

Soporta las siguientes bases de datos:

MySQL, Oracle, Microsoft SQL Server, Sybase, Sybase SQL Anywhere, Informix, PostgreSQL, FrontBase, SQLite, Interbase (versiones de Firebird y Borland), Foxpro, Access, ADO, DB2, SAP DB and ODBC. Se puede conectar a Progress y CacheLite via ODBC.

A continuación un ejemplo del código para utilizar la librería.

Para hacer la conexión de la misma a la base de datos creamos un archivo que se llame conexión.php y dentro del mismo ponemos el siguiente código:

?Ver código PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php
function conectar() {
include('adodb/adodb.inc.php');
 	$db = ADONewConnection('mysql');
    	$nombre_usuario   = 'root';
	$password_usuario = 'root';
	$servidor = 'localhost';
	$basedatos = 'sysCetpro';
 
  	$db->Connect($servidor,$nombre_usuario, $password_usuario,$basedatos);
 
  if (!$db)
  {  return false;}
  else
  {  return $db;}
 
 
}
 
?>

Ahora ya tenemos la conexión a la base de dato hecha, el paso siguiente es realizar una consulta a la misma para obtener los datos almacenados.
Crearemos un archivo llamado alumno.php incluimos el archivo de conexión que posee el objeto ADODB ya creado y utilizamos el siguiente código para mostrar un listado de alumnos.

?Ver código PHP
1
2
3
4
5
6
7
8
9
10
11

<?php
include("conexion.php");
 
$db=conectar();//llama a la funcion conectar
 
$rs=$db->Execute("select * from tb_alumno");
while($row=$rs->fetchRow()){
echo $row['alu_nom']." ".$row['alu_pat']." ".$row['alu_mat']."<br>";
 
}
?>

Enlaces:

Lightbox al estilo Facebook

Posted by pavel | JQuery | Viernes 26 Diciembre 2008 18:14

Facebox, es un lightbox basado en jquery al mas puro estilo de Facebook, puedo mostrar imágenes, divs y paginas enteras basadas en ajax.

Calcular el tamaño de un archivo

Posted by pavel | PHP | Lunes 8 Diciembre 2008 21:03

Función q calcula el tamaño de un archivo ya sea en bytes, kilobytes, megabytes y gigabytes.

?Ver código PHP
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
26
27
28
29
30
31
32
33
34
35
36
37

<?php
function get_file_size($filename, $size_in = 'MB')
{
$size_in_bytes = filesize($filename);
 
// Precision: numero de decimales indicado por precision.
 
if($size_in == 'B')
{
$size = $size_in_bytes;
$precision = 0;
}
elseif($size_in == 'KB')
{
$size = (($size_in_bytes / 1024));
$precision = 2;
}
elseif($size_in == 'MB')
{
$size = (($size_in_bytes / 1024) / 1024);
$precision = 2;
}
elseif($size_in == 'GB')
{
$size = (($size_in_bytes / 1024) / 1024) / 1024;
$precision = 2;
}
 
$size = round($size, $precision);
 
	return $size.' '.$size_in;
}
 
$file = 'demo-jqueryform.rar';
 
echo get_file_size($file, 'KB');
?>

Probado en BitRepository

Detectar navegador de Google Chrome en php

Posted by pavel | General, PHP | Lunes 8 Diciembre 2008 20:25

Funcion en Php para saber si utilizan navegador de Google.

?Ver código PHP
1
2
3
4
5
6
7
8
9

<?php
function is_chrome(){
   return(eregi("chrome", $_SERVER['HTTP_USER_AGENT']));
}
 
if(is_chrome()){
  echo 'Tu estas utilizando Google Chrome.';
}
?>

Probado en BitRepository

jGrowl - Notificaciones en tu navegador

Posted by pavel | JQuery | Sábado 6 Diciembre 2008 23:17

Si eres usuario de Mac OS X seguro que utilizas Growl, una maravilla de sistema de notificación personalizable que se integra en las aplicaciones y te ofrece avisos de nuevos emails, descargas realizadas, avisos de la agenda, nuevos mensajes de chat, etc.
Bueno pues ahora hay un plugin de Jquery similar Growl ,que es el jGrowl, una librería basada en jQuery con la que podremos mostrar pequeños recuadros con mensajes cuando el usuario pulse sobre el texto que nosotros queramos.

Sitio oficial:jGrowl

Entradas siguientes »