1

Quiero cargar una lista desplegable mediante AJAX pero tengo problemas al hacerlo, tengo todo en un archivo index.php.

La consulta para traer los registros y convertirlos a formato json la hace bien:

$data=array();
$sqlc = "SELECT idtc, notc FROM tipocita ";
$reqc = $bdd->prepare($sqlc);
$reqc->execute();
$tipocita = $reqc->fetchAll();
foreach ($tipocita as $row) {
    $option=array("idtc"=>$row["idtc"],"notc"=>$row["notc"]);
    $data[]=$option;
}
echo json_encode($data);

Que me devuelve esto:

[
  {"idtc":"7","notc":"NORMAL"},
  {"idtc":"8","notc":"URGENTE"}‌​,
  {"idtc":"9","notc":‌​"CRITICA"}
]

Aquí lo cargo pero no pasa nada:

<div class="form-group">
  <label for="color" class="col-sm-2 control-label">Tipo Cita</label>
  <div class="col-sm-10">
    <select name="tipocita" class="form-control" id="cita">
      <script>
        $("#cita").change(function(e) {
          $.ajax({
            url: "index.php",
            success: function(data) {
              console.log(data);
              for (var i = 0; i >= data.length; i++) {
                $("#cita").append("<option value='" + data[i]["idtc"] + "'>" + data[i]["notc"] + "</option>");

              }
            },
            error: function(err) {
              alert(err);
            }
          });
        });

      </script>
    </select>
  </div>
</div>

¿Por qué no se carga el dropdown correctamente? ¿Qué debo cambiar para que funcione?

3
  • puedes poner el JSON que te arroja para poder ir testeando? el 21 may. 2017 a las 3:25
  • Este es lo que me arroja: `[{"idtc":"7","notc":"NORMAL"},{"idtc":"8","notc":"URGENTE"},{"idtc":"9","notc":"CRITICA"}]´
    – Kevin
    el 21 may. 2017 a las 3:29
  • revisa mi respuesta y si quedan dudas, puedes comentar ahí abajo el 21 may. 2017 a las 3:50

3 respuestas 3

1

Ya logre cargar el dropdown pero de una manera diferente pero no se si sea la más ideal cualquier cosa estoy atento a escuchar sugerencias.

Convertí el lo que me daba el json_encode a un archico tipo .json

$datatipo = json_encode($data);
$file = 'tipocita.json';
file_put_contents($file, $datatipo);

Luego modifique el archivo del js así

                                <div class="form-group">
                            <label for="color" class="col-sm-2 control-label">Tipo Cita</label>
                            <div class="col-sm-10">
                                <select name="tipocita" class="form-control" id="cita"></select>
                                *<script type="text/javascript">
                                $(document).on('ready',function (){
                                $.getJSON('tipocita.json', function(data) {
                                $.each(data, function(i,tip) {
                                $("#cita").append('<option value="' + tip.idtc + '">' + tip.notc + '</option>');
                                }); // close each()
                                }); // close getJSON()
                                });
                                </script>*
                            </div>

Asi ya me carga el dropdown

2
  • revisa el edit de mi respuesta el 21 may. 2017 a las 5:49
  • No habia visto voy a hacerlo.
    – Kevin
    el 21 may. 2017 a las 5:55
1

No es necesario usar el evento .change para poner esas opciones en tu select. Simplemente lo haces cuando el documento esté listo. Cuando traigas un JSON lo parseas con JSON.parse(eljson) y luego con un ciclo for puedes acceder a cada elemento como se muestra a continuación:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hi</title>

<!-- JQuery  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>
<body>
<div class="form-group">
  <label for="color" class="col-sm-2 control-label">Tipo Cita</label>
    <div class="col-sm-10">
      <select name="tipocita" class="form-control" id="cita">
        <script>
        $(document).ready(function(){
        $.ajax({
            url:"trae_citas.php",
            success:function(data){
              console.log(data);
              data=JSON.parse(data);
              for(var i in data){
                $("#cita").append("<option value='"+data[i].idtc+"'>"+data[i].notc+"</option>");
              }
            }
          });
        });
        </script>
      </select>
  </div>
</div> 
</body>
</html>

EDIT:

Te arroja el último error al tener tu código PHP en la misma ubicación de tu código html+javasript. Si separas los archivos te darás cuenta que se soluciona y no tendrás que crear un archivo JSON para llevarlo a cabo.

Puedes poner tu código html+js en un index.php o index.html, y tu código php en un trae_citas.php

5
  • Lo probe pero no me salen todavía los datos, la consola de chrome me da este error; index.php:2 Uncaught SyntaxError: Unexpected token < in JSON at position 94 at JSON.parse (<anonymous>) at Object.success (index.php:37) at j (jquery.js:2) at Object.fireWith [as resolveWith] (jquery.js:2) at x (jquery.js:4) at XMLHttpRequest.b (jquery.js:4) success @ index.php:37 j @ jquery.js:2 fireWith @ jquery.js:2 x @ jquery.js:4 b @ jquery.js:4
    – Kevin
    el 21 may. 2017 a las 4:05
  • Esas comillas se me fueron en el comentario porque quería ponerlo como codigo la respuesta para que se viera mejor pero al final no pude pero el json si sale como dices.
    – Kevin
    el 21 may. 2017 a las 4:17
  • ok seguiré revisando, por mientras prueba quitando el var datos = JSON.parse(data) y accede a cada elemento como lo estabas haciendo antes: data[i]["idtc"] el 21 may. 2017 a las 4:23
  • Ok, seguire revisando también, pura vida.
    – Kevin
    el 21 may. 2017 a las 4:30
  • Podrías separar el código php en un traeCitas.php y el html+js dejarlo en index.php o index.html el 21 may. 2017 a las 5:55
0

Tu bucle for tiene la condición de entrada mal puesta:

          for (var i = 0; i >= data.length; i++) {
            $("#cita").append("<option value='" + data[i]["idtc"] + "'>" + data[i]["notc"] + "</option>");

          }

se empieza con i valiendo 0, y la condición de entrada para comenzar/continuar el bucle es que i sea mayor que data.length que es 3, por lo que nunca se cumplirá la condición y nunca se entrará en el bucle.

Si cambias la condición de mayor o igual (>=) a menor (<, ya que el contador empieza en 0), ya se generará bien las opciones de la select:

          for (var i = 0; i < data.length; i++) {
            $("#cita").append("<option value='" + data[i]["idtc"] + "'>" + data[i]["notc"] + "</option>");

          }

Aparte de eso, tal y como se carga el código, cada vez que cambies el valor del dropdown, se cargarán los valores en AJAX y aparecerán duplicados en la lista. Deberías plantearte cambiarlo y ponerlo para que se ejecute una sola vez (p.e. al cargar la página).

3
  • 1
    debe ser i < data.length, asumiendo que ya hizo el JSON.parse sobre esa variable data. Si usas <=, arrojará el siguiente error: "Cannot read property 'idtc' of undefined". el 21 may. 2017 a las 4:02
  • Gracias, lo acabo de corregir
    – Alvaro Montoro
    el 21 may. 2017 a las 4:03
  • Exacto me sale "undefined"
    – Kevin
    el 21 may. 2017 a las 4:43

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.