Estoy creando una aplicación con Ajax y php, la idea es crear un menú con varias pestañas(las cuales cargan consultas de BD, y otras formularios), en las que tengo dudas, son las que tienen formularios, ya que les quisiera poner debajo del formulario una consulta de los datos existentes, y a medida que se cargan se actualicen. Necesito saber como cargar el formulario y luego la consulta (lo hice aparte, pero me carga todo al mismo tiempo, la idea es cargar el formulario, y que que se vaya cargando la consulta, cada uno independiente)
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 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();
}
ajax.js
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>
Por favor denme una orientación, de que buscar.
Aun estoy leyendo muchos tutoriales, y sigo buscando.
Gracias