combos dependientes, tres niveles

[Almudena Soblechero García]

Hola buenas tardes chicos!!!

Vengo con otra preguntilla, a mi ejemplo de jugadores, equipos, le he añadido una tercera base de datos, que es, países. 

Ahora en un formulario, quiero tener tres combos dependientes, en los cuales si elijo el país, equipo y jugador, veo las características de cada jugador.

Soy capaz de hacer que eligiendo el país veo los equipos de fútbol, pero cuando selecciono el en el select el equipo de fútbol, se me va el select de equipo a "seleccione el equipo ".

Para esto, he hecho un formulario, donde tengo los famosos "miDiv1,2" tengo dos archivos ajax, en el que el primero selecciona el miDiv y abre el php, que "simula" el select del formulario principal.

Mi pregunta es, se deben de crear dos archivos ajax para poder controlar los cambios al seleccionar una opción u otra en el select? Si fuera el caso me generan más preguntas.

Al crear los archivos que simulan los select, la cabecera del código al incluir los archivos de ajax ( <script src="ajax_sf_1.js"></script> ) los tengo que poner el principal del formulario, o en los que simulan el comportamiento de los select?

Creo que no me he sabido explicar bien, voy a tratar de hacerlo mejor.

Tengo de momento los siquientes archivos:

-- Principal: en el tengo el formulario en el que están los tres combos dependientes y los inputs necesarios para la información completa del jugador.

-- Dos archivos php que controlaría, la simulación de los combos dependientes, (equipo y jugador).

-- Dos archivos ajax, que es el que hace el comportamiento dinámico, por el cual una vez selccionado el pais y equipo haga que se vea el nombre del jugador.

Bien creo que de momento, si me he sabido explicar.

El comportamiento del combo del pais, lo controlo en el Principal, en el que en el head esta puesta la cabecera de  <script src="ajax_sf_1.js"></script>, junto con un evento onchange controlo cuando se cambia el valor.

Mi pregunta es ¿los eventos onchange van en el principal, o van en los que simulan el comportamiento de los select?¿es necesario incluir dos archivos ajax?

Nuevamente pido diculpas por mi poca experiencia en estos lenguajes, no se sientan ofendidos por fa.

[Almudena Soblechero García]

Me respondo a mi misma, pero escucho mejores opciones que la mía ;)

En el principal, se ponen las cabeceras de archivos ajax, y en los que simulan los select, se ponen  los onchange, pero, teniendo cuidado, para que las funciones de los ajax, no se llamen precisamente igual.... como lo hacía yo,quizás en un solo archivo js, se puedan incluir todas las funciones, así nos evitaríamos el llamar a archivos distintos.

[Tordek]

Quedaría más clara tu consulta si ponés tu código, pero en general
solo hace falta un js, no importa si tenés 1 o 3 controles...

A grandes rasgos, lo que tenés que hacer es...

$("#dropdownPais").onChange(function (valor) {
var $dropdownEquipo = $("#dropdownEquipo");
$dropdownEquipo.disable();
$.ajax("/pais/" + valor + "/equipos", function (response) {
$dropdownequipo.options = response; // Bah, sea como sea la
forma correcta de popular el dropdown de equipo: recibís una lista de
equipos del país y lo metes en el dropdown
$dropdownEquipo.enable()
})
});

y lo mismo para los jugadores: a dropdownEquipo le ponés un onChange
(o como sea el nombre real del evento) y cuando cambia hacés una
request a la url que te dice los jugadores de un equipo.


2015-07-02 5:44 GMT-03:00 Almudena Soblechero García
<almudena.c...@gmail.com>:

> --
> Has recibido este mensaje porque estás suscrito al grupo "Grupo PHP
> Argentina" de Grupos de Google.
> Para anular la suscripción a este grupo y dejar de recibir sus mensajes,
> envía un correo electrónico a php-arg+u...@googlegroups.com.
> Para publicar en este grupo, envía un correo electrónico a
> php...@googlegroups.com.
> Visita este grupo en http://groups.google.com/group/php-arg.
> Para acceder a más opciones, visita https://groups.google.com/d/optout.

[Almudena Soblechero García]

Buena, perdonad la tardanza en contestaros.


Soy bastante novata en este lenguaje, y la verdad, que lo he hecho viendo ciertas cosas de internet,  pero mas o menos el código que hago para manejarlo es de la siguiente forma:

-- Un archivo principal,  donde esta el formulario, en el formulario, nombro los combos, de tak forma que el archivo ajax correspondiente los pueda contralar con el nombre (id) del campo.
-- Un archivo ajax para cada combo dependiente, que recoge el nombre del id del combo, el nombre del archivo php que se abre.

-- php que simula los combos dependientes que reciben el valor del valor del select, y ademas estan codificados con echo.



Los archivos con extensión js, más o menos son de la forma:

function load(str)
{
	var xmlhttp;
	
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
		document.getElementById("myDiv1").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("POST","lista_sf_1.php",true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlhttp.send("q="+str);
}


Pongo uno de estos por cada combo que quiero controlar.

Y el siguiente código php en un archivo diferente, simulando los combo box
$EQUIPO_id=$_POST['q'];
			
			
			$sql="select  distinct jugador from jugadores_DC where EQUIPO_id='".$EQUIPO_id."'";					
			$consulta=mysqli_query($con, $sql);
			
			$resultado=mysqli_num_rows($consulta);
			
			if($resultado==0)
			{
				echo "<label class='control-label'>jugador asociado</label>";	
				echo "<select class='form-control' onchange='load(this.value)'>";
				echo "<option> No hay jugadores asociados </option>";
				echo "</select>";
			}
			else
			{
				echo "<label class='control-label'>jugador asociado</label>";
				
				echo "<select name='jugador_dc' id='jugador_dc' class='form-control' onchange='load(this.value)'>";
				echo "<option>---------</option>";
				while ($row=mysqli_fetch_row($consulta))
			    {
			    	echo "<option value=".$row[0].">";
					echo ucwords(strtolower(strtoupper($row[0])));
					echo "</option>";						
				}  
				echo "</select>";
				
			}

Aunque por lo que me dices tú, lo estoy haciendo mal, es como matar moscas a cañonazos.

[Tordek]

A ver... para mi, la forma en que estás generando el contenido de los
dropdowns (o, mejor dicho, los dropdown mismos) es mala: estás
generando un fragmento de HTML en el servidor y metiéndoselo a un div.

Obviamente, funciona, pero ¿qué pasa si mañana querés, en vez de un
dropdown de equipos, ponerlo con radio buttons? Tendrás que cambiar el
PHP que te genera el elemento, y el JS que modifica el contenido; un
diseñador no puede, solo, cambiar el diseños, sino que necesita que el
programador lo haga... en otras palabras: Es mala práctica hacerlo
como lo estás haciendo, pero si funciona...

Yo preferiría que devuelva los valores en un JSON y generar el
dropdown en el JS, pero no es un problema tan grande.

Por otro lado, estás haciendo un POST cuando podés hacer un GET; no
hay muchos motivos para hacerlo así.

Lo que yo haría... más o menos (nota: no suelo hacerlo con JS pelado;
preferiría JQuery o similar, pero como sea)...

En el HTML tenés...

<select name="equipo" id="dropdown_equipos">
</select>

<select name="equipo" id="dropdown_equipos" enabled="false">
<option> ... </option>
</select>


<

<script src="sitio.js"></script>

[Tordek]

... estaba a mitad de escribir el mail y toqué ctrl+enter... gracias, Gmail ;[

Decía...


<select name="pais" id="dropdown_paises">
<option> ... </option>

</select>

<select name="equipo" id="dropdown_equipos" enabled="false">
</select>

<select name="equipo" id="dropdown_jugadores" enabled="false">

</select>

<script src="sitio.js"></script>

y en el JS..

document.getElementById("dropdown_paises").onchange = function (select) {
var opcion = select.options[select.selectedIndex].value;

var xmlhttp; /*...*/

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("dropdown_equipos").html =
xmlhttp.responseText;

/* Aunque, como dije, yo preferiría cambiar lo de .html =
... por JSON.parse(...) y generar los OPTIONs que corresponda */
}
}
xmlhttp.open("GET","lista_sf_1.php?q=" + opcion, true);
};

Y lo mismo para dropdown_equipos: le asociás a su .onchange una
función donde maneja lo que tenga que hacer para pedir los jugadores y
actualizar dropdown_jugadores.

La función que maneja el evento de onchange es anónima, así que no te
preocupás por tener funciones con el mismo nombre... o bien podríás
ponerle un nombre único, como equipos_onchange y decir
`...paises").onchange = paises_onchange`... digamos, ponele un nombre
más claro que "load".

(Aviso obvio: no lo testeé; usalo de guía pero sabiendo que seguro no
funciona como lo puse.)

Otra cosa que tenés que tener cuidado con como lo escribiste es que,
como estás reemplazando el contenido del div, creaste un nuevo select,
y borraste el handler que tenía asociado. Al cambiar solo el contenido
del select, el handler sigue siendo parte del select aunque borres los
options. La otra es que hagas que el handler de paises, cuando pone el
contenido en los equipos, vuelva a asociarle el handler.