Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/10/2007, 07:48
ikizume
 
Fecha de Ingreso: junio-2004
Mensajes: 4
Antigüedad: 20 años, 6 meses
Puntos: 0
Crear y cargar varias listas/combos con AJAX

Hola comunidad :)

abro este tema por un problema que tengo que alomejor a ustedes le puede pasar en un futuro y es el siguiente:

tengo una pagina donde muestro los datos ingresados previamente de otra por ejemplo los datos de un vehiculo(marca,modelo,placa,caja,color,etc) ahora donde muestro los datos ingresados existe un boton editar el cual hace lo siguiente: hace un llamado a un objeto ajax donde busco los datos del vehiculo por su id y luego construyo una tabla donde voy a ir mostrando los datos por ejemplo marca y su combo o lista con la marca del vehiculo guardado, el modelo y así sucesivamente.

el problema se origina especificamente cuando creo un combo(por js) hago un llamado a una funcion que crea un objeto ajax el cual me va a cargar los datos del combo y luego le añade las opciones con los resultados.. si son varios combos como es mi caso.. cuando estoy generando el primero y por ajax buscando los datos a cargar.. se genera el el segundo combo y tambien hace su llamado respectivo lo cual hace que el objeto ajax se interrumpa y no cargue ningun combo salvo el ultimo obviamente por que ya no tiene peticiones.

Bueno me gustaría saber si alguien tiene una idea de como solucionar este incoveniente o otra forma de hacerlo se los agradeceria muchisimo

Código HTML:
function editar_vehiculo(form){
  //var usuario = document.getElementById('usuario'); //id de la tabla
  var idvehiculo = document.getElementById("idv");
  var url = 'generico.php?';
  alert(idvehiculo.value);
  objAjax.abort();
  objAjax.open('POST',url,true);
  objAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  objAjax.onreadystatechange = crearFormulariovehiculo;
  objAjax.send("buscarvehiculo=1&claseObj=vehiculo&valor="+escape(idvehiculo.value)); //me devuelve los dato del registro del vehiculo
  return false;
}
//a partir de aqui voy creando la tabla 
function crearFormulariovehiculo(valor){
  var tabla = document.getElementById("vehiculoe");
  if(objAjax.readyState == 4){
    if(objAjax.status == 200){
	  var respuesta = objAjax.responseText;
	  
	  var resultado = new Array();
	  resultado = respuesta.split("|");
	  var tbody = tabla.getElementsByTagName("TBODY")[0];

	  //Generamos los cambios en la primera fila
	  var tr_1 = tbody.getElementsByTagName("TR")[0];
	  cel_1 = tr_1.getElementsByTagName("TD")[0];
	  cel_2 = tr_1.getElementsByTagName("TD")[1];
	  cel_1.innerHTML = "Marca:";
	  cel_2.innerHTML = "";
	  var lista = document.createElement("select");
	  lista.id = "id_marca";
	  lista.options[0] = new Option("- Seleccione -","");
	  lista.name="id_marca";
	  opciones = cargarlistapreseleccionada("marcavehiculo",lista.name,resultado[3]);// aqui se llama a la funcion que busca los datos del combo especifico y lo carga *
	  cel_2.appendChild(lista)
.
.
.
.
}

function cargarlistapreseleccionada(clase,NombreControlaLlenar,valor){
	     
  //INVOCAMOS EL OBJETO AJAX QUE BUSCARA EN BD EL RESULTADO DE LO QUE SE DESEA LLENAR EN LA LISTA
  objAjax = new xmlHttpRequest();
 
  
  var url = 'generico.php?';
  objAjax.open('POST',url,true);
  objAjax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	objAjax.onreadystatechange = function(){
	
												if(objAjax.readyState == 4){
													if(objAjax.status == 200){
														var lis = objAjax.responseText;													
												 		cargarOpciones2(lis,NombreControlaLlenar,valor);
											    	}	
												}
										   }
  objAjax.send("clase="+escape(clase)); // LA FUNCION CLASE SOLO BUSCA Y RETORNA (ID, INFORMACION) DE UNA TABLA
}
//SE LLENA LA LISTA CON EL RESULTADO DE LA BUSQUEDA Y SE SELECCIONA EL VALOR DE UN ELEMENTO YA SELECCIONADO PREVIAMENTE
function cargarOpciones2(lis,NombreControlaLlenar,valor){

  var primerarreglo = lis.split("~");
  var lista = document.getElementById(NombreControlaLlenar);
      for(i=0;i<primerarreglo.length;i++){
        var elemento  = primerarreglo[i].split("|");
		var opcion = new Option(elemento[1],elemento[0]);
		if(elemento[0] == valor){
		  opcion.setAttribute('selected','selected');
		}
		if (document.all) {
          lista.add(opcion);
        }
         else {
          lista.add(opcion,null);
        }
      } 
}