Unir dos aplicaciones desarrolladas con ajax en un solo script php

wilrocaul · #1 (**permalink**) 05/12/2008, 16:01

Que tal amigos, anteriormente había posteado sobre un tema de select dependientes del cual ya pude hacerlo funcionar correctamente.....

Realize dos aplicaciones similares diferentes de select dependientes por separado pero necesariamente debo colocarlas ambas dentro de una página php..

Me salió un problema que al ejecutar el script una de las dos aplicaciones no funciona...(la primera que coloco dentro del script)

Al hacerlas funcionar por separado funciona ambas perfectamente pero al unirlas una deja de funcionar...ojala me puedan ayudar...

El codigo para la primera aplicacion es algo asi:

Código HTML:

<script type="text/javascript" language="javascript">
//1.----INSTANCIAR REQUEST--------------------------------------------
function inicializa_xhr() {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest(); 
  } else if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
}
//MOSTRAR MENUS_SECCIONES-----------------------------------
function muestraSecciones() {
  if (peticion.readyState == 4) {
    if (peticion.status == 200) {
      var lista = document.getElementById("seccion");
      var secciones = eval('(' + peticion.responseText + ')');
	  lista.options[0] = new Option("- Información General -");
      var i=1;
      for(var codigo in secciones) {
        lista.options[i] = new Option(secciones[codigo], codigo);
        i++;
      }
    }
  }
}

//CARGAR MENUS----------------------------------
function cargaMenus() {
  var lista = document.getElementById("seccion");
  var seccion = lista.options[lista.selectedIndex].value;
  peticion = inicializa_xhr();
    if (peticion) {
      peticion.onreadystatechange = muestraMenus;
      peticion.open("POST", "http://localhost/www.dominio.com/menu_vertical/servidor/menus_menusJSON.php?nocache=" + Math.random(), true);
      peticion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	  peticion.send("seccion=" + seccion);
    }
  
}
//MOSTRAR MENUS--------------------------------
function muestraMenus() {
  if (peticion.readyState == 4) {
    if (peticion.status == 200) {
	 var lista = document.getElementById("menu");
	 var menus= eval('(' + peticion.responseText + ')');
	 lista.options.length = 0;
      var i=0;
      for(var codigo in menus) {
        lista.options[i] = new Option(menus[codigo], codigo);
        i++;
      }
    }
  }
}

//CARGAR ITEMS----------------------------------
function cargaItems(){
  var lista = document.getElementById("menu");
  var menu = lista.options[lista.selectedIndex].value;
  peticion = inicializa_xhr();
    if (peticion) {
      peticion.onreadystatechange = muestraItems;
      peticion.open("POST", "http://localhost/www.dominio.com/menu_vertical/servidor/menus_itemsJSON.php?nocache=" + Math.random(), true);
      peticion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	  peticion.send("menu=" + menu);
    }
}
//MOSTRAR ITEMS--------------------------------
function muestraItems() {
  if (peticion.readyState == 4) {
    if (peticion.status == 200) {
	 var lista = document.getElementById("item");
	 var items= eval('(' + peticion.responseText + ')');
	 lista.options.length = 0;
      var i=0;
      for(var codigo in items) {
        lista.options[i] = new Option(items[codigo], codigo);
        i++;
      }
    }
  }
}
/ /ONLOAD-------------------------------------
window.onload = function() {
  peticion = inicializa_xhr();
  if(peticion) {
    peticion.onreadystatechange = muestraSecciones;
    peticion.open("GET", "http://localhost/www.dominio.com/menu_vertical/servidor/menus_seccionesJSON.php?nocache="+Math.random(), true);
    peticion.send(null);
  }
  document.getElementById("seccion").onchange = cargaMenus;
  document.getElementById("menu").onchange = cargaItems;
}

</script>
</head>
<body>
<form>
<select name="seccion" id="seccion">
  <option>Cargando...</option>
</select>
<select id="menu" class="cambio1">
    <option>- menu -</option>
  </select>
  <select id="item" class="cambio2" >
    <option>- item -</option>
  </select>
  
</form>

Al hacer la segunda aplicacion utilize el objeto accion para llamar a la funcion inicializa_xhr();

Código HTML:

window.onload = function() {
  accion = inicializa_xhr();
  if(accion) {
    accion.onreadystatechange = muestraSecciones;
    accion.open("GET", "http://localhost/www.dominio.com/menu_vertical/servidor/carga_regionesJSON.php?nocache="+Math.random(), true);
    accion.send(null);
  }
  document.getElementById("region").onchange = cargaProvincias;
  document.getElementById("provincia").onchange = cargaCiudades;
}

Uní las dos aplicaciones en un solo archivo pero igual funciona solo la segunda aplicación

GatorV · #2 (**permalink**) 05/12/2008, 16:29

Tu problema es que ambas usan el evento window.onload, tienes que unir esos dos scripts en uno solo.

Saludos.

wilrocaul · #3 (**permalink**) 09/12/2008, 09:22

Gracias por la ayuda amigo.....Solucione colocando cada una de las aplicaciones dentro de otra funcion y las llamé finalmente dentro del evento window.onload como mencionaste y funcionó...

Código:

window.onload = function() {
cargar_busqueda();
cargar_informacion();
}