También lo hice pero solo, osea sin las pestañas. Es como un Ajax dentro de otro Ajax, allí es donde no se que hacer. le dejo el código.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CCNPG - </title> <link href="estilos.css" rel="stylesheet" type="text/css"> <script language="JavaScript" type="text/javascript" src="ajax.js"></script> </head> <body> <div id="menu"> <a href="javascript:MostrarConsulta('consultaA.php', 'contenidos');">Formulario A</a> <a href="javascript:MostrarConsulta('formularioB.php', 'contenidos');">Formulario B</a> <a href="javascript:MostrarConsulta('formularioC.htm', 'contenidos');">Formulario C</a> <a href="javascript:MostrarConsulta('formularioD.htm', 'contenidos');">Formulario D</a> <a href="javascript:MostrarConsulta('formularioE.htm', 'contenidos');">Formulario E</a> <a href="javascript:MostrarConsulta('formularioF.htm', 'contenidos');">Formulario F</a> <a href="javascript:MostrarConsulta('formulario.htm', 'contenidos');">Resumen</a> <a href="javascript:MostrarConsulta('formularioFin.htm', 'contenidos');">Fin</a> </div> <div id="contenidos"> <h3>En esta capa se cargará asíncronamente varios fragmentos de código (x)html.</h3> <p>Consultas registros con ajax</p> <p>Insertar registros con ajax</p> <p>Escoger una opción del menú... </p> </div> </body> </html>
Código:
ajax.js//ajax 1.1
function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function enviarDatosEmpleado(){
//donde se mostrará lo resultados
divResultado = document.getElementById('resultado');
//valores de los inputs
nom=document.nuevo_empleado.nombres.value;
apl=document.nuevo_empleado.apellidos.value;
ci=document.nuevo_empleado.cedula.value;
//instanciamos el objetoAjax
ajax=objetoAjax();
//uso del medotod POST
//archivo que realizará la operacion
//registro.php
ajax.open("POST", "registro.php",true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
//mostrar resultados en esta capa
divResultado.innerHTML = ajax.responseText
//llamar a funcion para limpiar los inputs
LimpiarCampos();
}
}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//enviando los valores
ajax.send("nombres="+nom+"&apellidos="+apl+"&cedula="+ci)
}
function MostrarConsulta(datos,contenedor){
divResultado = document.getElementById(contenedor);
ajax=objetoAjax();
ajax.open("GET", datos);
ajax.onreadystatechange=function() {
if(ajax.readyState == 4) {
if(ajax.status==200) {
divResultado.innerHTML = ajax.responseText;
}else if(ajax.status==404){
divResultado.innerHTML = 'La direccion no existe';
}else {
divResultado.innerHTML = 'Error: '.ajax.status;
}
}else{
divResultado.innerHTML = 'Cargando...';
}
}
ajax.send(null)
}
function LimpiarCampos(){
document.nuevo_empleado.nombres.value="";
document.nuevo_empleado.apellidos.value="";
document.nuevo_empleado.cedula.value="";
document.nuevo_empleado.nombres.focus();
}
Código PHP:
<h3 id="titulos" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Formulario B</h3>
<p>Planta profesoral<br />
</p>
<TABLE BORDER="1">
<tr>
<td>Nombre:</td>
<td><input type="text" name="nombre" size="50" maxlength="50"</td><br>
</tr>
<tr>
<td>Apellido:</td>
<td><input type="text" name="apellido" size="50" maxlength="50"></td><br>
</tr>
<tr>
<td>Cédula de identidad:</td>
<td><input type="text" name="cedula" size="10" maxlength="10"></td><br>
</tr>
<tr>
<td align="right">Grado academico</td>
<td><select name="grado">
<option value="">Seleccione</option>
<option value="1">Técnico Superior Especialista</option>
<option value="2">Especialista</option>
<option value="3">Magister</option>
<option value="4">Magister Scientiarum</option>
<option value="5">Magister Scientiae</option>
<option value="6">Master</option>
<option value="7">Doctor</option>
<option value="8">Ph.D</option>
<option value="9">Philosophus Scientiarum</option></select></td>
</tr>
<tr>
<td align="right">Escalafon</td>
<td><select name="escalafon">
<option value="">Seleccione</option>
<option value="1">Instructor</option>
<option value="2">Asistente</option>
<option value="3">Agregado</option>
<option value="4">Asociado</option>
<option value="5">Titular</option>
<option value="6">Otros</option></select></td>
<tr>
<td colspan="2"><table border "1">
<td><input name="agregar" type="button" value="Añadir" ></td>
<td><input type="button" name="siguiente" value="Siguiente"></td>
</tr>
</table></td>
<tr>
<td colspan="2"> .</td>
</tr>
</table>
<div id="resultado"><?php include('consultaB.php');?></div> Código PHP:
<?php
//Configuracion de la conexion a base de datos
$bd_host = "localhost";
$bd_usuario = "user";
$bd_password = "xxxx";
$bd_base = "db";
$con = mysql_connect($bd_host, $bd_usuario, $bd_password);
mysql_select_db($bd_base, $con);
//consulta todos los empleados
$sql=mysql_query("SELECT * FROM profesionales LIMIT 0,1000",$con);
//muestra los datos consultados
//haremos uso de tabla para tabular los resultados
?>
<table style="border:1px solid #FF0000; color:#000099;width:400px;">//css
<tr style="background:#99CCCC;">
<td>Nombres</td>
<td>Apellidos</td>
<td>cedula</td>
</tr>
<?php
while($row = mysql_fetch_array($sql)){
echo " <tr>";
echo " <td>".$row['nombres']."</td>";
echo " <td>".$row['apellidos']."</td>";
echo " <td>".$row['cedula']."</td>";
echo " </tr>";
}
?>
</table> Aun estoy leyendo muchos tutoriales, y sigo buscando.
Gracias
