Ajax + consulta a base de datos

[vesvello]

tengo este codigo:

Código:

function cargaContenido1(idSelectOrigen)
{
	var opcionSeleccionada=selectOrigen.value;

A partir de ahi necesito que mediante ajax consulte que opcionSeleccionada esta en la base de datos y me devuelva el id algo asi como seria en php

Código PHP:

      $consulta = mysql_query("SELECT id FROM ciudades WHERE opcion='$opcionSeleccionada'") or die(mysql_error()); 
   

Necesito saber si opcionSeleccionada (que seria una ciudad) existe en a base de datos y me devuelva el id, sino me devuelve "".

Despues de estar leyendo un poco se que tendria que ser algo asi como

Código:

var ajax=nuevoAjax();
ajax.open("GET", "select_dependientes_proceso1.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);

de esta manera se ejecutaria el archivo select_dependientes.php para hacer la busqueda, pero necesito que luego regrese al ajax con el resultado para que se siga ejecutando la funcion ajax dependiendo si devuelve "" o devuelve un valor

[David]

Primero tienes que asignar un listener al evento onreadystatechange para poder capturar la respuesta del servidor. Y en caso de que envíes el dato por GET, desde el servidor lo recuperas usando $_GET['opcion'] para procesarlo y enviar la respuesta de acuerdo a lo que está en la base de datos.

Te puede resultar útil leer las FAQ's de esta sección:
http://www.forosdelweb.com/f77/faqs-...o-ajax-332366/

[vesvello]

Gracias por responder

ya lei el faq pero no me entere de mucho...

Esto es loq ue tengo hasta ahora...

Código:

var opcionSeleccionada=selectOrigen.value;
var idSelectDestino=listadoSelects[posicionSelectDestino];
var selectDestino=document.getElementById(idSelectDestino);
var ajax=nuevoAjax();
alert(opcionSeleccionada); // para comprobar que coge bien la variable
ajax.open("GET", "select_dependientes_proceso2.php?opcion="+opcionSeleccionada, true);
ajax.setRequestHeader('Content-Type: text/xml; charset=ISO-8859-1'); // porque tengo problemas con los acentos 
ajax.onreadystatechange=function() 
{ 
    if (ajax.readyState==4)
	{
	var opcionSeleccionada=ajax.responseText;
	} 
}

En el select_dependientes_proceso2.php tengo lo siguiente:

Código PHP:

  $opcionSeleccionada=$_GET["opcion"];
    include 'conexion.php';
    conectar();
    $consulta = mysql_query("SELECT id FROM websiteadmin_lista_ciudades WHERE opcion='$opcionSeleccionada'") or die(mysql_error());
    $resultado_consulta = mysql_fetch_assoc($consulta);
    desconectar();
    $opcionSeleccionada = $resultado_consulta["id"];
    echo $opcionSeleccionada; 
   

Pero no consigo que me devuelva el id de la base de datos con var opcionSeleccionada=ajax.responseText;


me perdi con las explicaciones que me diste y quiza si no es mucho podrias orientarme y apuntar los errores que ves.

Gracias

[David]

En principio, debería funcionar.

Si haces esto, ¿qué te muestra?:

Código Javascript:

ajax.onreadystatechange=function() 
{ 
    if (ajax.readyState==4)
    {
        alert(ajax.responseText);
    } 
}
 

[vesvello]

Iniciado por David

En principio, debería funcionar.

Si haces esto, ¿qué te muestra?:

Código Javascript:

ajax.onreadystatechange=function() 
{ 
    if (ajax.readyState==4)
    {
        alert(ajax.responseText);
    } 
}
 

no me muestra nada... te copio la funcion completa

Código:

function cargaContenido1(idSelectOrigen)
{
	// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
	var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
	// Obtengo el select que el usuario modifico
	var selectOrigen=document.getElementById(idSelectOrigen);
	// Obtengo la opcion que el usuario selecciono
		var opcionSeleccionada=selectOrigen.value;
		var idSelectDestino=listadoSelects[posicionSelectDestino];
		var selectDestino=document.getElementById(idSelectDestino);
		var ajax=nuevoAjax();
				alert(idSelectDestino);
				alert(opcionSeleccionada);

		ajax.open("GET", "select_dependientes_proceso2.php?opcion="+opcionSeleccionada, true);
		ajax.setRequestHeader('Content-Type: text/xml; charset=ISO-8859-1');
		ajax.onreadystatechange=function() 
		{ 
			if (ajax.readyState==4)
			{
			alert(ajax.responseText);
			} 
		ajax.send(null);

}

[David]

Es que, si te fijas, no estás cerrando la función anónima que asignas a onreadystatechange:

Código:

		ajax.onreadystatechange=function() 
		{ 
			if (ajax.readyState==4)
			{
			alert(ajax.responseText);
			}
                }
		ajax.send(null);

[vesvello]

Sigue sin funcionar:

Código:

function cargaContenido1(idSelectOrigen)
{
	// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
	var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
	// Obtengo el select que el usuario modifico
	var selectOrigen=document.getElementById(idSelectOrigen);
	// Obtengo la opcion que el usuario selecciono
		var opcionSeleccionada=selectOrigen.value;
		var idSelectDestino=listadoSelects[posicionSelectDestino];
		var selectDestino=document.getElementById(idSelectDestino);
		var ajax=nuevoAjax();
				alert(idSelectDestino);
				alert(opcionSeleccionada);

		ajax.open("GET", "select_dependientes_proceso2.php?opcion="+opcionSeleccionada, true);
		ajax.setRequestHeader('Content-Type: text/xml; charset=ISO-8859-1');
		ajax.onreadystatechange=function() 
		{ 
			if (ajax.readyState==4)
			{
			alert(ajax.responseText);
			}
		}
		ajax.send(null);
}

los 2 primeros alert los ejecuta pero el alert(ajax.responseText);

es posible que sea porque devuelva "" y el error este en el php?

[David]

Por cierto, setRequestHeader() requiere dos parámetros, y sólo estás pasando uno.

[vesvello]

Iniciado por David

Por cierto, setRequestHeader() requiere dos parámetros, y sólo estás pasando uno.

jajajaj este es mi primer aproximacion a Ajax y no tengo ni idea

Que 2 parametros? cual me falta?

perdona si soy pesado, pero puede ser eso por lo que no funciona?

[David]

El primer parámetro es el nombre de la cabecera y el segundo parámetro el valor:
http://www.w3.org/TR/XMLHttpRequest/...theader-method

[vesvello]

Recapitulando....

tengo el codigo asi:

Código:

function cargaContenido1(idSelectOrigen)
{
	// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
	var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
	// Obtengo el select que el usuario modifico
	var selectOrigen=document.getElementById(idSelectOrigen);
	// Obtengo la opcion que el usuario selecciono
		var opcionSeleccionada=selectOrigen.value;
		var idSelectDestino=listadoSelects[posicionSelectDestino];
		var selectDestino=document.getElementById(idSelectDestino);
		var ajax=nuevoAjax();
		ajax.open("GET", "select_dependientes_proceso2.php?opcion="+opcionSeleccionada, true);
		ajax.onreadystatechange=function() 
		{ 
			{
			alert(ajax.responseText);
			
			}
		}
		ajax.send(null);
}

Quite el header porque luego regreso a eso...

Ahora el Alert me saca esto por pantalla:

[object HTMLSelectElement]

Peor como hago para que el ajax.responseText me de el id de la base de datos.
Entiendo que lo ha hecho bien, pero se que me falta algo para que convierta el [object HTMLSelectElement] en el numero del ID... correcto?

[David]

No deberías recibir eso en responseText, ¿no tendrás algún otro alert() por ahí? También, revisa la Consola de Errores de tu navegador para saber si hay algún problema.

[vesvello]

Ahora el alert me saca 3 mensajes antes de darme el valor correcto

I am lost

[David]

Es que, te falta la condición if (ajax.readyState == 4) { ... }

[vesvello]

si era eso... pero ahora el siguiente problema es que... una vez que tenemos

var opcionSeleccionada=ajax.responseText; la funcion debe continuar

te copio el codigo para que veas:

Código:

function cargaContenido1(idSelectOrigen)
{
	
	if(opcionSeleccionada !="")
	{
	var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
	var selectOrigen=document.getElementById(idSelectOrigen);
		var opcionSeleccionada=selectOrigen.value;
			alert (opcionSeleccionada);
		var idSelectDestino=listadoSelects[posicionSelectDestino];
		var selectDestino=document.getElementById(idSelectDestino);
		var ajax=nuevoAjax();
		ajax.open("GET", "select_dependientes_proceso2.php?opcion="+opcionSeleccionada, true);
		ajax.onreadystatechange=function() 
		{ 
			if (ajax.readyState==4)
			{
			var opcionSeleccionada=ajax.responseText;
			alert (opcionSeleccionada);
			if(opcionSeleccionada=="")
				{
				var x=posicionSelectDestino, selectActual=null;
				while(listadoSelects[x])
					{
					selectActual=document.getElementById(listadoSelects[x]);
					selectActual.length=0;
					var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opción...";
					selectActual.appendChild(nuevaOpcion);	selectActual.disabled=true;
					x++;
					}
				}
			else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
				{
				var idSelectDestino=listadoSelects[posicionSelectDestino];
				var selectDestino=document.getElementById(idSelectDestino);
				var ajax=nuevoAjax();
				ajax.open("GET", "select_dependientes_proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
				ajax.onreadystatechange=function() 
					{ 
					if (ajax.readyState==1)
						{
						selectDestino.length=0;
						var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
						selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;	
						}
					if (ajax.readyState==4)
						{
				selectDestino.parentNode.innerHTML=ajax.responseText;
						}	 
					}
				ajax.send(null);
				}
			}
		}
	ajax.send(null);
	}

}

Yo imaginaba que una vez devuelto el valor de la base de datos opcionSeleccionada

Código:

if (ajax.readyState==4)
			{
			var opcionSeleccionada=ajax.responseText;
			alert (opcionSeleccionada);
			if(opcionSeleccionada=="")

haria el if o no dependiendo que fuera ="" o no pero no es asi... alguna idea?

[David]

Ese alert(opcionSeleccionada), ¿te muestra la información recibida del servidor?

[vesvello]

Pues depende. Si la funcion la acabo con el alert si, pero si anado el resto de codigo a continuacion del alert tal como lo ves arriba para que continue haciendo lo que necesito, no sale el alert, como si se lo saltara y deja de funcionar.

El hecho es que lo solucione mandando el valor que me da ajax.reponsetxt a una field oculto de la pagina y crear una nueva funcion que se ejecute al cambiar el vlor del field oculto.

No se si es lo mas apropiado pero funciona

Código:

function cargaContenido1(idSelectOrigen)
{
	
	var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
	var selectOrigen=document.getElementById(idSelectOrigen);
		var opcionSeleccionada=selectOrigen.value;
		var ajax=nuevoAjax();
		ajax.open("GET", "select_dependientes_proceso2.php?opcion="+opcionSeleccionada, true);
		ajax.onreadystatechange=function() 
		{ 
			if (ajax.readyState==4)
			{
			document.getElementById('ciudades1').value = ajax.responseText;
			ProcesaItems();
			}
		}
	ajax.send(null);	
}

Aunque si me gustaria saber si existe alguna razon para que no funcione de la primera manera. Como si tardara mas de lo debido de coger el valor de ajax.reponsetxt y si es asi si se podria poner un delay para que le diera ese tiempo

[vesvello]

Una cosa adicional? porque solo funciona en firefox y no funciona ni en IE ni en safari?..
el problema es con acentos ya que se comporta de modo distinto en Firefox, IE y safari. Si pongo $opcionSeleccionada=utf8_decode($opcionSeleccionad a); deja de reconocerme los acentos en firefox pero me funciona en Safary e IE. Si se lo quito me los reconcoe en firefox pero deja de funcionarme en los otros 2. Alguna solucion?