como cargar pagina enviando el id del lugar donde cargar...?

farra · #1 (**permalink**) 05/05/2008, 09:30

soy nuevo en ajax... este codigo funciona si le quito los parametros a las funciones de dejo solo el parametro url... pero el problema es que asi siempre me carga en el mismo cuadro y yo quiero mandarle por parametro en que cuadro quiero que cargue...

les dejo el codigo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cuadros</title>
<Script>
function toggle(what) {
        var aobj = document.getElementById(what);
        if( aobj.style.display == 'none' ) {
               aobj.style.display = '';
        } else {
               aobj.style.display = 'none';
        }
}
function CrearXMLHttp(){
	XMLHTTP=false;
	if(window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else if(window.ActiveXObject){
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}
// suponiendo que tu div se llama loading
function OpenPage(url,id){
	req=CrearXMLHttp();
	if(req){
		req.onreadystatechange = manejador(id);
		req.open("POST",url,true);
		req.send(null);
                toggle('loading'); // ojo aqui
	}
}
function manejador(id){
	if(req.readyState == 4){
		if(req.status == 200){
                        toggle('loading'); // ojo aca
			document.getElementById(id).innerHTML=req.responseText;
		}else{
			alert("Error"+req.statusText)
		}
	}
}
function cargacuadro(id){
var donde = document.getElementById("url").value;
var url = "ajaxtest.php?id="+donde;
OpenPage(url,id);
}
</Script>
</head>

<body>
<p>Codigo: 
  <label>
  <input name="url" type="text" id="url" value="" size="10" maxlength="10" />
  </label> 
  Cuadro: <a href="#" onclick="cargacuadro('1');">1</a>&nbsp;<a href="#" onclick="cargacuadro('2');">2</a>&nbsp;<a href="#" onclick="cargacuadro('3');">3</a>&nbsp;<a href="#" onclick="cargacuadro('4');">4</a></p>
<table width="100%" border="1">
  <tr>
    <td id="tdc_1"><div id="loading" style="display:none;" align="left">
          <table width="50" border="1" style="border-collapse:collapse;">
            <tr>
              <td bgcolor="#FF0000"><span style="color:#FFFFFF; font-weight:bold;">Cargando...</span></td>
            </tr>
          </table>
      </div></td>
    <td id="tdc_2"><div id="loading" style="display:none;" align="left">
          <table width="50" border="1" style="border-collapse:collapse;">
            <tr>
              <td bgcolor="#FF0000"><span style="color:#FFFFFF; font-weight:bold;">Cargando...</span></td>
            </tr>
          </table>
      </div></td>
  </tr>
  <tr>
    <td id="tdc_3"><div id="loading" style="display:none;" align="left">
          <table width="50" border="1" style="border-collapse:collapse;">
            <tr>
              <td bgcolor="#FF0000"><span style="color:#FFFFFF; font-weight:bold;">Cargando...</span></td>
            </tr>
          </table>
      </div></td>
    <td id="tdc_4"><div id="loading" style="display:none;" align="left">
          <table width="50" border="1" style="border-collapse:collapse;">
            <tr>
              <td bgcolor="#FF0000"><span style="color:#FFFFFF; font-weight:bold;">Cargando...</span></td>
            </tr>
          </table>
      </div></td>
  </tr>
</table>
</body>
</html>

no me funciona.. me tira un error... que dice 'no implementado' en la linea 27 caracter 3

GatorV · #2 (**permalink**) 05/05/2008, 09:41

Cambia tu función así:

Código:

req.onreadystatechange = function() { manejador( id ); };

Tu problema es más que nada entender como funcionan las funciones anónimas en JavaScript, nada de AJAX en eso.

Saludos.

Saludos.

farra · #3 (**permalink**) 05/05/2008, 13:18

akbo de probar y sigue sin funcionar....

Código HTML:

<Script>
function toggle(what) {
        var aobj = document.getElementById(what);
        if( aobj.style.display == 'none' ) {
               aobj.style.display = '';
        } else {
               aobj.style.display = 'none';
        }
}
function CrearXMLHttp(){
	XMLHTTP=false;
	if(window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else if(window.ActiveXObject){
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}
// suponiendo que tu div se llama loading
function OpenPage(url,id){
	req=CrearXMLHttp();
	if(req){
		req.onreadystatechange = function() { manejador( id ); }; // aca cambie
		req.open("POST",url,true);
		req.send(null);
                toggle('loading'); // ojo aqui
	}
}
function manejador(id){
	if(req.readyState == 4){
		if(req.status == 200){
                        toggle('loading'); // ojo aca
			document.getElementById(id).innerHTML=req.responseText;
		}else{
			alert("Error"+req.statusText)
		}
	}
}
function cargacuadro(id){
var donde = document.getElementById("url").value;
var url = "ajaxtest.php?id="+donde;
OpenPage(url,id);
}
</Script>

GatorV · #4 (**permalink**) 05/05/2008, 21:42

¿Que error te marca ahora?

Saludos

farra · #5 (**permalink**) 06/05/2008, 07:36

Linea 37
Caracter 4
'document.getElementById(....)' es nulo o no es un objeto

GatorV · #6 (**permalink**) 06/05/2008, 08:08

En ese caso ahora el problema es que no encuentra el elemento que le pasas por tu Id, checa bien que si exista el elemento.

Saludos.

farra · #7 (**permalink**) 23/05/2008, 06:30

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cuadros</title>
<Script>
function toggle(what) {
        var aobj = document.getElementById(what);
        if( aobj.style.display == 'none' ) {
               aobj.style.display = '';
        } else {
               aobj.style.display = 'none';
        }
}
function CrearXMLHttp(){
	XMLHTTP=false;
	if(window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else if(window.ActiveXObject){
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}
// suponiendo que tu div se llama loading
function OpenPage(url,id){
//alert(url+' '+id);
	req=CrearXMLHttp();
	if(req){
		req.onreadystatechange = function() { manejador(id); }; // aca cambie
		req.open("POST",url,true);
		req.send(null);
                toggle('loading'); // ojo aqui
	}
}
function manejador(id){
	if(req.readyState == 4){
		if(req.status == 200){
                        toggle('loading'); // ojo aca
			document.getElementById(id).innerHTML=req.responseText;
		}else{
			alert("Error"+req.statusText)
		}
	}
}
function cargacuadro(id){
var donde = document.getElementById("url").value;
var url = "ajaxtest.php?id="+donde;
OpenPage(url,"tdc_"+id);
}
</Script>
</head>

<body>
<p>Codigo: 
  <label>
  <input name="url" type="text" id="url" value="2" size="10" maxlength="10" />
  </label> 
  Cuadro: <a href="#" onclick="cargacuadro('1');">1</a>&nbsp;<a href="#" onclick="cargacuadro('2');">2</a>&nbsp;<a href="#" onclick="cargacuadro('3');">3</a>&nbsp;<a href="#" onclick="cargacuadro('4');">4</a></p>
<table width="100%" border="1">
  <tr>
    <td id="tdc_1"><div id="loading" style="display:none;" align="left">
          <table width="50" border="1" style="border-collapse:collapse;">
            <tr>
              <td bgcolor="#FF0000"><span style="color:#FFFFFF; font-weight:bold;">Cargando...</span></td>
            </tr>
          </table>
      </div></td>
    <td id="tdc_2"><div id="loading" style="display:none;" align="left">
          <table width="50" border="1" style="border-collapse:collapse;">
            <tr>
              <td bgcolor="#FF0000"><span style="color:#FFFFFF; font-weight:bold;">Cargando...</span></td>
            </tr>
          </table>
      </div></td>
  </tr>
  <tr>
    <td id="tdc_3"><div id="loading" style="display:none;" align="left">
          <table width="50" border="1" style="border-collapse:collapse;">
            <tr>
              <td bgcolor="#FF0000"><span style="color:#FFFFFF; font-weight:bold;">Cargando...</span></td>
            </tr>
          </table>
      </div></td>
    <td id="tdc_4"><div id="loading" style="display:none;" align="left">
          <table width="50" border="1" style="border-collapse:collapse;">
            <tr>
              <td bgcolor="#FF0000"><span style="color:#FFFFFF; font-weight:bold;">Cargando...</span></td>
            </tr>
          </table>
      </div></td>
  </tr>
</table>
</body>
</html>

ya entontre el error gracias, al fin funciona!