Foros del Web » Programando para Internet » Javascript »

Consulta ajax

Estas en el tema de Consulta ajax en el foro de Javascript en Foros del Web. Buenas tardes! tengo una consulta para hacerles con ajax... Resulta que utilizo ajax para cargar formularios en mi web sin recargar el explorador. En uno ...
  #1 (permalink)  
Antiguo 07/05/2012, 17:57
 
Fecha de Ingreso: febrero-2010
Mensajes: 9
Antigüedad: 14 años, 8 meses
Puntos: 0
Consulta ajax

Buenas tardes! tengo una consulta para hacerles con ajax...
Resulta que utilizo ajax para cargar formularios en mi web sin recargar el explorador. En uno de los formularios tengo 2 solect dependientes, el primero es Pais y el segundo Estados...

Resulta que funciona bien, se carga el form. Selecciono un pais, me da para elegir una lista de Estados, pero si quiero cambiar de Pais, aunque cambie el pais del select Pais, no me carga los estados correspondientes a ese Pais, sino que me mantiene los del primer pais seleccionado.

Ya lo probe sin ajax y funciona bien, no tengo ese problema, pero cuando lo cargo con ajax me pasa esto, quisiera saber cual puede ser la solucion!

Un saludo grande!
  #2 (permalink)  
Antiguo 07/05/2012, 18:36
Avatar de chwc  
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires ! :D
Mensajes: 814
Antigüedad: 16 años, 2 meses
Puntos: 103
Respuesta: Consulta ajax

y, puede ser que este mal tu codigo, que no se envie la petición, o al recibir los datos no se ejecute correctamente, seria mas facil si nos das un link de la pagina, o el codigo de fuente de el formulario, y la función ajax
saludos
  #3 (permalink)  
Antiguo 08/05/2012, 12:44
 
Fecha de Ingreso: febrero-2010
Mensajes: 9
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Consulta ajax

Ahora que probé de nuevo, si pruebo solamente el .php que tiene el formulario... Pasa lo mismo, selecciono un pais y me muestra los correspondientes estados, pero cuando cambio de pais me mantiene los estados anteriores.


Tiene que ser un problema de codigo en el archivo ajax...

Son dos archivos... Este:

Código HTML:
function nuevoAjax()
{ 
	/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
	lo que se puede copiar tal como esta aqui */
	var xmlhttp=false;
	try
	{
		// Creacion del objeto AJAX para navegadores no IE
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e)
	{
		try
		{
			// Creacion del objet AJAX para IE
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(E)
		{
			if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
		}
	}
	return xmlhttp; 
}

// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="paises";
listadoSelects[1]="estados";

function buscarEnArray(array, dato)
{
	// Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
	var x=0;
	while(array[x])
	{
		if(array[x]==dato) return x;
		x++;
	}
	return null;
}

function cargaContenido(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.options[selectOrigen.selectedIndex].value;
	// Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
	if(opcionSeleccionada==0)
	{
		var x=posicionSelectDestino, selectActual=null;
		// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
		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++;
		}
	}
	// Compruebo que el select modificado no sea el ultimo de la cadena
	else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
	{
		// Obtengo el elemento del select que debo cargar
		var idSelectDestino=listadoSelects[posicionSelectDestino];
		var selectDestino=document.getElementById(idSelectDestino);
		// Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
		var ajax=nuevoAjax();
		ajax.open("GET", "../../select_dependientes_proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
		ajax.onreadystatechange=function() 
		{ 
			if (ajax.readyState==1)
			{
				// Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
				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);
	}
}
Y ese form, le envia el ID a este otro que muestra los estados:

Código HTML:
<?php
// Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido
$listadoSelects=array(
"paises"=>"lista_paises",
"estados"=>"lista_estados"
);

function validaSelect($selectDestino)
{
	// Se valida que el select enviado via GET exista
	global $listadoSelects;
	if(isset($listadoSelects[$selectDestino])) return true;
	else return false;
}

function validaOpcion($opcionSeleccionada)
{
	// Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
	if(is_numeric($opcionSeleccionada)) return true;
	else return false;
}

$selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];

if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
{
	$tabla=$listadoSelects[$selectDestino];
	include 'includes/conexion.php';
	$consulta=mysql_query("SELECT id, opcion FROM $tabla WHERE relacion='$opcionSeleccionada'") or die(mysql_error());
	
	// Comienzo a imprimir el select
	echo "<meta http-equiv='content-type' content='text/html; charset=iso-8859-1' />";
	echo "<label class='label'>Regi&oacuten</label>";
	echo "<select name='estado' id='estado' class='estilo_ancho' style='margin-left:3px;'>";
	echo "<option value='0'>Elige</option>";
	while($registro=mysql_fetch_row($consulta))
	{
		// Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
		$registro[1]=htmlentities($registro[1]);
		// Imprimo las opciones del select
		echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
	}			
	echo "</select>";
}
?>
  #4 (permalink)  
Antiguo 08/05/2012, 17:29
 
Fecha de Ingreso: febrero-2010
Mensajes: 9
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Consulta ajax

Pongo un ejemplo mas simple, hice un trabajo nuevo y mas simple para demostrarlo.

Index.html
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

	<head>
		<title>Ajax</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="ajax.js"></script>
	</head>
	
	<body>
	
		<table>
			<tr>
				<td>
					<div id="contenido">
						<!-- Aca se va a cargar el contenido mediante ajax -->
					</div>
				</td>
				<td>
					<div>
						<ul>
							<li><a href="javascript:Enviar('cargar1.php','contenido')" title="Enlace 1">Enlace 1</a></li>
							<li><a href="javascript:Enviar('cargar2.php','contenido')" title="Enlace 2">Enlace 2</a></li>
							<li><a href="javascript:Enviar('cargar3.php','contenido')" title="Enlace 3">Enlace 3</a></li>
						</ul>
					</div>
				</td>
			</tr>
		</table>
	
	</body> 

Cargar1.php
Código PHP:
<?php
include("conexion.php");

$consulta"select id, opcion from lista_paises order by opcion asc";
$resultadomysql_query($consulta);
?>

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

    <script language="JavaScript" type="text/JavaScript">
        $(document).ready(function(){
            $("#pais").change(function(event){
                var id = $("#pais").find(':selected').val();
                $("#estado").load('genera-estado.php?id='+id);
            });
        });
    </script>
</head>

<body>
    <table>
        <tr>
            <td>Pais:</td>
            <td colspan="3">
                <select name="pais" id="pais" style="width:223px">
                    <option value="0" selected>Selecciona</option>
                    <?php
                    
while ($fila mysql_fetch_array($resultado)){
                        echo 
"<option value='" .$fila['0']. "'>" .$fila['1']. "</option>";
                    }
                    
?>
                </select>
            </td>
        </tr>
                        
        <tr>
            <td>Estado:</td>
            <td colspan="3">
                <select name="estado" id="estado" style="width:223px">
                    <!-- Aca se cargan los estados dependiendo del pais seleccionado -->
                </select>
            </td>
        </tr>
    </table>
</body>

genera-estado.php
Código PHP:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<?php

include("conexion.php");
$valor=$_GET['id'];

$consulta "select * from lista_estados where relacion='$valor' ";
$resultadomysql_query($consulta);
while (
$fila mysql_fetch_array($resultado)){
    echo 
"<option value='" .$fila['0']. "'>" .$fila['1']. "</option>";
};

?>

Y el archivo ajax que haca cargar los formularios sin recargar la pagina:

Código HTML:
function ajaxFunction() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
} catch (e) {
alert("Tu navegador no soporta AJAX!");
return false;
}}}
}

function Enviar(_pagina,capa) {
var
ajax;
ajax = ajaxFunction();

ajax.open("POST", _pagina, true);

ajax.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{

if (ajax.readyState == 4)
{
document.getElementById(capa).innerHTML =
ajax.responseText;

}}
ajax.send(null);
}

Etiquetas: ajax
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:43.