Ejemplo Simple Ajax

pkke · #1 (**permalink**) 22/02/2008, 06:32

Buenas tardes,

Estoy intentando realizarme un ejemplo muy simple para cargar un combo dinámicamente, creo un div con un select y en al pinchar sobre alguno de sus option llamo a una función javascript que llama al ajax para generar dinámicamente el segundo combo. El problema es que se despliega perfectamente en Firefox pero no funciona en IE. Puede alguien ayudarme con este problema¿?

Muchas gracias de antemano.

Un fichero principal jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script type="text/javascript" src="javascript/ajax.js"></script>

<script type="text/javascript">
function onChangeCategoria1(objeto)
{ insertarPagina(document.getElementById('idDivCateg oria2'),'Categoria.jsp');
}
</script>
<head>
</head>
<body>
<table>
<tr><div id="idDivCategoria1">
<select id="idSelectCategoria1" name="select1" onchange="onChangeCategoria1(this)">
<option value="1">Seleccione Tipo de Análisis 1</option>
<option value="2">Seleccione Tipo de Análisis 2</option>
</select></div> </tr>
<tr><div id="idDivCategoria2"></div></tr>
</table>
</body>
</html>

Luego tengo un fichero categoria.jsp para cargar dinamicamente un combo:

<select id="idSelectCategoria2" name="select2">
<option value="21">Seleccione una opción 2.1</option>
<option value="22">Seleccione una opción 2.2</option>
</select>

Y un javaScript Ayax:

function insertarPagina(capaContenedor, paginaLlamada, callback) {
//capaContenedor = document.getElementById('capaContenedor');
if (capaContenedor == null || paginaLlamada == null) return;

capaContenedor.innerHTML += "<div style='position:absolute; color: #FFFFFF; font-weight: bold; width:75px; height:14px; z-index:1; left: 4px; top: 4px; background-color: #3366CC; layer-background-color: #3366CC; border: 2px #FFFFFF;'> Cargando...</div>";
var ajax = new Ajax();
var p = paginaLlamada;
var para = "";
var anterior = -1;

if (p.indexOf("?") != -1) {
var s = p.split('?');
p = s[0];
para = s[1];
}
p += "?";

ajax.open("POST", p, true);
ajax.onreadystatechange = function() {

if (ajax.readyState == 4 && anterior == 3) {
capaContenedor.innerHTML = ajax.responseText;
if (callback) callback();
}
anterior = ajax.readyState;
}
if(ajax.readyState == 1)
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

ajax.send(para);

}

function enviaParametrosDestino (capaParametros, capaContenedor, paginaLlamada)
{
var p = paginaLlamada;
if (p.indexOf("?") != -1) {
var u = crearUrl(capaParametros);
u = u.substring(1, u.length);
u = "&" + u;
p += u;
}
else
p += crearUrl(capaParametros);
insertarPagina(capaContenedor,p);
}

function enviaParametros (capaContenedor, paginaLlamada)
{
var p = paginaLlamada;
if (p.indexOf("?") != -1) {
var u = crearUrl(capaContenedor);
u = u.substring(1, u.length);
u = "&" + u;
p += u;
}
else
p += crearUrl(capaContenedor);
insertarPagina(capaContenedor,p)
}

function Ajax() {
var xmlhttp = false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
if (xmlhttp == null)
alert("El objeto utilizado en Ajax (XMLHttpRequest) ha generado un error.");
return xmlhttp;
}

function crearUrl(capaFormulario) {

var url = "?";
url += parametros(capaFormulario);
url = url.substring(0, url.length - 1);
return url;
}

function parametros(capa) {
if (capa == null)
return;
var f = capa.childNodes;
var p = "";
for (var i = 0; f != null && i < f.length; i++)
{
if (f[i].tagName == "INPUT") {
if (((f[i].type == "checkbox" || f[i].type == "radio") && f[i].checked == false) == false) {
p += f[i].name + "=" + f[i].value + "&";
}
//f[i].disabled = true;
}
else if (f[i].tagName == "SELECT" || f[i].tagName == "TEXTAREA") {
p += f[i].name + "=" + f[i].value + "&";
//f[i].disabled = true;
}
else if (f[i].tagName == "A") {
f[i].href = "#";
}
else
p += parametros(f[i]);
}
return p;
}