Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/11/2007, 11:08
OutofOrder
 
Fecha de Ingreso: abril-2004
Mensajes: 49
Antigüedad: 20 años, 8 meses
Puntos: 1
ayuda: el código me anda bien en IE pero no en FF

Hola gente. Arribo a este foro como un novato en lo que es AJAX, si bien hace mucho que me manejo en PHP y MySQL. Pero se muy poco de javascript.

En fin, visitando varios sitios listados en este foro, googleando, fui encontrando ejemplos y armando una serie de scripts para terminar esto:
Un formulario tipo "búsqueda de coincidencias", que consiste de un input de texto y un select. Cuando una persona ingresa parte de una palabra en el input, debería completarse el select con coincidencias de ese texto.
Este script me anda bien en Internet Explorer, pero falla en Mozilla Firefox (y no he tenido oportunidad de probarlo en otro explorador). El depurador de FF no dice exactamente donde está el error, de hecho no devuelve un error de js.

Les pido ayuda a los genios de Javascript que hay por aquí: ¿dónde estará el problema? ¿Qué habré de hacer?

He aquí mis scripts:

Primero, el html:
Código:
        Buscar: <input type="text" id="nombre" maxlength="8" value="" size="20" onKeyUp="checkName(nombre)"/>
        <div id="result"></div>
		  <select id="listaNombres" name="lname" size="4">
		  <option></option>
		  </select>
Segundo, el .js:
Noten que quiero que como mínimo se envien 3 caracteres, por eso el uso de la variable "largo".
Código:
var request = false;

if (window.XMLHttpRequest) {
	request = new XMLHttpRequest();
}

function checkName(field) {
	var largo = 0;
	
	largo = field.value.length;
	
	if (largo > 2) {
		if (window.ActiveXObject) {
			try {
					request = new ActiveXObject("Msxml2.XMLHTTP");
			  } catch(e) {
					try {
						 request = new ActiveXObject("Microsoft.XMLHTTP");
					} catch(e) {
						 request = false;
					}
			  }
		 }
	
		 if (request) {
			  request.onreadystatechange = processReqChange;
			  request.open("POST", "busqueda_nombres.php");
			  request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;');
			  request.send("name="+encodeURIComponent(field.value));
		 }
	}
}

function processReqChange() {
    var result = document.getElementById("result");
    var lista = document.getElementById("listaNombres");
	 var respuesta = '';
	 var opciones = new Array();
	 var valores = new Array();

    if (request.readyState == 4) {
        if (request.status == 200) {
				respuesta = request.responseText;
				opciones = respuesta.split(';'); //separo grupos de nombres/ids por punto y coma
				lista.options.length = 0;
				for (var i = 0; i < opciones.length; i++) { //actualizamos el select con cada elemento obtenido
					valores = opciones[i].split(','); //separo nombre e id por coma
					
					anOption = document.createElement("option"); 
					lista.options.add(anOption, 0);
					anOption.innerText = valores[0]; //The text for the option
					anOption.Value = valores[1]; //The option's value
				}
				lista.options.selectedIndex = 0;
            result.innerHTML = "<b>Selecciona la persona. Si no lo encuentras, prueba otra búsqueda.</b>";
        }
    } else {
        result.innerHTML = "Procesando ...";
    }
}
Por último, éste es el script que procesa la búsqueda y devuelve los elementos del select:
Código PHP:
<?php
require('connect.php');

function 
enviarNombres($text) {
    
header("Content-type: text/html; charset=utf-8");
    echo 
utf8_encode($text);
}

// Se duerme 1 segundo para que la respuesta no sea inmediata 
// y se vean los cambios si se prueba en local
sleep(1);

$name addslashes(utf8_decode($_POST['name']));

if (! 
is_string($name))
    exit;
//controlemos que $name sea una cadena de no menos de 3 caracteres y tampoco más de 8
if ((strlen($name)<3) || (strlen($name)>8))
    exit;

//busquemos coincidencia de nombres de usuario
$sql "... aqui tengo mi consulta a la BBDD"
$result = @mysql_query($sql);
$quienes = array();
while (
$filas mysql_fetch_assoc($result)) 
    
$quienes[] = $filas['memberName'] .','$filas['ID_MEMBER'];
$cuales implode(';',$quienes);


enviarNombres($cuales);

?>
Noten que devuelve un string con los elementos separados por punto y coma ";", y que cada elemento tiene el texto y valor de cada OPTION (separados por coma ",").
Luego el js transforma esa cadena de nuevo en un array y crea cada nuevo OPTION en el select.
Repito que este proceso anda bien en IE, por lo que no tiene un problema lógico de base, sino que hay un problema de compatibilidad en FF.
Es decir que el problema debe estar en el archivo .js, ¿verdad?
¿Alguien puede ayudarme?
Muchas gracias de antemano.