0

Tengo un error cuando quiero setear la data a los ID de los inputs, solo setea a uno y no a los N que me salen.

Cabe recalcar que los ID de los input's los coloco con PHP es decir de forma dinámica al igual que la cantidad de input's que van a mostrar.

Éste es mi código que estoy aplicando.

Un ejemplo rápido de mi proyecto:

En mi vista hay un formulario de registro de asistencias, lo cual lo hace un profesor, el formulario es dinámico. Es decir, si el profesor tiene un salón le sale uno, pero si tiene 2 le salen dos campos donde rellena la cantidad de alumnos.

Lo que quiero hacer es que esos campos se auto rellenen con jquery y siga con el proceso que sigue.

JQUERY:

$(".letras").each(function () {
    codigo_modular = this.id;
    var res = codigo_modular.substr(-7);
    $.ajax({
        url: baseurl + 'asistencia/traer_alumnos',
        type: 'POST',
        data: {res: res},
        dataType: 'JSON',
        success: function (data) {
            if (data != null) {
                $('#' + codigo_modular).val(data[0]['cant_estudiantes']);
            } else {
                $('#' + codigo_modular).prop('disabled', false);
            }
        }
    });
});

HMTL+PHP

<?php foreach ($niveles as $obj) { ?>
   td>
       <div class="form-group">
       <div class="col-md-12">
       <input class="form-control letras" type="text" id="3_<?php echo str_replace(' ', '_', $obj->nivel) . '_' . $obj->codigoModular; ?>"  name="3_<?php echo str_replace(' ', '_', $obj->nivel) . '_' . $obj->codigoModular; ?>">
       </div>
       </div>
       </td><?php } ?>

introducir la descripción de la imagen aquí

Como ven en .each mando un post, por ejemplo si hay turnos mando 2 veces, traigo los dos pero cuando lo seteo en mi html con el val sólo seteo el último como está en la imagen.

6
  • Se podrá agregar un ejemplo de cómo quedaría tu elemento .letras ya con elementos agregados?
    – Yikarus
    Commented el 8 may. 2017 a las 18:29
  • @Lixus es la imagen la parte donde dice "Número de estudiantes del turno según SIAGIE" le pongo como clase letras para que se diferencie de mi numeric en jquery Commented el 8 may. 2017 a las 18:32
  • A primera vista parece que estás haciendo un mal uso de una variable global. Por desgracia estás cambiando el valor de codigo_modular en un bucle .each y, como javascript no es multihilo, todas las iteraciones se ejecutarán una tras otra sin tramitar las peticiones $.ajax, por lo que cuando vuelve de las llamadas de cada una la variable codigo_modular contiene el último valor asignado. Commented el 8 may. 2017 a las 18:33
  • @OscarGarcia Gracias era eso (Y) igual gracias a todos Commented el 8 may. 2017 a las 18:36
  • PD: ¿Por qué has cambiado la respuesta correcta a la otra que fue respondida más tarde y, además, es menos eficiente por hacer las peticiones de manera síncrona congelando el navegador hasta que se ejecutan todas las peticiones? Debido a ese problema, a partir de jQuery 1.8 lanza una advertencia de opción obsoleta y será eliminado el soporte en un futuro. Commented el 8 may. 2017 a las 19:04

2 respuestas 2

0

Prueba con esto:

$(".letras").each(function () {
    codigo_modular = this.id;
    var res = codigo_modular.substr(-7);
    (function (codigo_modular) {
        $.ajax({
            url: baseurl + 'asistencia/traer_alumnos',
            type: 'POST',
            data: {res: res},
            dataType: 'JSON',
            async: false, 
            success: function (data) {
                if (data != null) {
                    $('#' + codigo_modular).val(data[0]['cant_estudiantes']);
                } else {
                    $('#' + codigo_modular).prop('disabled', false);
                }
            }
        });
    }(codigo_modular));
});

Entendiendo que las variables se están superponiendo, simplemente esperaremos la respuesta antes de continuar (Proceso Sincrono). Lo que debería detenerse el javascript hasta que termine, y por tanto en el success ahora podrá darte el valor a tu primer input.

Espero que te sea de ayuda!

NOTA:

Si estas en el mismo PHP es mejor que desde allí hagas la consulta de alumnos y que dibujes el html ya con la información, evitando que tengas que hacer otra petición a través de jquery hacia el servidor.

Saber ocupar tus recursos, es algo que te ayuda desde temprano a tener una mejor experiencia de usuario.

Conteste en base a la pregunta puntual, pero en cuanto a tu lógica de negocio, es mejor que traigas ya estos datos desde php.

1
  • Deberías cambiar la opción async, a partir de jQuery 1.8 lanza una advertencia de opción obsoleta al usar async: false y será eliminado el soporte en un futuro. El problema es que el navegador queda "congelado" durante la ejecución de la petición y no responderá a ningún otro evento javascript hasta terminar la petición, cosa que es especialmente perjudicial para la experiencia del usuario si la latencia o el tiempo de respuesta del servidor es lenta. Commented el 8 may. 2017 a las 19:07
0

Estás haciendo un mal uso de una variable y su ámbito (global o local). Por desgracia estás cambiando el valor de codigo_modular en un bucle .each y, como javascript no es multihilo, todas las iteraciones se ejecutarán una tras otra sin tramitar las peticiones $.ajax, por lo que cuando vuelve de las llamadas de cada una, la variable codigo_modular contendrá el último valor asignado.

En JavaScript, a diferencia de otros lenguajes como Java, C, Perl, PHP, etc, el ámbito de una variable está definido por su encierro en una función (closure).

Si usamos IIFE (Immediately Invoked Function Expressions) con un parámetro, la ejecución se realizará con el parámetro codigo_modular local, con un ámbito diferente, para cada ejecución, por lo que no se verá afectado por los consiguientes cambios del valor local de la función padre.

Prueba con esta forma de hacerlo:

/* Podría tener ámbito global */
var codigo_modular;
$(".letras").each(function () {
    /* O local */
    var codigo_modular;
    codigo_modular = this.id;
    var res = codigo_modular.substr(-7);
    (function (codigo_modular) {
        /* Pero al llegar aquí codigo_modular ya no es el mismo que ninguno de los anteriores */
        $.ajax({
            url: baseurl + 'asistencia/traer_alumnos',
            type: 'POST',
            data: {res: res},
            dataType: 'JSON',
            success: function (data) {
                if (data != null) {
                    $('#' + codigo_modular).val(data[0]['cant_estudiantes']);
                } else {
                    $('#' + codigo_modular).prop('disabled', false);
                }
            }
        });
    }(codigo_modular));
});

Una forma más limpia podría ser:

$(".letras").each(function () {
    (function (elemento) {
        $.ajax({
            url: baseurl + 'asistencia/traer_alumnos',
            type: 'POST',
            data: {
                res: elemento.id.substr(-7)
            },
            dataType: 'JSON',
            success: function (data) {
                if (data != null) {
                    elemento.val(data[0]['cant_estudiantes']);
                } else {
                    elemento.prop('disabled', false);
                }
            }
        });
    }(this));
});

Aprovechamos que en cada iteración de each() la variable this apunta a la clase jQuery que está siendo analizada, por lo que si lo pasamos como parámetro elemento la IIFE podremos usarla directamente sin necesitar reacceder a ella mediante $('#' + ...).


Evitando la (sobre)carga de peticiones

Si la variable $niveles contiene la información necesaria para rellenar la información del formulario, o puede ser obtenida mejorando la consulta SQL, se podría generar el documento HTML desde PHP con los datos rellenos, sin tener que solicitarlos mediante XHR, reduciendo la latencia en la generación de la página y mejorando la experiencia del usuario:

<?php
foreach ($niveles as $obj) {
  $id = htmlspecialchars(
    '3_' .
    str_replace(' ', '_', $obj->nivel) .
    '_' .
    $obj->codigoModular
  );
?>
  <td>
    <div class="form-group">
      <div class="col-md-12">
        <input class="form-control letras"
          type="text" id="<?= $id ?>" name="<?= $id ?>"
          value="<?= htmlspecialchars($obj->valor) ?>"
        />
      </div>
    </div>
  </td>
<?php
}
?>

Presuponiendo que $obj->valor contiene dicho valor.

3

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.