Unir dos aplicaciones de ajax en un sola pagina

2580 visitas 11 respuestas

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:

//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_ = 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_ = 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_ = 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; }

Cargando...- menu -- item - Al hacer la segunda aplicacion utilize el objeto accion para llamar a la funcion inicializa_xhr(); 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.. Gracias por su ayuda

por wilrocaul desde Ecuador

Registrado desde: 25 Jul 07

Respuestas

0 0

En principio te digo que tu código es un poco desordenado y que abusás del uso de variables globales, lo que puede traerte más de un dolor de cabeza. No obstante, tendrías que colocar tu código completo para ver dónde estás equivocándote, evidentemente no colocás la parte html donde tenés los ids region y provincia, ni la declaración de los handlers asociados al evento onchange, y si estás usando el onload de window de esa manera, en realidad la segunda vez sobreescribís la primera.

por panino desde Argentina

Registrado desde: 15 Jun 05
0 0

Aunque muchos digan que el utilizar prototype vuelve lenta la aplicacion, la verdad es que en lo personal, me ha servido mucho y simplifica bastante el trabajo en Javascript para el desarrollo de aplicaciones, ademas que ha integrado funciones muy potentes para el uso de Ajax, el metodo mas notable tal vez sea el Ajax.Updater, te recomiendo que te des una vuelta por la pagina oficial de este framework, posteriormete hare un ejemplo sencillo de lo que quieres hacer, utilizando claro prototype.js

Saludos

por Chokolate desde México

Registrado desde: 19 Nov 08
0 0

Si vas a usar todas las funcionalidades de una librería y la conocés bien y sabés javascript, entonces está bien usarla, porque el peso extra que le agregás a tu página seguramente se verá recompensado por la velocidad de desarrollo, pero para hacer 2 ó 3 intercambios con AJAX, definitivamente no es necesario ni aconsejable.

por panino desde Argentina

Registrado desde: 15 Jun 05
0 0

En efecto, como bien dice panino, y como yo lo menciono en mi post, es un framework, que implica que sabes algo de javascript o de cualquier lenguaje que el framework utilice, son en muchos casos funciones optimizadas para tareas rutinarias.

Pero igual no es necesario ser un erudito en la libreria o framework a utilizar, es solo cosa de documentarse un poco, y mria que la mayoria de los frameworks, tanto de Javascript y PHP, traen una muy buena documentación.

En efecto no es encesaria para hacer un par de cambios, pero no hay por que utilizarla solo para un par de cambios, es como aquel dilema entre ver un vaso medio lleno o medio vacio.

Saludos.

por Chokolate desde México

Registrado desde: 19 Nov 08
0 0

por Chokolate desde México

Registrado desde: 19 Nov 08
0 0

Chokolate, un par de críticas constructivas. En javascript no existen las clases sino las simulaciones de clases, ya que javascript no está basado en clases sino en prototipos. Por otro lado, para controlar el nivel de visibilidad, creo que es mejor usar un modelo como este cuando quiere simularse una clase: [js] var obj=(function(){ //métodos privados var metodosPrivados={ //definición de métodos privados } return { //definición de métodos públicos } })() [/js] Otra cosa, al no nulificar onreadystatechange es muy frecuente producir memory leaks. Finalmente, en el caso planteado por wilrocaul, bastan 2 simples funciones para hacer todo el trabajo de ajax: Una para crear el objeto:

function http(){
if(typeof window.XMLHttpRequest!='undefined'){
    return new XMLHttpRequest();    
}else{
    try{
        return new ActiveXObject('Microsoft.XMLHTTP');
    }catch(e){
        alert('Su navegador no soporta AJAX');
        return false;
    }    
}    

}

Otra para hacer las peticiones y entregar el resultado:

function requestCallbackParam(url,callback,params){

var H=new http();
if(!H)return;
H.open('post',url+'?'+Math.random(),true);
H.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
H.onreadystatechange=function(){
    if(H.readyState==4){
        callback(H.responseText);
        H.onreadystatechange=function(){}
        H.abort();
        H=null;
    }
}
var p='';
for(var ii in params){
    p+='&'+ii+'='+escape(params[ii]);    
}
H.send(p);

}

Con esas dos simples funciones, podría gestionar toda sus peticiones así:

document.getElementById('capa').innerHTML='loading...'; requestCallbackParam('algo.php',function(t){document.getElementById('capa').innerHTML=t;},{'var1':'aa','var2':123});

por panino desde Argentina

Registrado desde: 15 Jun 05
0 0

Gracias, pequeño "leak" de mi parte con lo del onreadystatechange, se me fue desapercibido. Y con lo de las clases en Javascript, fue una manera de describirlo pude haber dicho objeto, instancia, prototipo, pseudoclase, etc. eleji clase y te doy toda la razón son prototipos en efecto, eso no tiene discusión alguna.

Sobre lo de la visibilidad lo maneje de esa manera por que aun no domino muy bien JSON, pero estoy en proceso.

Saludos.

por Chokolate desde México

Registrado desde: 19 Nov 08
0 0

Gracias por la ayuda aunque se fueron por otros lados.....Solucione colocando cada una de las aplicaciones dentro de otra funcion y las llamé finalmente dentro del evento windows.onload

window.onload = function() {

 cargar_busqueda();
cargar_informacion();

}

por wilrocaul desde Ecuador

Registrado desde: 25 Jul 07
0 0

Bueno, me cito:

... y si estás usando el onload de window de esa manera, en realidad la segunda vez sobreescribís la primera.

En realidad, te sugiero que en vez de eso que terminaste haciendo te acostumbres a usar la función de Simon Willison: [js] function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function() {

  if (oldonload) {
    oldonload();
  }
  func();
}

} } addLoadEvent(cargar_busqueda); addLoadEvent(cargar_informacion); [/js]

por panino desde Argentina

Registrado desde: 15 Jun 05
0 0

Gracias por la sugerencia la coloque en el código también pero porfavor me podrías ayudar con más información referente a esta función que no entiendo muy bien sus bondades.....O algún enlace para revisar más información

Muchas gracias

por wilrocaul desde Ecuador

Registrado desde: 25 Jul 07
0 0

Este es uno de los enlaces: http://simonwillison.net/2004/May/26/addLoadEvent/ También está considerada una de las mejores 10 funciones creadas en javascript: http://www.dustindiaz.com/top-ten-javascript/ La ventaja que tiene es que hace más escalable tu proyecto, ya que si en alguna oportunidad ya usaste un window.onload, como ya pudiste ver, en varios navegadores sucede que el último escrito sobreescribe al primero produciendo resultados inesperados. En cambio, si en tu core javascript declarás esa función, siempre que necesites que algo suceda en el onload de tus páginas, podés llamarla sin preocuparte si ya existe un onload o no. En proyectos pequeños puede ser innecesario, pero a medidad que tu proyecto crece siempre hay que usar ayudas o mecanismos que hagan que todo funcione sin revisar lo que ya está hecho (lo que normalmente se llama trabajo modular). Es por eso que conviene usar esta función, y, como te decía antes, empezar a olvidarse de las variables globales, ya que no es posible recordarlas a todas y estar seguro de no generar conflictos de funcionamiento, más allá de cosas que no deberían pasar pero pasan, como que para explorer el valor de ciertos atributos html se convierten por defecto en variables globales.

por panino desde Argentina

Registrado desde: 15 Jun 05