logotipo de el mundo de deckerix
El mundo de deckerix
mascotas
El mundo de deckerix. [x]
logotipo de el mundo de deckerix

El mundo de Deckerix 0.4


by Oscar Carrascosa Blanco


Deprecated: Function split() is deprecated in /homepages/43/d272195232/htdocs/src/utiles/Fecha.php on line 65

Deprecated: Function split() is deprecated in /homepages/43/d272195232/htdocs/src/utiles/Fecha.php on line 66
Septiembre 16 2008 20:16:59

Selects dinamicos con Ajax by deckerix

Muchas veces tenemos que hacer que varios campos select de una página web sean dinámicos, es decir dependan unos de otros o que sus listas de valores se actualicen al realizar una determinada acción.

Una forma sencilla de realizar selects dinámicos es con Ajax. Os voy a presentar un sencillo ejemplo de esto. Para ello en primer lugar necesitamos un formulario con 2 inputs de tipo select:


	<html>
	<body>
	<script type="text/javascript" language="javascript" src="ajax_script.js"></script>

	<form name="formulario">

			<!-- primer select de categorias -->
			<select name="categorias" onchange="obtenerSubCategorias();">
				<option value="1">deportes</option>
				<option value="2">comida</option>
				<option value="3">empresas</option>
			</select>
			<!-- capa que contiene al segundo select, el dependiente -->
			<div id="capaSubCategorias">
				<select name="subCategorias">	</select>
			</div>
	</form>

	</body>
	</html>


Podemos ver en el primer select el evento onchange. Cuando el valor seleccionado para una categoria varíe, se ejecutará la función "obtenerSubCategorias". Esta función está definida en el fichero javascritp ajax_script.js. Este fichero es el siguiente:

function getXmlHttpRequestObject() {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		return new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		alert("Tu navegador no soporta la tecnología Ajax!Usa Firefox por ejemplo");
	}
}
var gestorPeticiones = getXmlHttpRequestObject();


function obtenerSubCategorias() {
	if (gestorPeticiones.readyState == 4 || gestorPeticiones.readyState == 0) {

		var idCategoria    = document.formulario.categorias.value;
		gestorPeticiones.open("POST", 'getSubCategorias.php', true);		
		gestorPeticiones.onreadystatechange = controlGetSubCategorias;
		gestorPeticiones.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		gestorPeticiones.send("idCategoria="+idCategoria);
	}		
}




function controlGetSubCategorias() {
	if (gestorPeticiones.readyState == 4) {
		var ss = document.getElementById('capaSubCategorias');
		var str = gestorPeticiones.responseText;
		ss.innerHTML =str;
		
		
	}
}

ObtenerSubCategorias utiliza la variable gestorPeticiones que es un objeto XMLHttpRequest, el cual es una interfaz empleada para realizar peticiones HTTP y HTTPS a servidores web.

El código es bastante sencillo y fácil de entender. Abrimos una conexión con el servidor pidiendo la página getSubCategorias.php y le pasamos como parámetros el idCategoria.

Cuando la conexión se haya efectuado, el control de las operaciones lo llevará la función controlGetSubCategorias. Esta función lo que hará es sustituir el contenido de la capa capaSubCategorias por el resultado obtenido en la página llamada, consiguiendo generar un nuevo select con las subcategorias de la categoria seleccionada.

El código de getSubCategorias.php es:


<?php
$idCategoria = $_GET['idCategoria'];
echo "<select>";
getSubcategorias($idCategoria);
echo "</select>";


/*recuperará las subcategorias a partir del id de categoria.*/
function getSubcategorias($idCategoria){
echo <<< OPCIONES
	<option value="1">a</option>
	<option value="2">b</option>
	<option value="3">c</option>
OPCIONES;
}
?>

Será necesario modificar este fichero, para atacar a la base de datos y generar dinámicamente los options del select a partir del id de la categoria.

Espero que os sea de ayuda.


Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 80

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 81

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 82

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 83

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 84

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 85

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 86

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 87

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 88

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 89

Deprecated: Function split() is deprecated in /homepages/43/d272195232/htdocs/src/utiles/Fecha.php on line 65

Deprecated: Function split() is deprecated in /homepages/43/d272195232/htdocs/src/utiles/Fecha.php on line 66

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 80

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 81

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 82

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 83

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 84

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 85

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 86

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 87

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 88

Deprecated: Function ereg_replace() is deprecated in /homepages/43/d272195232/htdocs/src/articulos/Comentario.php on line 89

Deprecated: Function eregi() is deprecated in /homepages/43/d272195232/htdocs/src/utiles/AgenteWeb.php on line 132
macmanus 17 Septiembre 2008 11:36:17

Muchas gracias Deckerix, en cuanto lleguea casa lo pruebo y te digo. THANKS :-)

Firefox 3.0.1 Windows XP

Nombre * (obligatorio)

Email

Web

El mundo de Deckerix es una creación de Óscar Carrascosa Blanco.

deckerix@gmail.com