Buenas amigos, "
me estoy metiendo en camisa de 11 varas" como decimos en Venezuela, osea
en algo bien complicado.
OK me explico. Estamos desarrollando con AJAX, hice una aplicación que dependiendo de cada pestaña abre una instancia de AJAX diferente. En cada pestaña se hace el llamado de 3 AJAX uno para un formulario y otro para un reporte. Hasta allí todo bien!!!
Luego que tenia eso listo me puse a investigar sobre las validaciones y consegui validation que utiliza prototype. Hice un ejemplo y luego se lo coloque al mi formulario inicial de login(que no usa AJAX) y todo bien. Pero cuando lo trate de usarlas en el código que es llamado por un AJAX no me funciona.
¿Que podrá ser?
Nota: Si desde el archivo index.php hago un include del archivo formularioB2.php si me funciona, pero si lo instacio desde AJAX, es que no me funciona
index.php Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.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 - SIREPP</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript" charset="iso-8859-1" src="js/prototype.js"></script>
<script language="JavaScript" type="text/javascript" charset="iso-8859-1" src="js/validation.js"></script>
<script language="JavaScript" type="text/javascript" charset="iso-8859-1" src="ajax/ajax1.js"></script>
</head>
<body>
<table align="center" class="tb_fondo">
<tr>
<td colspan="2" bgcolor="#FFFFFF">
<table width="100%" align="center" border="0" cellspacing="3" cellpadding="0">
<tr>
<td><img src="img/ImagenGraficaIzq.png" alt=" Logo Gobierno Bolivariano de Venezuela MPPES"></td>
<td align="right"><img src="img/ImagenGraficaDer.png" alt="Logo Venezuela ahora es de todos"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" height="5" bgcolor="#FF0000"></td>
</tr>
<tr>
<td colspan="2">
<table wiht="100%">
<tr>
<td width="54"><img src="img/logoCNU.png" alt="Logo CNU" title="Consejo Nacional de Universidades" ></td>
<td width="140" class="titulos">Consejo Nacional<br>de Universidades</td>
<td width="85"><img src="img/logoCCNPG.png" alt="Logo CCNPG" title="Consejo Consultivo Nacional de Postgrado" ></td>
<td width="170" class="titulos"> Consejo Consultivo <br>Nacional de Postgrado</td>
<td> </td>
<td width="100"> </td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="FFFFFF" >
<td colspan="2" height="20" align="center" valign="center" >
<SPAN class="titulos"> SISTEMA DE REGISTRO DE PROGRAMAS DE POSTGRADO</span>
</td>
</tr>
<tr>
<td colspan="2">
<div id="divPrograma" >
Datos del programa
</div>
</td>
</tr>
<tr>
<td valign="top" height="180">
<div id="menu">
<a id="enlaceB" href="#" class="letra_menu">Planta Profesoral</a>
<a id="enlaceC" href="#" class="letra_menu">Prod. Científica</a>
<a id="enlaceD" href="#" class="letra_menu">Convenios</a>
<a id="enlaceE" href="#" class="letra_menu">Líneas de Inv.</a>
<a id="enlaceF" href="#" class="letra_menu">Proyectos</a>
<a id="enlaceG" href="#" class="letra_menu">Resumen</a>
<a id="salir" href="salir.php" class="letra_menu">Cerrar Sesión</a>
</div>
</td>
<td rowspan="2" valign="top" >
<div id="contenidos" class="conteni2">Div formulario
</div>
<div id="resultados">Div resultados</div>
<div id="reporte">Div reporte</div>
</td>
</tr>
<tr>
<td valign="top"><span class="letra_subFooter">Ccs / Venezuela - Consejo Consultivo Nacional de Postgrado - Copyright © 2010</span></td>
<td></td>
</tr>
</table>
</body>
</html>
ajax1.js
Código:
addEvent(window,'load',inicializarEventos,false);
function inicializarEventos()
{
// Asignamos el evento Onclick al boton1
var $ob1=document.getElementById('enlaceB');
addEvent($ob1,'click',presionBotonB,false);
presionBotonB();
}
//Funciones Presionaron un Boton---------------------------------------------
function presionBotonB(B)
{
cargarFormulario('php/formularioB2.php') ;
}
// funciones varias ----------------------------------------------------------------------
function mostrarDiv($Div){
var $IdDiv = document.getElementById($Div);
$IdDiv.style.display='';
}
// session de ajax -------------------------------------------------------
var $conexion1;//La variable es global para los manejos de eventos
function cargarFormulario(url)
{
if(url=='')
{
return;
}
$conexion1=crearXMLHttpRequest();
$conexion1.onreadystatechange = procesarEventosContenidos;
$conexion1.open("GET", url, true);
$conexion1.send(null);
mostrarDiv("contenidos");// muestra div por si esta oculto
}
function procesarEventosContenidos()
{
var $IdContenidos = document.getElementById("contenidos");
if($conexion1.readyState == 4)
{
if($conexion1.status==200)
{
$IdContenidos.innerHTML = $conexion1.responseText;
}else if($conexion1.status==404){
$IdContenidos.innerHTML = 'La direccion no existe';
}else {
$IdContenidos.innerHTML = 'Error: '.$conexion1.status;
}
}
else
{
$IdContenidos.innerHTML ='<img src="/MI3/img/cargando.gif" alt="Cargando..." >';
}
}
//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura){
if (elemento.attachEvent) {
elemento.attachEvent('on'+nomevento,funcion);
return true;
} else
if (elemento.addEventListener) {//
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}
function crearXMLHttpRequest() {
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
Código PHP:
<form name="formularioB" id="formularioB" action="#">
<table align="center">
<tr>
<td colspan="2" align="center">
<h5 id="titulos" class="titulo_detalle">
Planta Profesoral Adscrita al Doctorado
</h5>
<br>
</td>
</tr>
<tr>
<td>
<div class="letra_peq_det">
<label for="nombre">Nombres:</label>
</div>
</td>
<td>
<input type="text" name="nombre" id="nombre" class="required validate-alphanum" maxlength="50" title="Ingrese los nombres" />
<span class="letra_validar">*</span>
</td>
</tr>
<tr>
<td>
<div class="letra_peq_det">
<label for="usuario">Apellidos:</label>
</div>
<td>
<input type="text" name="apellido" id="apellido" class="required validate-alphanum" maxlength="50" title="Ingrese apellidos" />
</td>
<td>
</td>
</tr>
<tr>
<td class="letra_peq_det">
Cédula de identidad:
</td>
<td>
<input type="text" id="cedula" name="cedula" maxlength="10" class="campo_cedula">
<span class="letra_validar">*</span>
</td>
</tr>
<tr>
<td class="letra_peq_det">
Grado académico:
</td>
<td>
<?php
include('../cls/cls_conexiones.php');
$cn = new cls_conexion();
$cn->query = "SELECT id_grado as grado,nombre FROM grado_otorga";
$result = $cn->ejecutar();
$combo="<select id='id_grado' name='id_grado' SIZE=1 class='campo_form_lista'>\n<option value=0 selected>Seleccione</option>";
while($resultado = $cn->consultar())
{
$combo.="\n<option value='".$resultado[0]."'>".$resultado[1]."</option>";
}
$combo.="\n</select>";
echo $combo;
$cn->close();
?>
</td>
</tr>
<tr>
<td class="letra_peq_det">
Escalafón:
</td>
<td>
<?php
$cn->query = "SELECT id_escalafon as escalafon,nombre FROM escalafon";
$result = $cn->ejecutar();
$combo="<select id='id_escalafon' name='id_escalafon' SIZE=1 class='campo_form_lista'>\n<option value=0 selected>Seleccione</option>";
while($resultado = $cn->consultar())
{
$combo.="\n<option value='".$resultado[0]."'>".$resultado[1]."</option>";
}
$combo.="\n</select>";
echo $combo;
$cn->close();
?>
</td>
</tr>
<tr>
<td colspan="2" height="40" align="center" valign="bottom">
<input type="submit" id="agregar" name="agregar" value="Agregar" alt="Agregar" ACCESSKEY="enter">
<a id="siguientC" class="enlace" href="#" ><img src="img/Siguiente.gif" border="0" alt="Siguiente"></a>
</td>
</tr>
</table>
</form><p class="letra_validar">* Campos obligatorios</p>
<script type="text/javascript">
function formCallback(result, form) {
window.status = "valiation callback for form '" + form.id + "': result = " + result;
}
var valid = new Validation('formularioB', {immediate : true, onFormValidate : formCallback});
</script>