Adaptar combos a ajax.

[Melisa06]

Hola, por favor si alguien puede ayudarme con esto:

Se trata del post nro: 108 de CLUSTER, que está en la página 4 en FAQs de PHP.

Me gustaría adaptar ESTE MISMO EJEMPLO de selects dependientes al estilo ajax para que no se recargue la página.

Es para 3 listas, paises, provincias, ciudades.

Sé que hay muchos ejemplos en ajax (los he visto en este foro), pero soy bastante novata y me cuesta mucho entenderlos, y como he leído por ahí no es cuestión de copiar y pegar sino de interpretar el código, en realidad este ejemplo basado en el código de CLUSTER es el que más pude comprender, ya que está muy bien explicado.

Lo que preciso concretamente es si me pueden ayudar a armar alguna función en PHP o llamada a JS para que no se refresque por completo la página cuando se selecciona una opción en ese ejemplo.

Sé que puede ser muy complejo, pero este foro es muy solidario y quizás puedan darme una mano.

Gracias, Melisa.

[Bytevamp]

Hola Melisa06, en la pagina http://www.ashleyit.com/rs/jsrs/select/php/select.php , tienes un ejemplo de como hacer justamente lo que pides, son 3 selects dependientes, puedes bajarte los ficheros y estudiarlos, yo tuve que hacer un trabajo en el que hacia falta justamente esto y me fue de mucha ayuda.

Eso si, hace falta que sepas algo de Ingles, espero que te sirva, al menos para empezar, cualquier cosa no dudes en preguntar, seguro que encontraras ayuda.

Saludos.

[califa010]

Buenas.

El ejemplo que mostrás está hecho en php y genera código html, pero sin JavaScript, que es una de las bases de AJAX. Adaptarlo a AJAX sería reescribir casi todo, salvo la parte de la base de datos (aunque habría que agregar otra tabla si querés 3 combos). Es muy didáctico y está bien explicado (como acostumbra Cluster, por otra parte) pero hace algo distinto a lo que estás buscando (que no refresque la página implica un planteamiento distinto, más que agregar una función).

Si lo que querés es aprender un poco de "AJAX", lo mejor que podés hacer es investigar y estudiar tutoriales y ejemplos, y empezar a "meter mano". Cuando te surjan dudas más puntuales, podés consultarlas en este foro y seguramanente alguien va a poder darte una respuesta u orientarte.

Pero, vuelvo a lo anterior: la base de AJAX es JavaScript. Por lo cual, para hacer algo en AJAX tendrías que aprender un poco de JavaScript (para lo que tratás de hacer no hace falta un conocimiento muy avanzado de ese lenguaje) o bien usar alguna de las librerías/toolkits disponibles gratuitamente que te generan el código JS por medio de funciones (o métodos/objetos) en PHP. En esto último, mucho más no puedo decirte porque nunca usé ninguna de esas herramientas. Personalmente, me interesa aprender también JS así que prefiero generar el código yo. Si no te interesa tanto JS, o tenés que hacer cosas más complejas, seguramente la mejor opción son esas librerías, como por ejemplo XAXAJ.

Bueno, si estuviste viendo ejemplos en este foro, puede que hayas visto el mío, entro otros. Es básico, pero la ventaja que le veo para este caso puntual es que ya hace justo lo que estás buscando y no hace falta que instales ninguna librería adicional para que funcione. Sólo tendrías que editar las tablas de la base con tus datos. Si querés probarlo/usarlo, país libre, y si hay partes que no entendés, puedo darte una mano para ayudarte a entenderlas.

Suerte
Califa

[Melisa06]

Bytevamp:

El enlace que me enviaste, es muy bueno pero no lo comprendo en absoluto.
De todas formas te agradezco el dato.


Califa010:

Gracias por tu respuesta, he copiado tu código y su funcionamiento es EXCELENTE !!
te comento que me volví loca buscando qué era lo que tenía mal en mis tablas porque a veces al elegir un país no me mostraba las provincias, pero sí me las mostraba en el ejemplo de Cluster ( usando las mismas tablas !! ), como te imaginarás no podía comprenderlo ya que me parecía algo inexplicable porque no encontraba errores.

Luego de muchas horas de "print '$esto'" o if "lo otro", encontré el problema, el tema estaba en los dichosos apóstrofes que tenían algunos nombres en las tablas (ej: O'Higgins), lo resolví escribiéndolo O`Higgins, y todo anduvo bien, es decir : tu código funciona perfectamente ( supongo que esto es un problema de JS ).

Me gusta Javascript, voy a empezar a estudiarlo un poco más, la única duda que tengo es si los usuarios deben tener habilitado java o si deben bajarlo de internet, y en este caso qué pasa si no lo tienen cuando entran a la página ?

Bueno, sigamos adelante:
si no es muy complicado : tienes un ejemplo básico de cómo adaptar tu código a un formulario y luego recibir los resultados juntos en otra página ? traté de hacerlo yo pero no recibo nada
( ejemplo: / Cod. vendedor / artículo / pais / provincia / ciudad ).

Gracias otra vez, Melisa.

[califa010]

Buenas.

Me alegro de que te sirva. En cuanto al error del apóstrofe, es mío, no me había dado cuenta, pero suerte que lo encontraste. Había leído algo al respecto sobre los apóstrofes / comillas simples, pero no le había prestado mayor atención, la verdad, porque hasta ahora nunca había tenido inconvenientes. Pero se soluciona fácil. Al generar el xml, en vez de comillas simples ('), hay que usar dobles (") y escaparlas con la barra invertida (\), o sea (\"). Acá va la corrección del script php, con la línea que estaba mal comentada entre /* y */:

Código PHP:

 if ($consultaPaises) {
    $xml = "<?xml version='1.0' encoding='iso-8859-1'?>";
    $xml .= "<datos>";
    $xml .= "<paises>";
    $contPaises = 0;
    while($rsPaises = mysql_fetch_array($consultaPaises)) {
    /*     $xml .= "<pais id='".$rsPaises[0]."' nombre='".$rsPaises[1]."' />"; */
                $xml .= "<pais id=\"".$rsPaises[0]."\" nombre=\"".$rsPaises[1]."\" />";
        $defaultPaises[$contPaises] = $rsPaises[0];
        $contPaises++;
    }
    $xml .= "</paises>";
    if (isset($_GET['id_pais'])) {
        $id_pais = $_GET['id_pais'];
    } else {
        $id_pais = $defaultPaises[0];
    }
    $consultaProvincias = mysql_query("select id_provincia,nombre_provincia from provincias where id_pais=$id_pais");
    if ($consultaProvincias) {
        $xml .= "<provincias>";
        $contProv = 0;
        while ($rsProvincias = mysql_fetch_array($consultaProvincias) ) {
        /*     $xml .= "<provincia id='".$rsProvincias[0]."' nombre='".$rsProvincias[1]."' />";  */
                        $xml .= "<provincia id=\"".$rsProvincias[0]."\" nombre=\"".$rsProvincias[1]."\" />";
            $defaultProvincias[$contProv] = $rsProvincias[0];
            $contProv++;
        }
        $xml .= "</provincias>";
        if (isset ( $_GET['id_provincia'] ) ) {
            $id_provincia = $_GET['id_provincia'];
        } else {
            $id_provincia = $defaultProvincias[0];
        }
        $consultaMunicipios = mysql_query("select id_municipio,nombre_municipio from municipios where id_provincia=$id_provincia and id_pais=$id_pais");
        if ($consultaMunicipios) {
            $xml .= "<municipios>";
            while ($rsMunicipios = mysql_fetch_array($consultaMunicipios) ) {
            /*     $xml .= "<municipio id='".$rsMunicipios[0]."' nombre='".$rsMunicipios[1]."' />"; */
                                $xml .= "<municipio id=\"".$rsMunicipios[0]."\" nombre=\"".$rsMunicipios[1]."\" />";
            }
            $xml .= "</municipios>";
        }
        $xml .= "</datos>";
        header('Content-Type: text/xml'); 
        echo $xml;
    }
}  

En cuanto a la "accesibilidad" de JavaScript, hay muchas opiniones. Lo cierto es que si un usuario tiene un navegador muy viejo, puede que no tenga JS. Por otra parte, JS puede deshabilitarse; y si el usuario lo tiene deshabilitado, bueno, todo lo que esté en JS no va a ser leído. En la práctica, la inmensa mayoría de los usuarios navegan con un navegador que soporta JS y lo tienen habilitado (y probablemente ni lo sepan).

Aún así, en teoría lo más recomendable para muchos es hacer tu sitio de forma tal que si alguien no tiene JS (o CSS, o Flash, o lo que sea que requiera tu sitio), de todos modos puedan acceder al contenido, aunque, lógico, va a ser más pobre o limitado en su presentación/funcionalidad. En la práctica, significa bastante más trabajo (una versión para los que tienen JS o otra para los que no) y en mi caso, a menos que un cliente lo pida específicamente (y lo pague!!!), no lo haría. Si algún despistado tiene instalado IE 4, por ej, bueno, podría actualizarse, lo que le llevaría 5 minutos, no le costaría un centavo y le daría un software mucho mejor... (muchos dirán que esa postura es una burrada, pero en fin, cada loco con su tema, y cada uno hace lo que le parece mejor/más práctico).

Suerte
Califa

[califa010]

En cuanto al formulario, tal como está, no va a mandar nada. Tendrías que agregar lo siguiente.

Código:

<form name="frm" action="el_script_que_recibe.php" method="post">

Y a cada select (o a cada elemento dentro de un formulario) tenés que ponerles un "name".

Por ejemplo,

Código:

<select id="municipio" name="municipio">

Si fuera un campo de texto, lo mismo:

Código:

<input type="text" id="nombre_campo" name="nombre_campo">

De esa manera, cuando envíes el formulario, el script que lo reciba va a tener esas variables disponibles, a través de $_POST['nombre_campo'].

Sólo faltaría agregar una cosa. Un botón para enviar el formulario (que va dentro de <form></form>:

Código:

<input type="submit" value="enviar">

En "value" ponés lo que quieras que diga el botón. (Si no ponés nada, por defecto te va poner automáticamente "Submit Query" o algo por el estilo en castellano).

Cualquier duda, preguntá nomás.

Suerte
Califa

[Melisa06]

Antes que nada mil gracias por contestarme nuevamente, entendí lo que me comentas sobre "accesibilidad" de JavaScript, y estoy de acuerdo con Vos, es cuestión de actualizar el navegador, lo cual supone también una mejora para el usuario, y he tomado nota del tema de los apóstrofes.


Respecto al formulario, yo lo tenía así:

<form name="frm" method=post action="./pruebaresultados.php">
<div class="combo">
<select id="pais" onChange="actualizarProvincias()"></select>
<select id="provincia" onChange="actualizarMunicipios()"></select>
<select id="municipio" onChange=""></select>
<p><input type="submit" value="Enviar"></p>

Pero me faltaba el "name" , creo que por eso no recibía nada, lo voy a probar ( me va a llevar un tiempo adaptar todo, y luego te comento).

Por último ( y sé que ya me estoy poniendo pesada, por lo cual te pido disculpas, ya que me has ayudado mucho) crees que se puede hacer un select múltiple de las ciudades para usar el botón "control" y elegir varias ? me parece que es muy complejo y quizás me conviene abrir más select comunes para que elijan de a una por separado, (no creo que sean más de 4 o 5 ciudades las que necesiten seleccionar), esta ultima opción me gusta porque pienso que no quedaría mal visualmente (varios selectores), no sé cual será tu opinión, desde ya no pretendo que me indiques el código ya que no quiero abusar, sólo comentame si esto es posible y quizás yo lo pueda hacer leyendo las Faqs y los manuales.

Saludos, Melisa.

[califa010]

No hay de qué y no te hagas problema; estoy en el foro porque me gusta y si tengo tiempo y sé como hacer algo, no tengo inconvenientes en dar una mano.

Yendo a tu pregunta, lo más fácil es usar un select múltiple (esto en realidad es html más que JavaScript). No tenés que hacer mucho, porque los selects pueden ser múltiples con solo agregar dos cosas. Un atributo:

Código:

multiple="multiple"

y corchetes al valor de name

Código:

name="municipio[]"

O sea, algo así:

Código:

<select multiple="multiple" id="municipio" name="municipio[]"></select>

(el onChange="" no hace falta, lo podés borrar).

Lo que indicás ahí es que ese campo va a contener un array. ¿Qué es un array, con qué se come, cómo se usa, para qué sirve? Bueno, eso te lo dejo para que lo investigues, pero básicamente te permite meter en una variable más de un valor.

Un select múltiple es gráficamente distinto a un select común (cuando lo pruebes lo vas a ver más fácil que si te lo describo con palabras). Si no te convence podrías usar la otra opción de mostrar varios selects, aunque para eso después tendrías que agregar un poco más código (tenés que llenar más combos y probablemente también validar que no haya opciones repetidas, o sea que no seleccionen dos --o más-- veces la misma ciudad, etc). En principio es menos "eficiente" (estás repitiendo la misma información en 4 o 5 lados), pero si el combo no es muy grande, no debería haber problemas.


Suerte
Califa

[Melisa06]

Califa010:

Hice una prueba del formulario y funcionó perfecto !!

Ahora voy a ver el tema del select múltiple, con lo que me explicas
no voy a tener inconvenientes, el tema del array lo puedo manejar.

Por el momento ya no tengo más dudas con esto, pero no quiero
despedirme sin agradecerte toda tu voluntad y predisposición para
ayudarme, realmente es muy valorable este foro y quienes actúan
como Vos en forma desinteresada.

Te envío un cordial saludo y la mejor de las suertes para Vos.

Melisa.

[vitogq]

Hola Bytevamp, he visto que has recomendado el jsrs y que lo dominas, queria hacerte una pregunta.

Tengo una web en donde selecciono una provincia y me saca las poblaciones, el select de poblaciones es mutiple. El problema lo tengo al querer permitir que se modifique el select multiple con jsrs, solo me recupera el ultimo valor seleccionado, queria poder seleccionar varios valores al recuperar el select con jsrs, pasandole yo esos valores.

Si te resulta complejo lo que digo contacta via messenger ([email protected]) e intento ser mas claro.

Un saludo.