1

Les comento mi nuevo problema. Tengo unos selects dependientes que funcionan bien

<form action="" name="profileForm" id="profileForm" method="POST" class="form">
    <div class="form-column">
        <div class="form-input">
            <label>País</label>
            <?php $countries = $querys->getCountries(); ?>
            <div class="form-select">
                <select name="country" id="country">
                    <option value="" hidden>Seleccione País</option>
                    <?php foreach ($countries as $country){ ?>
                        <option value="<?php echo $country['id'] ?>"><?php echo $country['name'] ?></option>
                    <?php } ?>
                </select>
            </div>
        </div>
        <div class="form-input">
            <label>Provincia</label>
            <div class="form-select">
                <select name="province" id="province">
                    <option value="" hidden>Seleccione Provincia</option>
                </select>
            </div>
        </div>
    </div>

    <div class="form-column">
        <div class="form-input">
            <label>Ciudad</label>
            <div class="form-select">
                <select name="city" id="city">
                    <option value="" hidden>Seleccione Ciudad</option>
                </select>
            </div>
        </div>
    </div>
</form>

Primero cargo la lista de países y luego con JS hago

$(document).ready(function(){
    $("#country").change(function(){
        getProvinces($("#country").val());
    });

    $("#province").change(function(){
        getCities($("#province").val());
    });

});

function getProvinces(country){
    $.get("loadData.php","country="+country,    function(data){
        $("#province").html(data);

        var province = $("#province").val();
        getCities(province);
    });
}

function getCities(province){
    $.get("loadData.php","province="+province,    function(data){
           $("#city").html(data);
    });
}

loadData.php tiene lo siguiente

<?php
    if ($_GET) {
        if (isset($_GET['country'])) {
            include_once '../core/querys.php';
            $country = $_GET['country'];
            $provinces = $querys->getProvinces($country);
            echo '<option value="" hidden>Seleccione Provincia</option>';
            foreach ($provinces as $province) {
                echo '<option value="'.$province['id'].'">'.$province['name'].'</option>';
            }
        }

        if (isset($_GET['province'])) {
            include_once '../core/querys.php';
            $province = $_GET['province'];
            $cities = $querys->getCities($province);
            echo '<option value="" hidden>Seleccione Ciudad</option>';
            foreach ($cities as $city) {
                echo '<option value="'.$city['id'].'">'.$city['name'].'</option>';
            }
        }
    }
?>

Funciona tal cual debe funcionar, es rápido y todo bien. El problema viene cuando quiero poblar con la data que ya tengo guardada en la DB y quiero cambiar por ejemplo de ciudad o provincia, sin el evento change del select anterior no me funciona, debo cambiar país y hacer toda la vuelta, cosa que se que no es correcto.

Este sería mi nuevo HTML con los valores de la DB, se muestran los datos de los value y los labels

<?php $profile = $querys->getProfile($idUserSession)[0]; ?>
<form action="" name="profileForm" id="profileForm" method="POST" class="form">
    <div class="form-column">
        <div class="form-input">
            <label>País</label>
            <?php $countries = $querys->getCountries(); ?>
            <div class="form-select">
                <select name="country" id="country">
                    <option value="<?php echo $profile['country']; ?>" hidden><?php echo $profile['country_name']; ?></option>
                    <?php foreach ($countries as $country){ ?>
                        <option value="<?php echo $country['id'] ?>"><?php echo $country['name'] ?></option>
                    <?php } ?>
                </select>
            </div>
        </div>
        <div class="form-input">
            <label>Provincia</label>
            <div class="form-select">
                <select name="province" id="province">
                    <option value="<?php echo $profile['province']; ?>" hidden><?php echo $profile['province_name']; ?></option>
                </select>
            </div>
        </div>
    </div>

    <div class="form-column">
        <div class="form-input">
            <label>Ciudad</label>
            <div class="form-select">
                <select name="city" id="city">
                    <option value="<?php echo $profile['city']; ?>" hidden><?php echo $profile['city_name']; ?></option>
                </select>
            </div>
        </div>
    </div>
</form>

Según este extenso post de SOes debo usar un trigger para que sin necesidad del evento change del select anterior yo pueda cambiar ya sea la provincia o la ciudad. He intentado con

const country = document.querySelector('#country');
const province = document.querySelector('#province');
const city = document.querySelector('#city');

province.addEventListener('change', function(event) {
    country.dispatchEvent(
        new MouseEvent('change', {
            bubbles: true,
            cancelable: true,
            view: window,
    }));
});

city.addEventListener('change', function(event) {
    country.dispatchEvent(
        new MouseEvent('change', {
            bubbles: true,
            cancelable: true,
            view: window,
    }));
});

country.addEventListener('change', function(event) {
    getProvinces($("#country").val());
    getCities($("#province").val());
});

province.addEventListener('change', function(event) {
    getProvinces($("#country").val());
    getCities($("#province").val());
});

function getProvinces(country){
    $.get("loadData.php","country="+country,    function(data){
        $("#province").html(data);

        var province = $("#province").val();
        getCities(province);
    });
}

function getCities(province){
    $.get("loadData.php","province="+province,    function(data){
           $("#city").html(data);
    });
}

Y aunque se muestran algunos datos no funciona ni cuando tengo datos cargados de la DB ni cuando aun no se han llenado esos datos. Se que ando cerca, pero JS siempre ha sido mi piedra en el zapato.

Alguna idea de como solventarlo?

2 respuestas 2

2

Voy a responder a la pregunta porque a alguien le puede ayudar en un futuro.

En primer lugar, gracias a @gbianchi logré ver que el principal problema era que no estaba poblando mis selects con lo que obtenía de la DB. Eso se resolvió fácil así:

<div class="form-column">
    <div class="form-input">
        <label>País</label>
        <?php $countries = $querys->getCountries(); ?>
        <div class="form-select">
            <select name="country" id="country">
                <option value="<?php echo $profile['country']; ?>" hidden><?php echo $profile['country_name']; ?></option>
                <?php foreach ($countries as $country){ ?>
                    <option value="<?php echo $country['id'] ?>"><?php echo $country['name'] ?></option>
                <?php } ?>
            </select>
        </div>
    </div>
    <div class="form-input">
        <label>Provincia</label>
        <?php $provinces = $querys->getProvinces($profile['country']); ?>
        <div class="form-select">
            <select name="province" id="province">
                <option value="<?php echo $profile['province']; ?>" hidden><?php echo $profile['province_name']; ?></option>
                <?php foreach ($provinces as $province){ ?>
                    <option value="<?php echo $province['id'] ?>"><?php echo $province['name'] ?></option>
                <?php } ?>
            </select>
        </div>
    </div>
</div>

<div class="form-column">
    <div class="form-input">
        <label>Ciudad</label>
        <?php $cities = $querys->getCities($profile['province']); ?>
        <div class="form-select">
            <select name="city" id="city">
                <option value="<?php echo $profile['city']; ?>" hidden><?php echo $profile['city_name']; ?></option>
                <?php foreach ($cities as $city){ ?>
                    <option value="<?php echo $city['id'] ?>"><?php echo $city['name'] ?></option>
                <?php } ?>
            </select>
        </div>
    </div>
    <div class="form-input">
        <label>Dirección</label>
        <input type="text" name="address" id="address" placeholder="Calle, Numero, Piso, Puerta" value="<?php echo $profile['address']; ?>" required>
    </div>
</div>

Esto era un error de lógica, algo que no se porqué me ha pasado ya que lo he hecho muchas veces pero solo con PHP, yo supongo que lo de JS me hizo verlo diferente, error de principiante.

Luego de eso, me aconsejaron usar un callback() para retrasar las llamadas y mejorar el performance del sistema. Para lo cual cambié el JS a:

$(document).ready(function(){
    $("#country").change(function(){
        setTimeout(getProvinces, 1000);
    });

    $("#province").change(function(){
        setTimeout(getCities, 1000);
    });

});

function getProvinces(){
    const country = $("#country").val();
    $.get("loadData.php","country="+country,    function(data){
        $("#province").html(data);

        setTimeout(getCities, 1000);
    });
}

function getCities(){
    const province = $("#province").val();
    $.get("loadData.php","province="+province,    function(data){
           $("#city").html(data);
    });
}

Con esto, retraso la llamada a las funciones de carga de provincias y ciudades, un segundo, lo que da tiempo a que si alguien en lugar de MAdrid elige MAlaga no se haga una llamada de inmediato sino que permita al usuario corregir el error. Una idea acertada de @gbianchi.

Se que parece una bobada pero aprendí mucho con este error...

0

Tienes un mix (mala práctica, aberración cuando la página se espera tenga contenido dinámico):

  • Tienes un php embebido con html que es un problema para darle mantenimiento.
  • tienes que tener en cuenta que es preferible trabajar con MVC y OOP cuando tratas de construir sitios que requieren datos dinámicos.
  • El php embebido en tu html solo servirá cuando entres por primera vez a esa página no has presentado ningún mecanismo de recuperación de estado, next.
  • Necesitas si o si mejorar la lógica general en ese formulario de Perfil, porque esa información que captures si o si tiene que ir a una base de datos para cumplir con la capa de persistencia de datos fuera de la sesión si es que esta se pierde... cuando inicias sesión estos datos debe ser buscados de la base de datos y colocados en la variable de sesión, para que cuando cargues cualquier formulario, en donde necesites estos datos, estos sean usado en los select como valores por defecto.

Ejemplo de persistencia de datos:

<?php
// Tu objeto o array de datos
$opciones = array(
    'opcion1' => 'Opción 1',
    'opcion2' => 'Opción 2',
    'opcion3' => 'Opción 3'
);

// Valor que se va a seleccionar por defecto (puedes cambiarlo según tus necesidades)
$valorSeleccionado = $_SESSION['USER']['COUNTRY'];

// Generar el código HTML del select-box
echo '<select name="miSelect">';

foreach ($opciones as $valor => $etiqueta) {
    // Verificar si la opción actual es la seleccionada por defecto
    $selected = ($valor == $valorSeleccionado) ? 'selected' : '';

    // Crear la opción HTML
    echo '<option value="' . $valor . '" ' . $selected . '>' . $etiqueta . '</option>';
}

echo '</select>';

1. Events y Handlers

Estoy seguro de que el problema inicial es de logica, ya que no veo en tu codigo como haces la poblacion de datos en el get, pero de seguro antes de que pueda darte la respuesta ya la habras encontrado por si sola, ahora hay otras cosas que están relacionado a Jquery y el uso de selectores como:

$("#country").click(...

Este tipo de selectores solo funcionan con el DOM original y no con contenido que ha mutado/cambiado/actualizado mediante la intervención de javascript/ajax.

Por lo tanto el correcto selector en JavaScript; sería algo como el uso de "delegations" o "delegated" selectors:

$(document).on("click","selector elemento",function() {
    alert("click");
});

Una breve explicación sobre las diferencias:

Cuando declaras: $("#country") estas diciendole a jquery que busque este elemento en el DOM cargado cuando se detecto el evento READY del HTML (Original).

Cuando declaras: $(document).on estas diciendole a jquery que espere (on) al evento Click en el documento (no hace referencia al original si no a su ultimo estado).

Documentación:

Delegados: https://api.jquery.com/on/

Selectores: https://api.jquery.com/category/selectors/

2. Controles sobre eventos:

Posiblemente esto te lleve a otra situación que puede ser el doble firing de eventos... el cual se mitiga con namespaces.

Ejemplos:

$(document).on("click.pluggin","selector elemento",function() {
    alert("click");
});

y con el reinicio de los eventos y la cancelación de la propagación:

$(document).off("click.plugin");
$(document).unbind("click.plugin");
$(document).on("click.plugin","selector elemento",function(event) {
    window.StopProp(event);
    alert("click");
});

function StopProp(e) {
    e.stopPropagation();
    e.preventDefault();
    e.stopImmediatePropagation();
}

Esto te permitirá trabajar con un mismo código de eventos sobre el mismo elemento independientemente de como cambien los select box.

3. Evita controles de tiempo manuales (delays), implementa promesas:

El uso de setTimeout como callback esta desaconsejado, ya que el tiempo que determinaste manualmente provocara un delay lineal que no podrás controlar cuando no se cumpla, en lugar de esto lo recomendando es implementar promises con un indicador de espera (modal).

Documentacion:

Promises: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Ejemplo:

function showModal() {
  $("#loadingModal").css("display", "block");
}

function hideModal() {
  //esto depende del Framework de diseño que uses en este caso un ejemplo de BS... aunque creo que tiene su propio metodo para mostrar u ocultar un modal de forma programatica.
  $("#loadingModal").css("display", "none");
}

function getProvinces() {
  return new Promise((resolve, reject) => {
    const country = $("#country").val();
    $.post("loadData.php", "country=" + country, function (data) {
      $("#province").html(data);
      getCities();
      resolve();
    }).fail(function (error) {
      reject(error);
    });
  });
}

$(document).off("change.input","#country");
$(document).unbind("change.input","#country");
$(document).on("change.input","#country", (function () {
    showModal();
    getProvinces()
      .then(() => hideModal())
      .catch((error) => {
          hideModal();
          console.error(error);
    });
});

//Nota: he organizado tambien el codigo ya que normalmente se suele colocar las clases, metodos, funciones, constantes, propiedades primero (arriba) y de ultimo los eventos.

Incluso al usar promesas si la promesa falla puedes mostrar un modal de error en el cual colocas un formulario o botón para que intente enviarte los datos del error crear un ticket de atención basado en la hora servidor que te indique en el log de errores del sistema de producción y te permita ir a hacer el tracking y debug.

4. [IMHO] Evitar usar GET cuando estes implementando procesos de CRUD:

En cuanto a la Seguridad: completamente desaconsejado el uso de .get, en su lugar implementaria POST todo lo que tenga que ver con consulta de datos o envió de datos al servidor que seran utilizado en procesos.

Ejemplo:

$.post("loadData.php", { country: country }, function (data) {
  $("#province").html(data);
  resolve();
}).fail(function (error) {
  reject(error);
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.