Duda de ajax
Hola:
Deseo corroborar si e es posible hacer lo sig:
Tengo un archivo php que tiene un 4 select, (tipo de vehículo:coche, camioneta; marca:ford, chevrolet; tipo:explorer, tsuru; version: estándar, etc) en un inicio despliego las imágenes de todos los vehículos que tengo, y conforme van usando los select se van reduciendo las imágenes porquq cada select aplica un filtro.
Las imágenes iniciales son un query de todos los vehículos.
Después conforme se van esocgiendo los select van reduciendo pr ejemplo al inicio tengo todos los autos y camionetas, cuando con el 1 select seleecionan autos, solo muestros los autos.
Tengo un código en ajax que me hace el select mediante consultas en ajax, pero algo que me cuesta entender es lo sig
el select esta en el archivo uno.php, ¿El código ajax lo tengo en un archivo js que incluyo en el uno.php (pr lo tanto tecnicamnte es parte de uno.php) después el ajax manda llamar un archivo proceso.php que ejecuta en el servidor una consulta y lo que me parece extraño es que desde el consulta.php arma el selec que esta en uno.php. Deseo confirmar si esto e es posible en ajax-php-javascript?
Espero haberme explicado y espero me pueda ayudar.
Lo que necesito es lo sig:
Ya comente que al inicio están todas las imágenes, por lo cual es un selec sin where, después al ir selecioando el selec va incrementando el where (tipo=1 and marca= 2 and ...) en donde están las imágenes están dentro de un div y este se va desplazando a la izq o dere según la posición del cursor) al seleccionar los selects, debo de hacer otra consulta con el where respectivo, y dentro del div tengo <a href><img></img></a> mediante DOM tengo que eliminar todas las imágenes que allá y después volver a crear las nuevas iamgenes, solo que desde el archivo proceso.php.
¿Si se puede hacer esto?
salu
Deseo corroborar si e es posible hacer lo sig:
Tengo un archivo php que tiene un 4 select, (tipo de vehículo:coche, camioneta; marca:ford, chevrolet; tipo:explorer, tsuru; version: estándar, etc) en un inicio despliego las imágenes de todos los vehículos que tengo, y conforme van usando los select se van reduciendo las imágenes porquq cada select aplica un filtro.
Las imágenes iniciales son un query de todos los vehículos.
Después conforme se van esocgiendo los select van reduciendo pr ejemplo al inicio tengo todos los autos y camionetas, cuando con el 1 select seleecionan autos, solo muestros los autos.
Tengo un código en ajax que me hace el select mediante consultas en ajax, pero algo que me cuesta entender es lo sig
el select esta en el archivo uno.php, ¿El código ajax lo tengo en un archivo js que incluyo en el uno.php (pr lo tanto tecnicamnte es parte de uno.php) después el ajax manda llamar un archivo proceso.php que ejecuta en el servidor una consulta y lo que me parece extraño es que desde el consulta.php arma el selec que esta en uno.php. Deseo confirmar si esto e es posible en ajax-php-javascript?
Espero haberme explicado y espero me pueda ayudar.
Lo que necesito es lo sig:
Ya comente que al inicio están todas las imágenes, por lo cual es un selec sin where, después al ir selecioando el selec va incrementando el where (tipo=1 and marca= 2 and ...) en donde están las imágenes están dentro de un div y este se va desplazando a la izq o dere según la posición del cursor) al seleccionar los selects, debo de hacer otra consulta con el where respectivo, y dentro del div tengo <a href><img></img></a> mediante DOM tengo que eliminar todas las imágenes que allá y después volver a crear las nuevas iamgenes, solo que desde el archivo proceso.php.
¿Si se puede hacer esto?
salu
1 Respuesta
Respuesta de davidcortesb
1
No sé si me aclarado muy bien con los ficheros que tienes, pero desde luego que puede hacerse con AJAX lo que quieres.
Al escoger en una select, se debería activar un evento (onChange por ejemplo) que realice la llamada AJAX a proceso.php para que éste haga la select i devuelva el código HTML de las imágenes.
Cuando lo devuelva, sustituyes el código de la div con este que te llega con un tudiv.innerHTML = elnuevocodigo
Es decir, que proceso.php no sólo hace la consulta sino que también genera el código necesario para mostrar las imágenes.
Al escoger en una select, se debería activar un evento (onChange por ejemplo) que realice la llamada AJAX a proceso.php para que éste haga la select i devuelva el código HTML de las imágenes.
Cuando lo devuelva, sustituyes el código de la div con este que te llega con un tudiv.innerHTML = elnuevocodigo
Es decir, que proceso.php no sólo hace la consulta sino que también genera el código necesario para mostrar las imágenes.
Gracias por ayudarme.
Si creo entender lo que me dices, el caso es que no usa el innerHTML, sino que directamente lo crea desde el proceso.php. mira te copio extractos de cada archivo para que lo veas:
extracto de uno.php
$consulta = $db->query("SELECT id, descripcion FROM datos where padre = 0");
//desconectar();
// Voy imprimiendo el primer select compuesto por los paises
echo "<select name='select1' id='select1' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>Tipo Vehiculo</option>";
while($registro = $db->getRow())
{
echo "<option value='".$registro['id']."'>".$registro['descripcion']."</option>";
}
echo "</select>";
extracto de archivo js:
function cargaContenido(idSelectOrigen)
{
// Obtengo la posición que ocupa el select que debe ser cargado en el array declarado más arriba
var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
// Obtengo el select que el usuario modifico
var selectOrigen=document.getElementById(idSelectOrigen);
// Obtengo la opcion que el usuario selecciono
var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
// Si el usuario eligió la opción "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opción..."
if(opcionSeleccionada==0)
{
var x=posicionSelectDestino, selectActual=null;
// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
while(listadoSelects[x])
{
selectActual=document.getElementById(listadoSelects[x]);
selectActual.length=0;
var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona ...";
selectActual.appendChild(nuevaOpcion); selectActual.disabled=true;
x++;
}
}
// Compruebo que el select modificado no sea el ultimo de la cadena
else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
{
// Obtengo el elemento del select que debo cargar
var idSelectDestino=listadoSelects[posicionSelectDestino];
var selectDestino=document.getElementById(idSelectDestino);
// Creo el nuevo objeto AJAX y envío al servidor el ID del select a cargar y la opción seleccionada del select origen
var ajax=nuevoAjax();
ajax.open("GET", "includes/procesoSelect.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1)
{
// Mientras carga elimino la opción "Selecciona Opción..." y pongo una que dice "Cargando..."
selectDestino.length=0;
var nuevaOpcion=document.createElement("option");
nuevaOpcion.value=0;
nuevaOpcion.innerHTML="Cargando...";
selectDestino.appendChild(nuevaOpcion);
selectDestino.disabled=true;
}
if (ajax.readyState==4)
{
selectDestino.parentNode.innerHTML=ajax.responseText;
}
}
ajax.send(null);
}
extracto del proceso.php:
$selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];
if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
{
$tabla=$listadoSelects[$selectDestino];
$consulta = $db->query("SELECT id, descripcion FROM $tabla WHERE padre='$opcionSeleccionada'");
// Comienzo a imprimir el select
echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>Elige</option>";
//while($registro=mysql_fetch_row($consulta))
while($registro= $db->getRow())
{
// Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualización
$registro['descripcion']=htmlentities($registro['descripcion']);
// Imprimo las opciones del select
echo "<option value='".$registro['id']."'>".$registro['descripcion']."</option>";
}
echo "</select>";
}
?>
Como ves en proceso.php imprime direcatmente con echo los selects correspondienmtes según los que se hayan obtenido de la consulta.
Es decir yo había entendido que ajax consultaba la base de datos, obtenía los datos y los procesaba, pero aquí ajax ejecuta una archivo php y nada más, el archivo php hace la consulta, y "genera los select". Esta es la parte que no entiendo.
saludops
Si creo entender lo que me dices, el caso es que no usa el innerHTML, sino que directamente lo crea desde el proceso.php. mira te copio extractos de cada archivo para que lo veas:
extracto de uno.php
$consulta = $db->query("SELECT id, descripcion FROM datos where padre = 0");
//desconectar();
// Voy imprimiendo el primer select compuesto por los paises
echo "<select name='select1' id='select1' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>Tipo Vehiculo</option>";
while($registro = $db->getRow())
{
echo "<option value='".$registro['id']."'>".$registro['descripcion']."</option>";
}
echo "</select>";
extracto de archivo js:
function cargaContenido(idSelectOrigen)
{
// Obtengo la posición que ocupa el select que debe ser cargado en el array declarado más arriba
var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
// Obtengo el select que el usuario modifico
var selectOrigen=document.getElementById(idSelectOrigen);
// Obtengo la opcion que el usuario selecciono
var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
// Si el usuario eligió la opción "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opción..."
if(opcionSeleccionada==0)
{
var x=posicionSelectDestino, selectActual=null;
// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
while(listadoSelects[x])
{
selectActual=document.getElementById(listadoSelects[x]);
selectActual.length=0;
var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona ...";
selectActual.appendChild(nuevaOpcion); selectActual.disabled=true;
x++;
}
}
// Compruebo que el select modificado no sea el ultimo de la cadena
else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
{
// Obtengo el elemento del select que debo cargar
var idSelectDestino=listadoSelects[posicionSelectDestino];
var selectDestino=document.getElementById(idSelectDestino);
// Creo el nuevo objeto AJAX y envío al servidor el ID del select a cargar y la opción seleccionada del select origen
var ajax=nuevoAjax();
ajax.open("GET", "includes/procesoSelect.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1)
{
// Mientras carga elimino la opción "Selecciona Opción..." y pongo una que dice "Cargando..."
selectDestino.length=0;
var nuevaOpcion=document.createElement("option");
nuevaOpcion.value=0;
nuevaOpcion.innerHTML="Cargando...";
selectDestino.appendChild(nuevaOpcion);
selectDestino.disabled=true;
}
if (ajax.readyState==4)
{
selectDestino.parentNode.innerHTML=ajax.responseText;
}
}
ajax.send(null);
}
extracto del proceso.php:
$selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];
if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
{
$tabla=$listadoSelects[$selectDestino];
$consulta = $db->query("SELECT id, descripcion FROM $tabla WHERE padre='$opcionSeleccionada'");
// Comienzo a imprimir el select
echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>Elige</option>";
//while($registro=mysql_fetch_row($consulta))
while($registro= $db->getRow())
{
// Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualización
$registro['descripcion']=htmlentities($registro['descripcion']);
// Imprimo las opciones del select
echo "<option value='".$registro['id']."'>".$registro['descripcion']."</option>";
}
echo "</select>";
}
?>
Como ves en proceso.php imprime direcatmente con echo los selects correspondienmtes según los que se hayan obtenido de la consulta.
Es decir yo había entendido que ajax consultaba la base de datos, obtenía los datos y los procesaba, pero aquí ajax ejecuta una archivo php y nada más, el archivo php hace la consulta, y "genera los select". Esta es la parte que no entiendo.
saludops
Parece que lo que está aquí programado es una llamada AJAX para adecuar las select a los valores correctos según la selección. Esto es típico de las selects encadenadas. En la primera puedes escoger tipos de artículo (coches, motos, furgonetas, bicicletas...) y cuando escoges, la siguiente select muestra opciones adecuadas a esa selección (para bicicletas, mancha, sillín, timbre, pedal y para coches, retrovisor, gato, faro, etc. por ejemplo).
Pero esto no soluciona tu otro problema.
Lo que debes hacer es, si este código funciona bien con tus select, realizar una segunda llamada AJAX para que te devuelva las fotografías con sus datos. Llama a otro fichero, digamos muestrario.php que haga lo que te dije: generar el código de dentro de la div con las imágenes.
No hay problema por hacer diversas llamadas AJAX. Cada una seguirá su curso y alimentará la zona que deba.
Pero esto no soluciona tu otro problema.
Lo que debes hacer es, si este código funciona bien con tus select, realizar una segunda llamada AJAX para que te devuelva las fotografías con sus datos. Llama a otro fichero, digamos muestrario.php que haga lo que te dije: generar el código de dentro de la div con las imágenes.
No hay problema por hacer diversas llamadas AJAX. Cada una seguirá su curso y alimentará la zona que deba.
Lo que yo pensaba hacer es, dentro de la misma función que hace la llamada de ajax, hacer otra llamada ajax, pues es en este momento cunado se realiza algún cambio en algún select, primero eliminar mediante dom las iamgenes actuales, después hacer la llamada ajax, y dentro de esta llamada crear las nuevas iamgenes, cada tag <a hre><img></img></a> crearlo desde el archivo que mande llamar en la llamada ajax y ahí poner las imágenes según el query.
Lo hago y te comento que paso.
Gracias
Lo hago y te comento que paso.
Gracias
EUREKA le entendi...
El php genera mediante los echo´s código que es devuelto mediante el ajax.responseText y este es incrustado en el código de la página con el innerHTML.
<div id="motioncontainer" style="position:relative;overflow:hidden; width:520; height:300" >
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
<nobr id="trueContainer">
<a href="/jupiter/index.php?idauto=1&c= 1 " title = "Ford - 2002">
<img src="image.php?id=1&marca=Ford&tipo=Automovil&ano=2002&color=Blanco&km=23,000&precio=130000"border=0 ></a>
<a href="/jupiter/index.php?idauto=2&c= 1 " title = "Crysler - 2002">
<img src="image.php?id=2&marca=Crysler&tipo=Automovil&ano=2002&color=Blanco&km=20000&precio=90000"border=0 ></a>
<a href="/jupiter/index.php?idauto=3&c= 1 " title = "Ford - 2001">
<img src="image.php?id=3&marca=Ford&tipo=Automovil&ano=2001&color=Rojo&km=123,000&precio=150000"border=0 ></a>
<a href="/jupiter/index.php?idauto=4&c= 1 " title = "Ford - 2002">
<img src="image.php?id=4&marca=Ford&tipo=Automovil&ano=2002&color=Negro&km=345,000&precio=0"border=0 ></a>
<a href="/jupiter/index.php?idauto=5&c= 1 " title = "Marca Avion 2 - 2000">
<img src="image.php?id=5&marca=Marca Avion 2&tipo=Mini Van&ano=2000&color=Blanco&km=1234&precio=123"></a>
</nobr>
</div>
</div>
Ahora tengo una segunda llamada de ajax y un archivo procesaImagen.php (de momento no hago consultas solo agregue código de html pues es el que me generara el php)
procesaImagenes.php
<?php
echo "<a href='/jupiter/index.php?idauto=1&c=1' title = 'Ford - 2002'><img src='image.php?id=1&marca=Ford&tipo=Automovil&ano=2002&color=Blanco&km=23,000&precio=130000'border=0 ></a> <a href='/jupiter/index.php?idauto=2&c=1' title = 'Crysler - 2002'><img src='image.php?id=2&marca=Crysler&tipo=Automovil&ano=2002&color=Blanco&km=20000&precio=90000'border=0 ></a><a href='/jupiter/index.php?idauto=3&c=1' title = 'Ford - 2001'><img src='image.php?id=3&marca=Ford&tipo=Automovil&ano=2001&color=Rojo&km=123,000&precio=150000'border=0 ></a> <a href='/jupiter/index.php?idauto=4&c=1' title = 'Ford - 2002'><img src='image.php?id=4&marca=Ford&tipo=Automovil&ano=2002&color=Negro&km=345,000&precio=0'border=0 ></a>";
?>
la llamada de ajax es esta
borra();
var ajax=nuevoAjax();
ajax.open("GET", "includes/procesoImagenes.php, true);
ajax.onreadystatechange=function()
{ if (ajax.readyState==1)
{
}
if (ajax.readyState==4)
{ document.getElementById("nobr").innerHTML = ajax.responseText;
}
}
ajax.send(null);
}
function borra()
{
var ancla = document.getElementById("trueContainer");
var padre = ancla.parentNode;
var hijoRemovido = padre.removeChild(ancla);
var newNobr=document.createElement('nobr');
newNobr.setAttribute('id','trueContainer');
document.getElementById('motiongallery').appendChild(newNobr);
}
Se supone que borra() lo que haces es eliminar las imágenes actuales que tengo en el nobr, eso lo hace bien, pero al agregar mediante el innerHTML, no lo agrega en el nobr, sino que parece que lo hace en donde están los selects, pues las imágenes aparecen después del 1 select y el tercer select, el segundo select desaparece. Como si estuviera remmplazando el 2 select por las imágenes que gnere con el procesaImagenes.php.
Espero me puedas ayudar a corregir el código. La idea es que las imágenes queden en el <nobr> llamado trueContainer
El php genera mediante los echo´s código que es devuelto mediante el ajax.responseText y este es incrustado en el código de la página con el innerHTML.
<div id="motioncontainer" style="position:relative;overflow:hidden; width:520; height:300" >
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
<nobr id="trueContainer">
<a href="/jupiter/index.php?idauto=1&c= 1 " title = "Ford - 2002">
<img src="image.php?id=1&marca=Ford&tipo=Automovil&ano=2002&color=Blanco&km=23,000&precio=130000"border=0 ></a>
<a href="/jupiter/index.php?idauto=2&c= 1 " title = "Crysler - 2002">
<img src="image.php?id=2&marca=Crysler&tipo=Automovil&ano=2002&color=Blanco&km=20000&precio=90000"border=0 ></a>
<a href="/jupiter/index.php?idauto=3&c= 1 " title = "Ford - 2001">
<img src="image.php?id=3&marca=Ford&tipo=Automovil&ano=2001&color=Rojo&km=123,000&precio=150000"border=0 ></a>
<a href="/jupiter/index.php?idauto=4&c= 1 " title = "Ford - 2002">
<img src="image.php?id=4&marca=Ford&tipo=Automovil&ano=2002&color=Negro&km=345,000&precio=0"border=0 ></a>
<a href="/jupiter/index.php?idauto=5&c= 1 " title = "Marca Avion 2 - 2000">
<img src="image.php?id=5&marca=Marca Avion 2&tipo=Mini Van&ano=2000&color=Blanco&km=1234&precio=123"></a>
</nobr>
</div>
</div>
Ahora tengo una segunda llamada de ajax y un archivo procesaImagen.php (de momento no hago consultas solo agregue código de html pues es el que me generara el php)
procesaImagenes.php
<?php
echo "<a href='/jupiter/index.php?idauto=1&c=1' title = 'Ford - 2002'><img src='image.php?id=1&marca=Ford&tipo=Automovil&ano=2002&color=Blanco&km=23,000&precio=130000'border=0 ></a> <a href='/jupiter/index.php?idauto=2&c=1' title = 'Crysler - 2002'><img src='image.php?id=2&marca=Crysler&tipo=Automovil&ano=2002&color=Blanco&km=20000&precio=90000'border=0 ></a><a href='/jupiter/index.php?idauto=3&c=1' title = 'Ford - 2001'><img src='image.php?id=3&marca=Ford&tipo=Automovil&ano=2001&color=Rojo&km=123,000&precio=150000'border=0 ></a> <a href='/jupiter/index.php?idauto=4&c=1' title = 'Ford - 2002'><img src='image.php?id=4&marca=Ford&tipo=Automovil&ano=2002&color=Negro&km=345,000&precio=0'border=0 ></a>";
?>
la llamada de ajax es esta
borra();
var ajax=nuevoAjax();
ajax.open("GET", "includes/procesoImagenes.php, true);
ajax.onreadystatechange=function()
{ if (ajax.readyState==1)
{
}
if (ajax.readyState==4)
{ document.getElementById("nobr").innerHTML = ajax.responseText;
}
}
ajax.send(null);
}
function borra()
{
var ancla = document.getElementById("trueContainer");
var padre = ancla.parentNode;
var hijoRemovido = padre.removeChild(ancla);
var newNobr=document.createElement('nobr');
newNobr.setAttribute('id','trueContainer');
document.getElementById('motiongallery').appendChild(newNobr);
}
Se supone que borra() lo que haces es eliminar las imágenes actuales que tengo en el nobr, eso lo hace bien, pero al agregar mediante el innerHTML, no lo agrega en el nobr, sino que parece que lo hace en donde están los selects, pues las imágenes aparecen después del 1 select y el tercer select, el segundo select desaparece. Como si estuviera remmplazando el 2 select por las imágenes que gnere con el procesaImagenes.php.
Espero me puedas ayudar a corregir el código. La idea es que las imágenes queden en el <nobr> llamado trueContainer
Hola:
Ya lo resolví, el problema era que esta usando el mismo var ajax y como que se hacia pelotas, así es que le puse ajax1 y listo funciona...
Gracias de todos modos por tu ayuda.
Ya lo resolví, el problema era que esta usando el mismo var ajax y como que se hacia pelotas, así es que le puse ajax1 y listo funciona...
Gracias de todos modos por tu ayuda.
Me alegro de que ya te funcione.
Si es así.
Si es así.
