AJAX - NECESITO AYUDA

NECESITO AYUDA

Publicado por jorge (1 intervención) el 28/11/2006 00:20:20

Hola a todos, que tal estan??? bueno yo llevo un mes estujandome la cabeza con el tema de ajax y no consigo la solucion, estoy haciendo 3 listas select dependientes , cuando seleccionas el valor de la primera consulta la base de datos y selecciona la segunda y cuando selecciones el segundo select consulta a la base de datos el selec1 y el select 2 y muestra el resultado en la tercera, la base de datos es una tabla sola en la que tengo las columas id,tipo,provincia.pueblo,descripcion.
Bueno aqui les dejo el codigo que he hecho y solo me carga hasta el select dos pero no el tercero.
Agradeceria alguna ayuda o comentario y quedo a vuestra disposicion.

ahi va el codigo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<?php
function generaTipo()
{
$coneccion=mysql_connect("localhost", "usuario", "211176") or die(mysql_error());
mysql_select_db("solares", $coneccion) or die(mysql_error());
$consulta=mysql_query("Select * from busquedasuelo group by tipo");
mysql_close($coneccion);

// Voy imprimiendo el primer select compuesto por los paises
echo "<select class='combo' id='select_0' name='paises' onChange='cargaContenido()'>";
echo "<option value='0'>Selecciona tipo de suelo</option>";
while($registro=mysql_fetch_row($consulta))
{
echo "<option value='".$registro[1]."'>".$registro[3]."</option>";
}
echo "</select>";
}
?>

<html>
<head>
<style type="text/css">
.punteado
{
border-style:dotted;
border-color:#000000;
background-color:#EAEAEA;
font-family:Verdana;
font-size:10px;
text-align:center;
}

.combo
{
font-family:Verdana;
font-size:10px;
border-color:#CCCCCC;
}
</style>

<script language="javascript" type="text/javascript">
function nuevoAjax()
{
/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
lo que se puede copiar tal como esta aqui */
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E) { xmlhttp=false; }
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp=new XMLHttpRequest(); }

return xmlhttp;
}

function cargaContenido()
{
var valor=document.getElementById("select_0").options[document.getElementById("select_0").selectedIndex].value;
if(valor==0)
{
// Si el usuario eligio la opcion "Elige", no voy al servidor y pongo todo por defecto
combo=document.getElementById("select_1");
combo.length=0;
var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Pais...";
combo.appendChild(nuevaOpcion); combo.disabled=true;
}
else
{
ajax=nuevoAjax();
ajax.open("GET", "dependientes.php?seleccionado="+valor, true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1)
{
// Mientras carga elimino la opcion "Elige pais" y pongo una que dice "Cargando"
combo=document.getElementById("select_1");
combo.length=0;
var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
combo.appendChild(nuevaOpcion); combo.disabled=true;
}
if (ajax.readyState==4)
{
document.getElementById("fila_2").innerHTML=ajax.responseText;
}
}
ajax.send(null);
}
}
</script>
<script language="javascript" type="text/javascript">
function nuevoAjax1()
{
/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
lo que se puede copiar tal como esta aqui */
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E) { xmlhttp=false; }
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp=new XMLHttpRequest(); }

return xmlhttp;
}

function new()
{

var valor=document.getElementById("select_0").options[document.getElementById("select_0").selectedIndex].value;
var elemento;
var valor1=document.getElementById("select_1").options[document.getElementById("select_1").selectedIndex].text;
var elemento;
if(valor!=0)
{
ajax=nuevoAjax1();
// Envio al servidor el valor seleccionado y el combo al cual se le deben poner los datos
ajax.open("GET", "dependientes1.php?selectvalue0="+valor+"&selecttext1="+valor1, true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1)
{
// Mientras carga elimino la opcion "Elige" y pongo una que dice "Cargando"
elemento=document.getElementById("select_2");
elemento.length=0;
var opcionCargando=document.createElement("option"); opcionCargando.value=0; opcionCargando.innerHTML="Cargando...";
elemento.appendChild(opcionCargando); elemento.disabled=true;
}
if (ajax.readyState==4)
{
// Coloco en la fila contenedora los datos que recivo del servidor
document.getElementById("fila_3").innerHTML=ajax.responseText;
}
}
ajax.send(null);
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo</title>
</head>

<body>
<center>
<table border="1" width="400" style="border-style:none;">
<tr>
<td id="fila_1" width="50%" class="punteado"><?php generaTipo(); ?></td>
<td id="fila_2" width="50%" class="punteado">
<select class="combo" disabled="disabled" id="select_1" name="estados">
<option id="valor_defecto" value="0">Selecciona provincia...</option>
</select>
</td>
<td id="fila_3" width="50%" class="punteado">
<select class="combo" disabled="disabled" id="select_2" name="pueblos">
<option id="valor_defecto" value="0">Selecciona pueblo...</option>
</select>
</td>
</tr>
</table>
</center>
</body>
</html>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 6

Val: 30

RE:NECESITO AYUDA

Publicado por Yamil Bracho (184 intervenciones) el 29/11/2006 18:23:03

Jorge, te recomiendo que uses una biblioteca de Ajax y en tu caso como estas usando PHP una de las biblioetacs mas faciles de usar que he visto es MyBixc (http://www.litfuel.net/mybic/)

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

RE:NECESITO AYUDA

Publicado por Diego (1 intervención) el 07/12/2007 17:25:23

Hola Jorge, siento ver esta necesidad hasta ahora
lo encontr por que necesitaba extraer el text de una lista, y su codigo me sirvio, osea esta linea: valor1=document.getElementById("select_1").options[document.getElementById("select_1").selectedIndex].text;

bueno pero la razon por la cual le escribo es que aca le dejo un codigo que espero le sirva de ayuda acerca del ajax, son dos funciones laque es llamada inicialmente con algunos parametros si quiere, y la otra que se encarga de recibir los datos del ajax, usted ya debe entender como funciona,

recomendaciones que le puedo dar es que para cada combo debe crear un objeto ajax diferente, esto debido a que el ajax es asincronico es decir que no espera hasta que se ejecute una sentencia o una funcion para continuar con la siguiente, sino que se ejecutan tan pronto como se leen las sentencias se van ejecutando, osea que si usted manda allamar dos funciones de forma ordenada para que cargen combos, el javascript las ejecuta casi al mismo tiempo, y si usted uliliza la misma funcion para cargar combos, entonces va a tener problemas.

este tema se torna dificil cuando un combo carga otro y este otro carga otro nuevo, para el caso de hacer un formulario como los que genera el access con corrimiento de registros (primero, anterior, siguiente, ultimo), la idea es que entienda el concepto del proceso asincronico como trabaja el ajax, y de ahi en adelante sus conocimiento en javascript le daran la solucion para este tipo de problemas.

Nota: yo solucione este problema cargardo primero un arreglo de los combos que
eJ: moscombos[3] = [combo1, combo2, combo3];
luego al final de cada ajax retornado reutilizo la funcion cargar combos para cargar el siguiente combo que depende del primero y asi sucesibamente:

por decir algo
* combo pais = colombia
* combo departamento = huila
* combo municipio = neiva

var myobjeto;

function getobjeto() {
try {
objeto = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try {
objeto= new ActiveXObject("Microsoft.XMLHTTP");
}catch (E) {
objeto= false;
}
}
if (!objeto && typeof XMLHttpRequest!='undefined') {
objeto = new XMLHttpRequest();
}
return objeto;
}

function cargar_combo_estado(){
//alert("cargar_combo_estado");
if (myobjeto.readyState==4) {
//alert(myobjeto.status + ':' + myobjeto.statusString );
if(myobjeto.status==200){

var resp=myobjeto.responseXML; // obtener el resultado del ajax en formato XML
var cadena = myobjeto.responseText; // otra forma de tener el resultado del ajax en formato texto

// extraer informacion del resultado en XML nodo por nodo
var recursos = resp.getElementsByTagName("recurso");
var recurso = recursos[0];
var combos = recurso.getElementsByTagName("combo");
var combo = combos[0];
var nombre_combo = combo.getAttribute("cbo");
var cargar_combo = combo.getAttribute("cargar_combo");

var items = combo.getElementsByTagName("item");
document.getElementById(nombre_combo).length=0;
for (i=0;i<items.length;i++){
itemx = items[i];
var codigo = itemx.getElementsByTagName("codigo")[0].firstChild.nodeValue;
var nombre = itemx.getElementsByTagName("nombre")[0].firstChild.nodeValue;
var opt = document.createElement('OPTION');

opt.value = codigo;
opt.text = nombre + " -" + codigo ;

document.getElementById(nombre_combo).options.add(opt,i); //carga combo que esta en blanco con los resultados obtenidos del xml
}
//alert("fin:"+control_combo);
//var tipo_carga = 0;
//if (accion=="buscar"){tipo_carga =1;}
if (i>0){combo_listar(nombre_combo );}

}
}
}
function cargar_combo(combo,tabla,condiciones,limpiar_combos){
//alert("cargar_combo");
if(limpiar_combos != 0 ){
for (i=0;i<=limpiar_combos.length-1;i++){
document.getElementById(limpiar_combos[i]).length=0;
}
}
myobjeto=new getobjeto();
var url_combo = "cargar_cbo.jsp?combo="+combo+"&tabla="+tabla+condiciones ;
//document.getElementById("consola").innerHTML=url;
myobjeto.open("GET",url_combo,true);
myobjeto.onreadystatechange = cargar_combo_estado; // funcion que recive la informacion del ajax
myobjeto.send(null);

}

Valora esta respuesta

Comentar

Recoger Variables ajax+asp+js

Acento