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

AJAX + prototype + validation

Estas en el tema de AJAX + prototype + validation en el foro de Frameworks JS en Foros del Web. Buenas amigos, " me estoy metiendo en camisa de 11 varas " como decimos en Venezuela, osea en algo bien complicado . OK me explico. ...
  #1 (permalink)  
Antiguo 05/05/2010, 09:34
Avatar de fenix4  
Fecha de Ingreso: noviembre-2001
Ubicación: Caracas
Mensajes: 226
Antigüedad: 23 años
Puntos: 1
AJAX + prototype + validation

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>&nbsp;</td>
                        <td width="100">&nbsp;</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&iacute;fica</a>
                    <a id="enlaceD" href="#" class="letra_menu">Convenios</a> 
                    <a id="enlaceE" href="#" class="letra_menu">L&iacute;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&oacute;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 &copy; 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;

}
formularioB2.php
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&eacute;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&eacute;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&oacute;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>
__________________
S.L.P.S.
  #2 (permalink)  
Antiguo 07/05/2010, 11:13
Avatar de fenix4  
Fecha de Ingreso: noviembre-2001
Ubicación: Caracas
Mensajes: 226
Antigüedad: 23 años
Puntos: 1
Respuesta: AJAX + prototype + validation

Buenas tardes!!!

En verdad que no logre conseguir si funcia ajax solito y el prototype con el validation..

Lo que hice fue migrar toooodo el código a prototype, y así si me funciona, fue un fastido, pero ahora trabajo menos.
__________________
S.L.P.S.
  #3 (permalink)  
Antiguo 10/05/2010, 12:06
Avatar de cesarpunk  
Fecha de Ingreso: enero-2008
Ubicación: Lima
Mensajes: 943
Antigüedad: 16 años, 10 meses
Puntos: 9
Respuesta: AJAX + prototype + validation

Hola.... disculpa por desvirtuar tu tema... ¿porqué es necesario validarlo con prototype? creo que más sencilllo es si hago un

Código:
function mifuncion(formulario) {
	$(formulario).request();
}
y valido en el servidor... y bueno puedo devolver el responseText en un alert().
__________________
Quitenme la vida pero no la bebida.

Etiquetas: ajax, prototype, validar
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 01:07.