[SOLUCIONADO] ¿Evitar fin de petición asíncrona al hacer echo?

[berkeleyPunk]

Hola!

Pues bien, estuve haciendo pruebas con selects dependientes en AJAX y PHP. Me salió esto.

Se ve bonito, ..., por fuera. Por dentro, puede mejorarse, sin duda.

Son 3 selects. Básicamente hago 3 condicionales que checan qué ha elegido el usuario. Es decir, si acaba de elgir continente, país o provincia. El script que se ejecuta al elegir país añade sólo unas líneas al script de continente. Y el script que se ejecuta al elegir provincia añade sólo unas líneas más al de país. La cosa es que hay código repetido, y no veo la forma de evitar repetirlo.

¿Es posible eliminar los 3 condicionales, de forma que sólo haya un bloque de líneas (que no se repitan ) que devuelvan tal o cual respuesta según la elección del usuario?

Porque, digamos, elijo el continente americano. La respuesta asíncrona me devuelve los países de este continente mediante un echo, y con este echo se termina la petición. Así, no tengo forma de hacer nada más, digamos otro bucle (o lo que sea) para llenar el select de provincias, si es que el usuario eligió un país en vez de un continente. No busco evitar que termine la petición al hacer echo (entiendo que eso no se puede), la idea es no repetir código. Pero el echo no me deja!

Código PHP:

  if ( ($continente!="NULL") && ($pais=="NULL") ) {
    foreach ($arrayPaises as $claveContinente=>$paises) {
        if($claveContinente == $continente) {
            foreach($paises as $clavePais=>$provincias) {
                $htmlPais .= '<option id="'.$clavePais.'" value="'.$clavePais.'">'.$clavePais.'</option>';
            }
            $arrayRespuestas = array (
                "htmlPais" => $htmlPais,
                "statusAPP" => "Respuesta AJAX ok para paises"
            );
            break;
        }
    }
    echo json_encode($arrayRespuestas);
}

else if ( ($continente!="NULL") && ($pais!="NULL") && ($provincia=="NULL")  ) {
    foreach ($arrayPaises as $claveContinente=>$paises) {
        if($claveContinente == $continente) {
            foreach($paises as $clavePais=>$provincias) {
                $htmlPais .= '<option id="'.$clavePais.'" value="'.$clavePais.'">'.$clavePais.'</option>';
            }
            foreach($paises as $clavePais=>$provincias) {
                if( $clavePais == $pais) {
                    foreach($provincias as $claveProvincia=>$city) {
                        $htmlProvincia .= '<option id="'.$city.'" value="'.$city.'">'.$city.'</option>';
                    }
                    $arrayRespuestas = array (
                        "paisElegido" => $pais,
                        "htmlPais" => $htmlPais,
                        "htmlProvincia" => $htmlProvincia,
                        "statusAPP" => "Respuesta AJAX ok para ciudades"
                    );
                    break;
                }
            }
            break;
        }
    }
    echo json_encode($arrayRespuestas);
}


else if ( ($continente!="NULL") && ($pais!="NULL") && ($provincia!="NULL") ) {
    foreach ($arrayPaises as $claveContinente=>$paises) {
        if($claveContinente == $continente) {
            foreach($paises as $clavePais=>$provincias) {
                $htmlPais .= '<option id="'.$clavePais.'" value="'.$clavePais.'">'.$clavePais.'</option>';
            }
            foreach($paises as $clavePais=>$provincias) {
                if( $clavePais == $pais) {
                    foreach($provincias as $claveProvincia=>$city) {
                        $htmlProvincia .= '<option id="'.$city.'" value="'.$city.'">'.$city.'</option>';
                        if ($city == $provincia) {
                            $ciudadElegida = $city;
                        }
                    }
                    $arrayRespuestas = array (
                        "provinciaElegida" => $ciudadElegida,
                        "paisElegido" => $pais,
                        "htmlPais" => $htmlPais,
                        "htmlProvincia" => $htmlProvincia,
                        "statusAPP" => "Respuesta AJAX ok para ciudades"
                    );
                    break;
                }
            }
            break;
        }
    }
    echo json_encode($arrayRespuestas);
} 
   

Saludos!

[NSD]

Pppfff este tema ya se trato tantas veces.

index.html

Código HTML:

<!DOCTYPE html>
 <html>
     <head>
         <title>SELECT DEPENDIENTES</title>
     </head>
     <body>
         <form id="form-depend">
             <select name="continente" data-load="continente">
                <option value="" class="default">Seleccione</option>
             </select>
 
             <select name="pais" data-load="pais" data-depend="continente">
                <option value="" class="default">Seleccione</option>
             </select>
 
             <select name="provincia" data-load="provincia" data-depend="continente,pais">
                <option value="" class="default">Seleccione</option>
             </select>
         </form>
 
         <script>
            function depend(form) {
                this.form = form;
                this.init();
            }
            depend.prototype = {
                "init" : function() {
                    var dependents = this.form.querySelectorAll("select[data-depend]"),
                        standalone = this.form.querySelectorAll("select:not([data-depend])"),
                        dependent;
 
                    for (var d=0; d<dependents.length; d++) {
                        dependent = dependents[d];
                        var mains = this.form.querySelectorAll("[name='" + dependent.dataset.depend.split(",").join("'],[name='") +"']");
                        for (var m=0; m<mains.length; m++)
                            mains[m].addEventListener("change", this.load.bind(this, dependent));
                    }
                    
                    for (var s=0; s<standalone.length; s++)
                        this.load(standalone.item(s));  
                },
                "load" : function(select) {
                    var options = select.querySelectorAll("option:not(.default)");
                    for (var o=0; o<options.length; o++)
                        select.removeChild(options.item(o));
 
                    this.ajax("combo/" + select.dataset.load + ".php", {
                        "success" : function(data) {                            
                            data.forEach(function(item){
                                var option = document.createElement("option");
                                option.value = item.value;
                                option.label = item.label;
                                select.appendChild(option);
                            });
                        },
                        "error" : function(e) {
                            console.log(e);
                            alert(e);
                        }
                    });
                },
                "ajax" : function(url, callbacks) {
                    var request = new XMLHttpRequest();
                    request.open("post", url);
                    request.onreadystatechange = function(callbacks) {
                        if(this.readyState === 4) {
                            var response = this.responseText,
                                success = false;
 
                            if(this.status == 200) {
                                try {
                                    response = JSON.parse(response);
                                    success = true;
                                } catch(e) { }
                            }
 
                            if(success)
                                if(callbacks.success)
                                    callbacks.success(response);
                            else if(callbacks.error)
                                callbacks.error({"response" : response});
                        }
                    }.bind(request, callbacks);
                    request.send(new FormData(this.form));
                }
            }
 
            new depend(document.getElementById("form-depend"));
         </script>
     </body>
 </html>
 

combo/continente.php

Código PHP:

<?php 
    $continentes = [
        ["label" => "America", "value" => 1],
        ["label" => "Europa", "value" => 2],
        // ...
    ];
    
    echo json_encode($continentes);
 

combo/pais.php

Código PHP:

<?php 
    $paises = [
        1 => [
            ["label" => "Argentina", "value" => 1],
            ["label" => "Uruguay", "value" => 2]
            // ...
        ],
        2 => [
            ["label" => "España", "value" => 3],
            ["label" => "Alemania", "value" => 4]
            // ...
        ],
        // ...
    ];
    
    echo json_encode(empty($paises[$_POST["continente"]]) ? [] : $paises[$_POST["continente"]]);
 

combo/provincia.php

Código PHP:

<?php 
    $provincias = [
        1 => [
            ["label" => "Buenos Aires", "value" => 1],
            // ...
        ],
        2 => [
            ["label" => "Montevideo", "value" => 3],
            // ...
        ],
        3 => [
            ["label" => "Madrid", "value" => 4],
            // ...
        ],
        4 => [
            ["label" => "Berlin", "value" => 5],
            // ...
        ],
        // ...
    ];
    
    echo json_encode(empty($provincias[$_POST["pais"]]) ? [] : $provincias[$_POST["pais"]]);
 

[berkeleyPunk]

Iniciado por NSD

Pppfff este tema ya se trato tantas veces...

Bueno, pues el código que propones está muy bueno..., pero es un planteamiento absolutamente distinto!

De todas formas, aprendo de él. Gracias NSD!

[pateketrueke]

Iniciado por berkeleyPunk

Bueno, pues el código que propones está muy bueno..., pero es un planteamiento absolutamente distinto!

De todas formas, aprendo de él. Gracias NSD!

¿Por qué es distinto?

¿Porque imprimes HTML en lugar de devolver los datos?

¿Y si en ese caso tienes una función genérica que tome esos datos y genere el HTML?

Creo que estás pidiendo que alguien piense por ti, cuando bien podrías mejorar la implementación a tu gusto.

[NSD]

La diferencia mas grande es que no use JQuery y el script completo tiene menos lineas que la configuración usando ese framework

Al margen de eso, otra posible diferencia es que tienes 3 archivos php, pero tranquilamente puedes fusionarlos en uno solo, si le pones el data-load igual a los 3 combos, puedes tener todo en un solo archivo usando ifs tal como lo haces en tu script original.

Otra cosa que puedes mejorar es esta parte:

Código Javascript:

data.forEach(function(item){
  var option = document.createElement("option");
  option.value = item.value;
  option.label = item.label;
  if(item.selected)
    option.selected = true;
  select.appendChild(option);
});
 

Asi puedes enviar una opcion seleccionada por defecto para cada combo.

En fin, coincido con @pateketrueke puedes adaptarlo sin problemas.

[berkeleyPunk]

Perdón por la tardanza...
pateketrueke, buen día. No quiero que alguien piense por mí, generalmente no soy de ese tipo (a veces sí, pero son pocas y no es esta una de esas veces). Quizá me expresé mal, quizá tú le encontraste el lado negativo, flojo, a mi comentario. Llegué aquí inicialmente pidiendo ayuda en el sentido de que se me diera una idea, un camino, una ruta sobre cómo modificar el script para hacer una función genérica para los selects dependientes. Algo como: "Mira, yo haría una función con 3 parámetros, uno que indicara qué select ha sido elegido, otro...". Eso es todo.

Comencé ya con dicha función, a ver qué tal me sale. Cuando tenga avances importantes, y desde luego los problemas que no pueda solucionar, regreso.

Saludos!

[berkeleyPunk]

Tarde pero seguro!

Rehice una buena parte del código. No pude hacer una función genérica que devolviera el contenido para cada select. Sin embargo, todo quedó mejor. Cambié un par de cosas en atención al script de NSD. Este par de cosas fueron:

1) ya no uso un solo array con toda la información de continentes, países y provincias. Esto me obligaba a que cada vez que elegía una opción de un select, tener que ejecutar un foreach que leyera ese array desde el principio. Así que,
2) dividí ese array en 3 (continentes, países y provincias).

Código PHP:

  $arrayPaises = array(
    "africa" => array(
        "Sudáfrica",
        "Etiopía",
        "Marruecos",
        "Senegal",
        "Gana"
    ),
...
);
 
foreach($arrayPaises as $continente=>$listaPaises) {
    if($valorSelectElegido == $continente) {
        foreach($listaPaises as $clavePais=>$pais) {
            $htmlPais .= '<option>'.$pais.'</option>';
        }
        ...
    }
} 
   

De esta forma me ahorro, en este caso, el bucle sobre los continentes.

Hice otras mejoras, pero acerca del problema que plantee originalmente, esto fue lo más que pude hacer.

Saludos!