entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

No funciona el Select al dar click a la primera vez

Tengo un Select que debe cargar los datos de una base de datos en MySQL. En la primera opción (option) el valor del dato actual y en las opciones restantes los valores disponibles de la tabla Ciudad para posibles modificaciones. Carga correctamente, pero al dar click a la primera vez no se despliegan correctamente las opciones; al dar click la segunda vez funciona normalmente, al igual que la tercera y las siguientes. Esto solo me pasa en el navegador Chrome, en Firefox funciona correctamente desde la primera vez.
Lo hago de esta forma porque debe cargar la lista de las ciudades dependiendo de otro Select con lista de provincias.

En el Select, que está dentro de un div de clase .ClassCiudad. id_ciudad para la lista de ciudades. id_ciudad_prov para la ciudad actual.

$.ajax({
       data: {"id_ciudad": "<?php echo $row[9];?>", "id_ciudad_prov": "<?php echo $row[18];?>"},
              type: "POST",
              url: "Ciudad.php",
              success: function(response)
              {
                  $('.ClassCiudad select').html(response).fadeIn();
              }
      });

En Ciudad.php

require_once('Conexion/conexion.php');
    session_start();

    $sqlCiudad = "SELECT Id, Nombre FROM ciudad WHERE Provincia = ".$_REQUEST['id_ciudad_prov']." AND Id != ".$_REQUEST['id_ciudad']." ORDER BY Nombre ASC";

    $ciudad = $mysqli->query($sqlCiudad);

    $sqlCiudadAct = "SELECT Id_Unico, Nombre    
    FROM ciudad 
    WHERE Id = ".$_REQUEST['id_ciudad'];

    $ciudadAct = $mysqli->query($sqlCiudadAct);
    $rowAct = mysqli_fetch_row($ciudadAct);

    echo '<option value="'.$rowAct[0].'">'.utf8_encode($rowAct[1]).'</option>'; //La ciudad actual del registro.

    while ($rowC = mysqli_fetch_row($ciudad))
    {
        echo '<option value="'.$rowC[0].'">'.utf8_encode($rowC[1]).'</option>'; //La lista de las ciudades disponibles para modificar.
    }

Gracias de antemano.

ferneyp34 comentado Jul 27, 2016

Buenos días. Me podrían colaborar por favor @Leonardo-Tadei, @carlossevi . Se los agradezco de antemano.

carlossevi comentado Jul 28, 2016

Te faltó poner el código que desencadena la llamada de la carga de datos mediante $.ajax().

ferneyp34 comentado Jul 28, 2016

Buen día @carlossevi .Gracias por su atención.
Ese es todo el código que tengo para desplegar el select. Como lo comenté, en Firefox funciona correctamente pero en Chrome no.

carlossevi comentado Jul 28, 2016

Debes tener más código html y js, ¿cuándo se ejecuta la petición ajax?

ferneyp34 comentado Jul 28, 2016

Buen día @carlossevi . Gracias por atenderme.
Discúlpeme, creo que ud se refiere a esto:

<div class="ClassCiudad">
            <select name="ciudad" id="ciudad" >

            </select>
<script type="text/javascript">
$(document).ready(function()
{
    $(".ClassCiudad select").click(function()
    {
       $.ajax({
                  data: {"id_ciudad": "<?php echo $row[9];?>", "id_ciudad_prov": "<?php echo $row[18];?>"},
                  type: "POST",
                  url: "Ciudad.php",
                  success: function(response)
                  {
                  $('.ClassCiudad select').html(response).fadeIn();
                                }
                          });                    
                    });
                });
</script>
</div>

Es el código del select de ciudad.

carlossevi comentado Ago 1, 2016

El elemento HTML ¿es creado dinámicamente? Haz por favor la siguiente prueba, reemplaza esto:

$(".ClassCiudad select").click(function() {...});

Por:

$(".ClassCiudad").on('click','select', function() {...});

ferneyp34 comentado Ago 1, 2016

Buen día @carlossevi .
Hice el cambió, pero no funcionó como lo esperaba, el select solo no despliega correctamente. No obstante se me ocurrió otra solución que comparto.
Agradezco su interés por colaborarme.

1 Respuesta

2votos

ferneyp34 Puntos620

Buen día a todos.
He encontrado mi solución. Había que cargar el select de dos formas, una con el evento change del select de provincia y la otra quitando el evento click que tenía ciudad; de tal suerte que el select ciudad se cargara junto con la página.

<div class="ClassCiudad">
            <select name="ciudad" id="ciudad" >

            </select>
<script type="text/javascript">
$(document).ready(function()
{

var cambio = 0;
                    //Este evento change funciona cuando se cambia el select de provincia.
                    $(".classProv select").change(function()
                    {
                        cambio = 1;
                        var form_data =
                        {
                                is_ajax: 1,
                                id_prov: +$(".classProv select").val()
                        };
                        $.ajax({
                                type: "POST",
                                url: "Ciudad.php", //En este archivo se hace una consulta que muestra todas las ciudades de la provincia seleccionada.
                                data: form_data,
                                success: function(response)
                                {
                                    $('.ClassCiudad select').html(response).fadeIn();
                                }
                        });
                    });

    if(cambio == 0) //Se verifica si el select de provincia no ha cambiado. Es decir, que cuando se carga la página, el select carga todos los registros de la tabla ciudad, incluso la ciudad actual.
    {
       $.ajax({
                  data: {"id_ciudad": "<?php echo $row[9];?>", "id_ciudad_prov": "<?php echo $row[18];?>"},
                  type: "POST",
                  url: "Ciudad_act.php",//En este archivo se hace una consulta que muestra todas las ciudades de la provincia actual, además de la cuidad actual.
                  success: function(response)
                  {
                  $('.ClassCiudad select').html(response).fadeIn();
                                }
                          });                    
                    });
                });
     }
</script>
</div>

Esta es la solución que se me ocurrió y funciona en varios navegadores.
Agradezco a todos su interés por colaborarme.
Hasta pronto.

Peter comentado Ago 1, 2016

Gracias por compartir la solución!

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta