En una página, dentro de una tabla, aparecen los registros resultantes de una consulta MySQL que muestra rutas de buses. Al cliquear en un link en cada registro(fila) se abre un <tr> debajo del mismo con un <div> en el cual se muestra el resultado de otra consulta mysql (que muestra más detalladamente la ruta), sin recargar la página.
Pero el <div> que se abre tiene un id compuesto por un nombre fijo y una variable php (contenido$fila) siendo fila el número de fila del registro. Esto complica en el archivo funciones.js al indicar el <div> donde se mostrará el resultado.
Este es el erchivo resultado.php:
Código:
El valor $valor que se pasa oculto es un id de la ruta que hace cada linea.$fila=1;
...
...
<td>
<input id='nom' type='hidden' value="<?php echo '$valor';?>" />
<?php echo "<a href=\"javascript:void(0)\" onClick=\"SwitchBox('Cont$fila','btn$fila');buscar(document.getElementById('nom').value);\">Ver</a>\n"; ?>
</td>
<?php
echo "<tr colspan='10'>
<td class='ruta_completa' height='54' colspan='10'>
<div class='BoxCont' id='cont$fila' style='display: none;'>
</div>
</td>
</tr>\n";
echo "</tr>\n";
$fila++;
Estas son las funciones en el archivo funciones.js:
Código:
La función SwitchBox hace que se abra el div cont$fila en resultado.php, cada vez que doy click en el link de cada registro, debajo del mismo como otro <tr>, y funciona bien.function SwitchBox(bx,btn) {
// bx: id del contenedor
// btn: botón a cambiar imagen y texto
var estado = document.getElementById(bx).style.display
if (estado=='none') {
document.getElementById(bx).style.display = 'block';
document.getElementById(btn).src = 'images/less.gif';
document.getElementById(btn).title = 'Click para Contraer';
} else {
document.getElementById(bx).style.display = 'none';
document.getElementById(btn).src = 'img/more.gif';
document.getElementById(btn).title = 'Click para Expandir';
} // endif
} // end function
var req;
function buscar(valor) {
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "ruta_completa.php?valor="+valor;
req.open("Get", url, true);
req.onreadystatechange = function() {
if(req.readyState == 1) {
document.getElementById('cont$fila').innerHTML = 'espere ...';
}
if(req.readyState == 4 && req.status == 200) {
var respuesta = req.responseText;
document.getElementById('cont$fila').innerHTML = respuesta;
}
}
req.send(null);
}
La función buscar carga el resultado de la consulta mysql, hecha en un archivo procesa_valor.php, dentro del div cont$fila pero solamente si cambio el nombre del div a texto simple, sin variable $fila, p.e. <div id="cont">. En este caso solo muestra el primer registro repetido en todas las filas.
Necesito que javascript acepte la variable "cont$fila" y luego recibirla en resultado.php. O también pensé en hacer una sola función con la función buscar y la función SwitchBox sin tener que nombrar el div cont$fila.
Probé con las dos funciones solas y no hay caso.
Muchas gracias desde ya por su ayuda
