Holas a tod@s,
Tengo un formulario que se compone de las siguientes partes:
1 div con
id="formulario" que presenta un formulario para ser diligenciado
1 div con
id="botones" que contiene botones
1 div con
id="reporte" contenedor de las respuestas devueltas por ajax
Código PHP:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Definición de Reportes</title>
<meta name="description" />
<style type="text/css">
.clasetbl {
border-width: 1pt;
border-color: #000000;
background-color : white;
}
.claseinput {
border-style : solid;
border-width : 0.5px;
font-size : 11px;
font-weight : bold;
color : #000000;
font-family : verdana,arial;
}
.clasetd {
font-size : 12px;
font-weight : bold;
color : #000000;
font-family : verdana,arial;
}
.clasebody {
background-color : #F2F2F2;
font-family : arial;
}
</style>
<script language="javascript" src="datagrid1.js" type="application/javascript"></script>
</head>
<body class="clasebody">
<table cellspacing="0" cellpadding="0">
<table cellspacing="0">
<form name="forma" method="post">
<div id="formulario" name="formulario" cellspacing="0" cellpadding="0">
<tr>
<td class="clasetd">Codigo Reporte:
</td>
<td>
<input type="text" id="codigo" name="codigo" value="" class="claseinput" style="width:50px;" onChange="fDatos('formulario','buscar');">
</td>
</tr>
<tr>
<td class="clasetd">Nombre Reporte:
</td>
<td>
<input type="text" id="nombre" name="nombre" value="" class="claseinput" style="width:450px;">
</td>
</tr>
<tr>
<td class="clasetd">Grupos de Columnas:
</td>
<td>
<input type="text" id="grupos" name="grupos" value="" class="claseinput" style="width:30px;">
</td>
<tr>
<td class="clasetd">Nro. Columnas:
</td>
<td>
<input type="text" id="cols" name="cols" value="" class="claseinput" style="width:30px;" onChange="javascript: crearFilas();">
</td>
</tr>
</div>
<tr></tr>
<div id="botones" style="display=none">
<tr>
<td colspan="2"><input type="button" value="Grabar" id="graba" name="accion" onClick="fDatos('reporte','grabar');" style="background-color: #738EB5; height: 18; font-size: 8 pt; font-weight: bold; color: ffffff; border-style: solid; border-width: 1">
<input type="button" value="Reportar" id="repor" name="accion" onClick="fDatos('reporte','repor');" style="background-color: #738EB5; height: 18; font-size: 8 pt; font-weight: bold; color: ffffff; border-style: solid; border-width: 1"></td>
</tr>
</div>
<div border="0" id="reporte" name="reporte" cellspacing="0" cellpadding="0" background="white">
<tr></tr>
</div>
</form>
</table>
</table>
</body>
</html>
Al activarse el evento
onChange en el input código mediante ajax, con el método post, consulta la BD para verificar la existencia del reporte, de ser así el servidor devuelve los demás campos del formulario.
Luego de obtener el resultado se hace click sobre el boton
Reportar que también por ajax se debe hacer el llamado al mismo script php del paso anterior pero no lo hace. He verificado la url y el queryString y los veo bien pero no ejecuta el script php.... primer Por qué será?
Este es el script de ajax
Código PHP:
function nuevoAjax()
{
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 fDatos(contenedor,boton)
{
ss = document.getElementById("reporte");
ss.style.display='none';
var objTbl = document.getElementById(contenedor);
var objErr = document.getElementById("estado");
switch (boton) {
case "grabar":
var url = "genreport.php";
break;
case "repor":
case "buscar":
var url = "procesa_repor.php";
break;
}
alert(url);
ajax = nuevoAjax();
ajax.open("POST", url, true);
ajax.onreadystatechange = function()
{
switch (ajax.readyState)
{
case 0:
objTbl.innerHTML = 'Error 0. No se ha abierto la comunicación.';
break;
case 1:
objTbl.innerHTML="<img src='./imagenes/ajax-loader.gif'>"+" Procesando su peticion, un momento por favor...";
break;
case 2:
objTbl.innerHTML = 'Petición cargada, esperando respuesta del servidor...';
break;
case 3:
objTbl.innerHTML = '';
break;
case 4:
if (ajax.status == 200) {
ver = document.getElementById("formulario");
ver.style.display = 'block';
objTbl.innerHTML = ajax.responseText;
}
else
objTbl.innerHTML = 'Error 200';
break;
}
}
var qString;
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
if (boton != "grabar") {
repor = document.getElementById("codigo").value;
qString = "codigo="+repor+"&accion="+boton;
}
else {
grp = document.getElementById("grupos").value;
col = document.getElementById("cols").value;
qString = arma_queryString(grp,col,boton);
qString = qString+"&codigorep="+document.getElementById('codigo').value+"&nombre="+document.getElementById("nombre").value+"&subgrp=0";
}
alert(qString);
ajax.send(qString);
function arma_queryString(grps, cols, boton) {
grupos = "";
columnas = "";
tit = document.getElementById('tit0').value;
stit = document.getElementById('tit1').value;
qString = "tit0="+tit+"&stit="+stit+"&";
qString = qString+"grp="+grps+"&cols="+cols;
grpid = new Array();
for (i=1; i<=grps; i++) {
grpid = "grp"+i+"_0";
tgrp = document.getElementById(grpid).value;
g = "g"+i;
qString = qString+"&g"+i+"="+tgrp;
}
for (i=1; i<=grps; i++) {
for (j=0; j<=cols; j++) {
if (j==0)
clpid="c0_0";
else
clpid = "c"+j+"_"+i;
tcol = document.getElementById(clpid).value;
qString = qString+"&"+clpid+"="+tcol;
if (j==0)
selid="s0_0";
else
selid = "s"+j+"_"+i;
tsel = document.getElementById(selid).value;
qString = qString+"&"+selid+"="+tsel;
if (j==0)
txtid="t0_0";
else
txtid = "t"+j+"_"+i;
ttxt = document.getElementById(txtid).value;
qString = qString+"&"+txtid+"="+ttxt;
}
}
qString = qString+"&accion="+boton;
return qString;
}
}
Otra cosa, cuando ajax recibe la respuesta del primer paso, la idea es que muestre en pantalla tanto el div formulario como el div reporte, esto lo hace pero primero visualiza la respuesta y debajo el formulario, es decir, cambia la posición de los divs... Segundo Por qué será?
Agradezco de antemano la ayuda que puedan brindarme
Un Cordial Saludo,