Foros del Web » Programando para Internet » Javascript » Frameworks JS »

menus dependientes + sql

Estas en el tema de menus dependientes + sql en el foro de Frameworks JS en Foros del Web. Me pidieron que hiciera un formulario para ingresar en una DB los datos estado, ciudad y presidente municipal por medio de menus dependientes, es decir ...
  #1 (permalink)  
Antiguo 04/03/2009, 10:29
Avatar de blogger  
Fecha de Ingreso: diciembre-2005
Ubicación: frente al monitor
Mensajes: 398
Antigüedad: 18 años, 4 meses
Puntos: 12
menus dependientes + sql

Me pidieron que hiciera un formulario para ingresar en una DB los datos estado, ciudad y presidente municipal por medio de menus dependientes, es decir que en el formulario la persona seleccionara el estado, y que automaticamente le desplegara los nombres de la ciudad para que la seleccione, y que al seleccionar la ciudad automaticamente le aparezca el nombre del presidente municipal.

Quiero implementar el codigo que aparece en esta pagina: http://www.tunait.com/tutoriales/lis...esphpmysql.php pero no se como y no le entiendo muy bien.

¿Alguien me puede ayudar?
__________________
http://exegesis-biblica.com/
  #2 (permalink)  
Antiguo 04/03/2009, 10:41
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: menus dependientes + sql

Hola blogger,

Los menus dependientes, se hacen con AJAX para evitar el refresco de toda la pagina al cambiar el dato.

En las FAQs del foro de AJAX tienes información para realizarlo.

Saludos
  #3 (permalink)  
Antiguo 04/03/2009, 10:45
Avatar de blogger  
Fecha de Ingreso: diciembre-2005
Ubicación: frente al monitor
Mensajes: 398
Antigüedad: 18 años, 4 meses
Puntos: 12
Cita:
Iniciado por GatorV Ver Mensaje
Hola blogger,

Los menus dependientes, se hacen con AJAX para evitar el refresco de toda la pagina al cambiar el dato.

En las FAQs del foro de AJAX tienes información para realizarlo.

Saludos
Muchas gracias, pero entonces ya valio por que nunca en mi vida he utilizado AJAX, además de que necesito guardar los datos en un pdf.

Lo intente con el de Ajax que me dijiste, pero no me guarda las opciones que aparecen en el menu, en su lugar me guarda numeros.

¿Como puedo hacer que me guarde las opciones que aparecen en el menu?
__________________
http://exegesis-biblica.com/

Última edición por blogger; 04/03/2009 a las 12:50
  #4 (permalink)  
Antiguo 04/03/2009, 12:41
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: menus dependientes + sql

Pues sin ver el código que utilizas no te podría decir porque falla, te recomiendo exponer el código, como lo utilizas y en que parte falla.

Saludos
  #5 (permalink)  
Antiguo 04/03/2009, 13:00
Avatar de blogger  
Fecha de Ingreso: diciembre-2005
Ubicación: frente al monitor
Mensajes: 398
Antigüedad: 18 años, 4 meses
Puntos: 12
Respuesta: menus dependientes + sql

Sería algo como esto, la intencion es generar un documento dirigido al presidente municipal. Para esto utilizo el siguiente formulario, el cual al final genera un documento PDF. Utilizo el menu despegable de AJAX para cargar los datos del estado, la ciudad y el presidente municipal.

Código:
<?php
$nombre = $_POST["nombre"];
$fecha_nac = $_POST["fecha_nac"];
$lugar_nac = $_POST["lugar_nac"];
$direccion = $_POST["direccion"];
$codigo_postal = $_POST["codigo_postal"];
$estado = $_POST["select1"];
$ciudad = $_POST["select2"];
$presidente = $_POST["select3"];
if (!isset($_POST['submit'])) { // if page is not submitted to itself echo the form
?>
<form method="post" action="<?php echo $PHP_SELF;?>">
<b>Datos pesonales</b>
<table>
<tr><td>Nombre y apellidos:</td><td><input type="text" name="nombre" value="" /></td></tr>
<tr><td>Fecha de nacimiento: </td><td><input type="text" name="fecha_nac" value="" /></td></tr>
<tr><td>Lugar de nacimiento:</td><td><input type="text" name="lugar_nac" value="" /></td></tr>
<tr><td>Direccion actual:</td><td><input type="text" name="direccion" value="" /></td></tr>
<tr><td>Codigo Postal:</td><td><input type="text" name="codigo_postal" value="" /></td></tr>
<?php include ("select_dependientes_3_niveles.php");?>
</td></tr>
</table>
<input type="submit" value="Generar Carta" name="submit" />
</form>
</center>
</body>
</html>

<?
} else {

require_once("./dompdf-0.5.1/dompdf-0.5.1/dompdf_config.inc.php");

$html =

'<div align=right>'.$nombre.'<br />'.$direccion.'<br />'.$codigo_postal.'<br />'.$ciudad.', '.$estado.'<br /></div>'.
' '.presidente.'<br />'.

'cuerpo de la carta'

;

$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("carta.pdf");

}

?>
La cuestion es que en ciudad, estado me aparece 1 y 2 en el PDF, aparte de que me aparece en blanco en donde deberia ir el nombre del presidente.
__________________
http://exegesis-biblica.com/
  #6 (permalink)  
Antiguo 04/03/2009, 14:30
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: menus dependientes + sql

Pues ese código que muestras no se ve la parte de AJAX donde cargas los formularios ni como los generas.

Saludos
  #7 (permalink)  
Antiguo 04/03/2009, 14:54
Avatar de blogger  
Fecha de Ingreso: diciembre-2005
Ubicación: frente al monitor
Mensajes: 398
Antigüedad: 18 años, 4 meses
Puntos: 12
Respuesta: menus dependientes + sql

Lo que pasa es que tome el codigo tal cual esta en el FAQ que me mencionaste, lo unico que hice fue editar la parte de la base de datos, de ahi en fuera, todo se genera tal cual aparece en el FAQ de AJAX.
__________________
http://exegesis-biblica.com/
  #8 (permalink)  
Antiguo 04/03/2009, 15:07
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: menus dependientes + sql

Mmm pero cual de todos los links, en teoría puede ser ya que al generar el select este este tomando los valores, por lo que vas a tener que decirle al select que te guarde en el valor del "option" el texto del campo.

Saludos
  #9 (permalink)  
Antiguo 05/03/2009, 12:35
Avatar de blogger  
Fecha de Ingreso: diciembre-2005
Ubicación: frente al monitor
Mensajes: 398
Antigüedad: 18 años, 4 meses
Puntos: 12
Respuesta: menus dependientes + sql

Como no obtengo respuesta, voy a publicar los codigos de todos los archivos, para que puedan ayudarme... La cuestion es que en ciudad, estado me aparece 1 y 2 en el PDF, aparte de que me aparece en blanco en donde deberia ir el nombre del presidente.

El script de ajax select_dependientes_3_niveles.js

Código:
function nuevoAjax()
{ 
	/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
	lo que se puede copiar tal como esta aqui */
	var xmlhttp=false;
	try
	{
		// Creacion del objeto AJAX para navegadores no IE
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e)
	{
		try
		{
			// Creacion del objet AJAX para IE
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(E)
		{
			if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
		}
	}
	return xmlhttp; 
}

// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="select1";
listadoSelects[1]="select2";
listadoSelects[2]="select3";

function buscarEnArray(array, dato)
{
	// Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
	var x=0;
	while(array[x])
	{
		if(array[x]==dato) return x;
		x++;
	}
	return null;
}

function cargaContenido(idSelectOrigen)
{
	// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
	var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
	// Obtengo el select que el usuario modifico
	var selectOrigen=document.getElementById(idSelectOrigen);
	// Obtengo la opcion que el usuario selecciono
	var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
	// Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
	if(opcionSeleccionada==0)
	{
		var x=posicionSelectDestino, selectActual=null;
		// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
		while(listadoSelects[x])
		{
			selectActual=document.getElementById(listadoSelects[x]);
			selectActual.length=0;
			
			var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opci&oacute;n...";
			selectActual.appendChild(nuevaOpcion);	selectActual.disabled=true;
			x++;
		}
	}
	// Compruebo que el select modificado no sea el ultimo de la cadena
	else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
	{
		// Obtengo el elemento del select que debo cargar
		var idSelectDestino=listadoSelects[posicionSelectDestino];
		var selectDestino=document.getElementById(idSelectDestino);
		// Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
		var ajax=nuevoAjax();
		ajax.open("GET", "select_dependientes_3_niveles_proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
		ajax.onreadystatechange=function() 
		{ 
			if (ajax.readyState==1)
			{
				// Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
				selectDestino.length=0;
				var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
				selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;	
			}
			if (ajax.readyState==4)
			{
				selectDestino.parentNode.innerHTML=ajax.responseText;
			} 
		}
		ajax.send(null);
	}
}
El script que procesa la informacion en php select_dependientes_3_niveles_proceso.php

Código:
<?php
// Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido
$listadoSelects=array(
"select1"=>"select_1",
"select2"=>"select_2",
"select3"=>"select_3"
);

function validaSelect($selectDestino)
{
	// Se valida que el select enviado via GET exista
	global $listadoSelects;
	if(isset($listadoSelects[$selectDestino])) return true;
	else return false;
}

function validaOpcion($opcionSeleccionada)
{
	// Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
	if(is_numeric($opcionSeleccionada)) return true;
	else return false;
}

$selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];

if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
{
	$tabla=$listadoSelects[$selectDestino];
	include 'conexion.php';
	conectar();
	$consulta=mysql_query("SELECT id, opcion FROM $tabla WHERE relacion='$opcionSeleccionada'") or die(mysql_error());
	desconectar();
	
	// Comienzo a imprimir el select
	echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
	echo "<option value='0'>Elige</option>";
	while($registro=mysql_fetch_row($consulta))
	{
		// Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
		$registro[1]=htmlentities($registro[1]);
		// Imprimo las opciones del select
		echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
	}			
	echo "</select>";
}
?>
Otro mas en PHP select_dependientes_3_niveles.php
Código:
<?php
function generaSelect()
{
	include 'conexion.php';
	conectar();
	$consulta=mysql_query("SELECT id, opcion FROM select_1");
	desconectar();

	// Voy imprimiendo el primer select compuesto por los paises
	echo "<select name='select1' id='select1' onChange='cargaContenido(this.id)'>";
	echo "<option value='0'>Elige</option>";
	while($registro=mysql_fetch_row($consulta))
	{
		echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
	}
	echo "</select>";
}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- 



Este contenido es de libre uso y modificación bajo la siguiente licencia: http://creativecommons.org/licenses/by-nc-sa/2.5/deed.es

Sobre el reconocimiento:
Todos los códigos han sido realizados con la idea de que sirvan para colaborar con el aprendizage de aquellos que se están introduciendo
en estas tecnologías y no con el objetivo de que sean utilizados directamente en sitios web. No obstante si utilizas algún código en tu sitio 
(ya sea sin modificar o modificado), o si ofreces los fuentes para descargar o si bien decides publicar alguno de los artículos debes cumplir con:
-Colocar un link a http://www.formatoweb.com.ar/ajax/ visible por tus usuarios como forma de mención a la fuente original del contenido.
-Enviar un correo a [email protected] informando la URL donde el contenido se ha publicado o se va a publicar en un futuro.
-Si publicas los fuentes para descargar este texto no debe ser eliminado ni alterado.

Más ejemplos y material sobre AJAX en: http://www.formatoweb.com.ar/ajax/
Cualquier sugerencia, crítica o comentario son bienvenidos.
Contacto: [email protected]



-->

<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>AJAX, Ejemplos: Combos (select) dependientes de 3 niveles, codigo fuente - ejemplo</title>
<link rel="stylesheet" type="text/css" href="select_dependientes_3_niveles.css">
<script type="text/javascript" src="select_dependientes_3_niveles.js"></script>
</head>

<body>

			<div id="demo" style="width:600px;">
				<div id="demoDer">
					<select disabled="disabled" name="select3" id="select3">
						<option value="0">Selecciona opci&oacute;n...</option>
					</select>
				</div>
				<div id="demoMed">
					<select disabled="disabled" name="select2" id="select2">
						<option value="0">Selecciona opci&oacute;n...</option>
					</select>
				</div>
				<div id="demoIzq"><?php generaSelect(); ?></div>
			</div>

</body>
</html>
Y el script en PHP que tiene el formulario y lo manda a pdf cuando se ingresan los datos
Código:
<?php
$nombre = $_POST["nombre"];
$fecha_nac = $_POST["fecha_nac"];
$lugar_nac = $_POST["lugar_nac"];
$direccion = $_POST["direccion"];
$codigo_postal = $_POST["codigo_postal"];
$estado = $_POST["select1"];
$ciudad = $_POST["select2"];
$presidente = $_POST["select3"];
if (!isset($_POST['submit'])) { // if page is not submitted to itself echo the form
?>
<form method="post" action="<?php echo $PHP_SELF;?>">
<b>Datos pesonales</b>
<table>
<tr><td>Nombre y apellidos:</td><td><input type="text" name="nombre" value="" /></td></tr>
<tr><td>Fecha de nacimiento: </td><td><input type="text" name="fecha_nac" value="" /></td></tr>
<tr><td>Lugar de nacimiento:</td><td><input type="text" name="lugar_nac" value="" /></td></tr>
<tr><td>Direccion actual:</td><td><input type="text" name="direccion" value="" /></td></tr>
<tr><td>Codigo Postal:</td><td><input type="text" name="codigo_postal" value="" /></td></tr>
<?php include ("select_dependientes_3_niveles.php");?>
</td></tr>
</table>
<input type="submit" value="Generar Carta" name="submit" />
</form>
</center>
</body>
</html>

<?
} else {

require_once("./dompdf-0.5.1/dompdf-0.5.1/dompdf_config.inc.php");

$html =

'<div align=right>'.$nombre.'<br />'.$direccion.'<br />'.$codigo_postal.'<br />'.$ciudad.', '.$estado.'<br /></div>'.
' '.presidente.'<br />'.

'cuerpo de la carta'

;

$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("carta.pdf");

}

?>
__________________
http://exegesis-biblica.com/

Última edición por blogger; 05/03/2009 a las 12:40
  #10 (permalink)  
Antiguo 16/10/2009, 16:24
Avatar de blogger  
Fecha de Ingreso: diciembre-2005
Ubicación: frente al monitor
Mensajes: 398
Antigüedad: 18 años, 4 meses
Puntos: 12
Respuesta: menus dependientes + sql

Aun no he podido encontrar la respuesta, ¿alguien me puede ayudar?
__________________
http://exegesis-biblica.com/
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:04.