Pongo un ejemplo mas simple, hice un trabajo nuevo y mas simple para demostrarlo.
Index.html Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Ajax</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<table>
<tr>
<td>
<div id="contenido">
<!-- Aca se va a cargar el contenido mediante ajax -->
</div>
</td>
<td>
<div>
<ul>
<li><a href="javascript:Enviar('cargar1.php','contenido')" title="Enlace 1">Enlace 1</a></li>
<li><a href="javascript:Enviar('cargar2.php','contenido')" title="Enlace 2">Enlace 2</a></li>
<li><a href="javascript:Enviar('cargar3.php','contenido')" title="Enlace 3">Enlace 3</a></li>
</ul>
</div>
</td>
</tr>
</table>
</body> Cargar1.php Código PHP:
<?php
include("conexion.php");
$consulta= "select id, opcion from lista_paises order by opcion asc";
$resultado= mysql_query($consulta);
?>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function(){
$("#pais").change(function(event){
var id = $("#pais").find(':selected').val();
$("#estado").load('genera-estado.php?id='+id);
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Pais:</td>
<td colspan="3">
<select name="pais" id="pais" style="width:223px">
<option value="0" selected>Selecciona</option>
<?php
while ($fila = mysql_fetch_array($resultado)){
echo "<option value='" .$fila['0']. "'>" .$fila['1']. "</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td>Estado:</td>
<td colspan="3">
<select name="estado" id="estado" style="width:223px">
<!-- Aca se cargan los estados dependiendo del pais seleccionado -->
</select>
</td>
</tr>
</table>
</body>
genera-estado.php Código PHP:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<?php
include("conexion.php");
$valor=$_GET['id'];
$consulta = "select * from lista_estados where relacion='$valor' ";
$resultado= mysql_query($consulta);
while ($fila = mysql_fetch_array($resultado)){
echo "<option value='" .$fila['0']. "'>" .$fila['1']. "</option>";
};
?>
Y el archivo ajax que haca cargar los formularios sin recargar la pagina:
Código HTML:
function ajaxFunction() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
} catch (e) {
alert("Tu navegador no soporta AJAX!");
return false;
}}}
}
function Enviar(_pagina,capa) {
var
ajax;
ajax = ajaxFunction();
ajax.open("POST", _pagina, true);
ajax.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{
if (ajax.readyState == 4)
{
document.getElementById(capa).innerHTML =
ajax.responseText;
}}
ajax.send(null);
}