0

Estoy intentando lo siguiente:

Tengo los siguientes input con el siguiente código HTML:

<div class="ing_guiGrid col6">
                    <p>
                        <label for="id_observa">Observaciones:</label>
                        <textarea name="observa" cols="40" rows="10" maxlength="500" required="required" id="id_observa"></textarea>
                    </p>
                    <p>
                        <label for="id_tipo_envio">Envio:</label>
                        <input type="number" name="tipo_envio" required="required" id="id_tipo_envio" class="tipo_envio">
                    </p>
                    <p>
                        <label for="id_descripcion">Descripcion:</label>
                        <input type="text" name="descripcion" maxlength="150" required="required" id="id_descripcion" class="descripcion">
                    </p>
                    <p>
                        <label for="id_cantidad">Cantidad:</label>
                        <input type="number" name="cantidad" min="0" value="0" required="required" id="id_cantidad" class="cantidad">
                    </p>
                    <p>
                        <label for="id_peso">Peso:</label>
                        <input type="number" name="peso" min="0" value="0" step="any" required="required" id="id_peso" class="peso">
                    </p>
                    <p>
                        <label for="id_precio">Tarifa:</label>
                        <input type="number" name="precio" min="0" value="0" step="any" required="required" id="id_precio" class="precio">
                    </p>
</div>
<div id="newRow"></div>
<div>
      <button id="addRow" type="button" class="btn btn-info"><i class="fas fa-plus"></i></button>
</div>

CSS:

textarea#id_observaciones {
    resize: none;
    height: 39px;
}
.ing_guiGrid{
    display: grid;
    gap: 20px;
}
.ing_guiGrid.col6{
    grid-template-columns: 1fr 0.5fr 2.5fr 1fr 1fr 1fr;
    gap: 0;
}
.ing_guiGrid.col6 input,
.ing_guiGrid.col6 textarea{
    width: 100%;
}
.ing_guiGrid.col6 p:nth-child(1){
    margin-right: 20px;
}
.ing_guiGrid input{
    width: 100%;
}

el cual se ve así:

introducir la descripción de la imagen aquí

Y tengo su funcionalidad, que es, cuando se escribe un número en el input .tipo_envio por medio de Ajax se llama a la descripción en su respectivo input, el Ajax es el siguiente:

function buscarProducto(){
    var codigo = $(".tipo_envio").val();
    if(codigo===""){
        return false;
    }

    var path = "{% url 'api:producto_list' %}" + codigo;
    $.ajax({
        type:"GET",
        url: path,
        success: function(r){
            console.log(r);
            console.log(r.estado);

            if(!r.estado){
                mensaje("Producto No Tiene Existencia o está inactivo",'orange')
                $(".tipo_envio").val("");
                $(".descripcion").val("");
                $(".precio").val("0.00");
                $(".tipo_envio").focus();
                return false;
            }

            $(".tipo_envio").val(r.id);
            $(".descripcion").val(r.descripcion);
            $(".precio").val(r.precio);
            $(".tipo_envio").focus();

        },
        error: function(a,b,c){
            console.log(a);
            if(a.status==404){
                mensaje("Producto -" + codigo + "- No Encontrado o No Existe",'red');
                $(".tipo_envio").val("");
                $(".descripcion").val("");
                $(".precio").val("0.00");
                $(".tipo_envio").focus();
            }

        }

    });
}

llamo a esta función con un change en Jquery:

$(".tipo_envio").change(function(){
        buscarProducto();
});

Y todo resulta bien, el problema es cuando intento usar la misma función con otros input, tengo un botón que agrega los elementos por medio de JavaScript:

 $("#addRow").click(function () {
    var html = '';
    html += '<div class="ing_guiGrid col6">';
    html += '<p><button id="removeRow" type="button" class="btn btn-danger"><i class="fas fa-times-circle"></i></button></p>';
    html += '<p><input type="number" name="tipo_envio" required="required" id="id_tipo_envio" class="tipo_envio"></p>';
    html += '<p><input type="text" name="descripcion" maxlength="150" required="required" id="id_descripcion" class="descripcion"></p>';
    html += '<p><input type="number" name="cantidad" min="0" value="0" required="required" id="id_cantidad" class="cantidad"></p>';
    html += '<p><input type="number" name="peso" min="0" value="0" step="any" required="required" id="id_peso" class="peso"></p>';
    html += '<p><input type="number" name="precio" min="0" value="0" step="any" required="required" id="id_precio" class="precio"></p>';
    html += '</div>';

    $('#newRow').append(html);
});

// remove row
$(document).on('click', '#removeRow', function () {
    $(this).closest('.ing_guiGrid').remove();
});

Y quiero que los .tipo_envio que se van agregando tengan la misma funcionalidad que el original, o sea el input que se ve al iniciar la página, no puedo crearle una función a cada uno ya que el usuario puede agregar hasta 100 nuevos input.

Lo que intenté fue meterlo dentro de un forEach a modo de que cada .tipo_envio pudiera llamar a la función cuando se cambia el número del campo. El código es el siguiente:

$('#addRow').click(function(){
    var a = document.querySelectorAll(".tipo_envio")
    a.forEach(function(e){
        e.addEventListener('change', function(){
            buscarProducto()
        })
    })
});

Esto sí que llamó a buscarProducto() y tuvo la misma funcionalidad, sin embargo, lo que pasa es que no me permite cambiar de número, por más que intente hacer que me deje cambiar el número en el campo .tipo_envio que se acaba de crear para cambiar la descripción, no puedo. Y me muestra la misma descripción del primer .tipo_envio de esta manera:

introducir la descripción de la imagen aquí

Estos datos van dentro de un formulario, por ende los envió a una base de datos donde se guardan todos los datos que el usuario ingrese. Espero puedan ayudarme, Gracias de antemano!.

EDIT:

Ahora tengo los siguientes problemas:

Al cambiar el número en el .tipo_envio principal no me llama la función y no cambia la descripción: introducir la descripción de la imagen aquí

Hasta que pongo agrego un nuevo .tipo_envio y lo pongo en valor "0" cambia tanto el nuevo como el anterior .tipo_envio:

introducir la descripción de la imagen aquí

Y pasa algo similar con los demás que se van agregando: introducir la descripción de la imagen aquí

Solo que en estos si pongo el número repetido no me da la descripción, por ejemplo si pongo en un .tipo_envio el mismo número que introduje en el anterior, no me llama la descripción correspondiente hasta que pongo un número mayor y no quiero eso por que el usuario puede agregar las veces que le sea necesario el mismo tipo de envio.

11
  • Por favor edita la pregunta para agregar el HTML de esa tabla. Me parece que estás repitiendo ID en cada fila y los ID deben ser únicos. Seguramente solo necesitas cambiar ID por clase y hacer algunos pequeños ajustes en la función. Revisa esta respuesta podría servirte de guía.
    – Triby
    Commented el 18 feb. 2022 a las 17:37
  • Está bien agregare mi HTML Commented el 18 feb. 2022 a las 17:43
  • Justo lo que me temía, estás repitiendo ID. Si bien, document.querySelectorAll('#id-repetido'); te devuelve todos los elementos encontrados, al querer modificar el valor con $('#id-repetido').val() se aplica solo al primero que encuentra. La respuesta que te sugerí en el primer comentario te va a servir. Intenta adaptar el concepto en tu proyecto y, si no puedes, edita nuevamente la pregunta para poner lo que intentaste y poderte ayudar con algo más concreto.
    – Triby
    Commented el 18 feb. 2022 a las 18:05
  • Te refieres a cambiar el ID por un CLASS, no? lo intentaré y modificaré la pregunta Commented el 18 feb. 2022 a las 18:07
  • Sí, señor; es correcto.
    – Triby
    Commented el 18 feb. 2022 a las 18:14

1 respuesta 1

1

Tienes el problema típico de la repetición de id y ahora también de la aplicación de la asignación de los mismos valores a una clase repetida.

Me has confirmado en los comentarios que este código te funciona y más abajo he puesto una explicación de los cambios del mismo:

$(".tipo_envio").change(function(){
        buscarProducto(this.id);
});

function buscarProducto(long_id){
    var id = long_id.split("_").slice(-1);
    var codigo = $("#id_tipo_envio_" + id).val();
    if(codigo===""){
        return false;
    }

    var path = "{% url 'api:producto_list' %}" + codigo;
    $.ajax({
        type:"GET",
        url: path,
        success: function(r){
            console.log(r);
            console.log(r.estado);

            if(!r.estado){
                mensaje("Producto No Tiene Existencia o está inactivo",'orange')
                $("#id_tipo_envio_" + id).val("");
                $("#id_descripcion_" + id).val("");
                $("#id_precio_" + id).val("0.00");
                $("#id_tipo_envio_" + id).focus();
                return false;
            }

            $("#id_tipo_envio_" + id).val(r.id);
            $("#id_descripcion_" + id).val(r.descripcion);
            $("#id_precio_" + id).val(r.precio);
            $("#id_tipo_envio_" + id).focus();

        },
        error: function(a,b,c){
            console.log(a);
            if(a.status==404){
                mensaje("Producto -" + codigo + "- No Encontrado o No Existe",'red');
                $("#id_tipo_envio_" + id).val("");
                $("#id_descripcion_" + id).val("");
                $("#id_precio_" + id).val("0.00");
                $("#id_tipo_envio_" + id).focus();
            }

        }

    });
}
var contador = 0
 $("#addRow").click(function () {
    contador++
    var html = '';
    html += `<div class="ing_guiGrid col6">
    <p><button id="removeRow" type="button" class="btn btn-danger"><i class="fas fa-times-circle">eliminar</i></button></p>
    <p><input type="number" name="tipo_envio[]" required="required" id="id_tipo_envio_` + contador + `" class="tipo_envio"></p>
    <p><input type="text" name="descripcion[]" maxlength="150" required="required" id="id_descripcion_` + contador + `" class="descripcion"></p>
    <p><input type="number" name="cantidad[]" min="0" value="0" required="required" id="id_cantidad_` + contador + `" class="cantidad"></p>
    <p><input type="number" name="peso[]" min="0" value="0" step="any" required="required" id="id_peso_` + contador + `" class="peso"></p>
    <p><input type="number" name="precio[]" min="0" value="0" step="any" required="required" id="id_precio_` + contador + `" class="precio"></p>
    </div>`;
    $('#newRow').append(html);

    var a = document.querySelectorAll(".tipo_envio")
    a.forEach(function(e){
        e.addEventListener('change', function(){
            buscarProducto(e.id)
        })
    })
});

// remove row
$(document).on('click', '#removeRow', function () {
    $(this).closest('.ing_guiGrid').remove();
    // contador--
});
textarea#id_observaciones {
    resize: none;
    height: 39px;
}
.ing_guiGrid{
    display: grid;
    gap: 20px;
}
.ing_guiGrid.col6{
    grid-template-columns: 1fr 0.5fr 2.5fr 1fr 1fr 1fr;
    gap: 0;
}
.ing_guiGrid.col6 input,
.ing_guiGrid.col6 textarea{
    width: 100%;
}
.ing_guiGrid.col6 p:nth-child(1){
    margin-right: 20px;
}
.ing_guiGrid input{
    width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ing_guiGrid col6">
  <p>
    <label for="id_observa">Observaciones:</label>
    <textarea name="observa[]" cols="40" rows="10" maxlength="500" required="required" id="id_observa_0"></textarea>
  </p>
  <p>
    <label for="id_tipo_envio">Envio:</label>
    <input type="number" name="tipo_envio[]" required="required" id="id_tipo_envio_0" class="tipo_envio">
  </p>
  <p>
    <label for="id_descripcion">Descripcion:</label>
    <input type="text" name="descripcion[]" maxlength="150" required="required" id="id_descripcion_0" class="descripcion">
  </p>
  <p>
    <label for="id_cantidad">Cantidad:</label>
    <input type="number" name="cantidad[]" min="0" value="0" required="required" id="id_cantidad_0" class="cantidad">
  </p>
  <p>
    <label for="id_peso">Peso:</label>
    <input type="number" name="peso[]" min="0" value="0" step="any" required="required" id="id_peso_0" class="peso">
  </p>
  <p>
    <label for="id_precio">Tarifa:</label>
    <input type="number" name="precio[]" min="0" value="0" step="any" required="required" id="id_precio_0" class="precio">
  </p>
</div>
<div id="newRow"></div>
<div>
  <button id="addRow" type="button" class="btn btn-info"><i class="fas fa-plus">agregar</i></button>
</div>

Explicación de los cambios

Bueno, como tenias mucho código y los cambios consisten en conseguir no repetir id y también en usar correctamente las clases, me saltaré las repeticiones de los cambios mostrando únicamente uno de cada caso. Empecemos:

  1. Tenias dos eventos click a la escucha para el mismo elemento. He unificado su contenido agregando uno al final del otro:
$('#addRow').click(function(){
  1. En la escucha del siguiente evento, realizamos el siguiente cambio de esto:
        e.addEventListener('change', function(){
            buscarProducto()
        })

por esto:

        e.addEventListener('change', function(){
            buscarProducto(e.id)
        })

porque como decia al principio, y repetiré en varias ocasiones, ahora nos interesa que todo se relacione con el id de cada elemento, y la forma en que llamamos a la función buscarProducto() también. Por lo tanto le pasamos el valor del id como parámetro.

  1. Por idéntico motivo modificamos esto:
$(".tipo_envio").change(function(){
        buscarProducto();
});

por esto:

$(".tipo_envio").change(function(){
        buscarProducto(this.id);
});
  1. En la función buscarProducto empezamos los cambios modificando esto primero:
function buscarProducto(){

por esto:

function buscarProducto(long_id){
    var id = long_id.split("_").slice(-1);

De esta forma primero definimos que la función necesita un parámetro, que aquí llamamos long_id, y que cuadra con los cambios anteriores donde hemos forzado enviar el parámetro id en los dos casos que se llama a dicha función.

Para el cambio de la segunda línea se necesita una explicación previa. A saber. Como vamos a relacionarlo todo mediante su id éste no puede estar repetido, así que más adelante vamos a cambiar los id que necesitemos agregándoles una coletilla con un número, de este modo: id_tipo_envio pasará a ser id_tipo_envio_X donde X representa un número cualquiera.

Por lo tanto, cuando recibimos un id como parámetro de la función, lo recibimos completo, es decir, así: id_tipo_envio_X, pero no nos sirve para identificar a todos los otros ids relacionados con este registro, los cuales tendran la misma X y se llamarán id_descripcion_X, id_precio_X, etc.

  1. Cómo hemos llamado al parámetro long_id ahora nos interesa sacarle la X solamente y asignarla a la variable interna id de la función, que usaremos más adelante de nuevo. Para ello lo hacemos de este modo:
    var id = long_id.split("_").slice(-1);

que nos parte la variable long_id en trozos separados por el guión bajo _, y eso lo hace la función split(), creando un array con todos ellos. De este array tan solo nos interes el último, es decir, la X, por lo tanto lo sacamos con la función slice() con su parámetro -1 que indica que queremos el último elemento de un array. O sea, la X, que queda asignada a la variable id.

  1. Lo siguiente que hacemos es buscar el valor del código del producto, que antes se intentaba conseguir con esto (mal):
var codigo = $(".tipo_envio").val();

pero daba un problema, que tan solo cogia el primer valor encontrado, pues es una clase que se aplica en cada fila. Para solucionarlo empezamos a usar el id conseguido en el paso previo cambiando esa línea de este modo:

var codigo = $("#id_tipo_envio_" + id).val();

y con este cambio estamos consiguiendo el valor del elemento correcto identificado uniquívocamente gracias a su id.

  1. Los siguientes cambios dentro de la función son de carrerilla, y se trata de apuntar siempre al id del elemento correctamente, por lo tanto alli donde viéramos referencias a cualquier id teniamos que agregarle la coletilla de nuevo. A groso modo se han cambiado estos:
                $(".tipo_envio").val("");
                $(".descripcion").val("");
                $(".precio").val("0.00");
                $(".tipo_envio").focus();
...
            $(".tipo_envio").val(r.id);
            $(".descripcion").val(r.descripcion);
            $(".precio").val(r.precio);
            $(".tipo_envio").focus();
...
                $(".tipo_envio").val("");
                $(".descripcion").val("");
                $(".precio").val("0.00");
                $(".tipo_envio").focus();

por estos:

                $("#id_tipo_envio_" + id).val("");
                $("#id_descripcion_" + id).val("");
                $("#id_precio_" + id).val("0.00");
                $("#id_tipo_envio_" + id).focus();
...
            $("#id_tipo_envio_" + id).val(r.id);
            $("#id_descripcion_" + id).val(r.descripcion);
            $("#id_precio_" + id).val(r.precio);
            $("#id_tipo_envio_" + id).focus();
...
                $("#id_tipo_envio_" + id).val("");
                $("#id_descripcion_" + id).val("");
                $("#id_precio_" + id).val("0.00");
                $("#id_tipo_envio_" + id).focus();

Como ves, ahora todo apunta a un id de elemento concreto e inequívoco, mientras antes lo hacia de forma repetida y solo cogia el primero que encontraba pues estaban todos duplicados.

  1. Se ha agregado una nueva variable global que nos hara de contador y que irá generando las X de las que estamos hablando todo el rato:
var contador = 0;
  1. Se ha agregado esto dentro de la escucha del evento click de #addRow para que incremente el valor de contador en cada click realizado, al principio de la llamada.
contador++
  1. Del mismo modo que en paso 7 (siempre es lo mismo ahora), dentro del evento click de #addRow he cambiado esto:
    html += '<p><input type="number" name="tipo_envio" required="required" id="id_tipo_envio" class="tipo_envio"></p>';
    html += '<p><input type="text" name="descripcion" maxlength="150" required="required" id="id_descripcion" class="descripcion"></p>';
    html += '<p><input type="number" name="cantidad" min="0" value="0" required="required" id="id_cantidad" class="cantidad"></p>';
    html += '<p><input type="number" name="peso" min="0" value="0" step="any" required="required" id="id_peso" class="peso"></p>';
    html += '<p><input type="number" name="precio" min="0" value="0" step="any" required="required" id="id_precio" class="precio"></p>';

por esto:

    <p><input type="number" name="tipo_envio[]" required="required" id="id_tipo_envio_` + contador + `" class="tipo_envio"></p>
    <p><input type="text" name="descripcion[]" maxlength="150" required="required" id="id_descripcion_` + contador + `" class="descripcion"></p>
    <p><input type="number" name="cantidad[]" min="0" value="0" required="required" id="id_cantidad_` + contador + `" class="cantidad"></p>
    <p><input type="number" name="peso[]" min="0" value="0" step="any" required="required" id="id_peso_` + contador + `" class="peso"></p>
    <p><input type="number" name="precio[]" min="0" value="0" step="any" required="required" id="id_precio_` + contador + `" class="precio"></p>

donde hay que fijarse en el cambio de los id= que todos han pasado a ser del tipo:

id_AAAAA_` + contador

para identificarlos de inequívoca durante su creación en cada click.

Con todos estos cambios hemos conseguido solucionar tu problema, tal como me has confirmado en los comentarios.

Si has leido hasta aquí dejame un comentario para saber que lo has hecho, sino la proxima vez no te lo cuento y no te ayudo :-)

10
  • Gracias por ayudarme:'D, solo que ahora tengo otros problemas con el resultado:(, usé el código tal y como me lo diste y hay como unos especies de BUGS y no quiero eso, deje ya todo redactado en la pregunta. Commented el 21 feb. 2022 a las 1:09
  • Creo que me he equivocado aqui: buscarProducto(this.value);... cambialo por buscarProducto(this.id); y dime si eso lo arregla, gracias
    – masterguru
    Commented el 21 feb. 2022 a las 6:07
  • No amigo, sigue dandome el mismo problema:( Commented el 22 feb. 2022 a las 2:45
  • 1
    Vale, ya he agregado una explicacion un poco extensa de los cambios, pero claro, es que eran muchos. Saludos!
    – masterguru
    Commented el 22 feb. 2022 a las 20:02
  • 1
    Gracias por leértelo! Serás el único, ya verás, hay mucho cacho de respuesta :-) pero bueno, mi idea era que tu aprendieras pues en nada me motiva darte el pescado y que luego no sepas pescar y pases hambre ;-) saludos!
    – masterguru
    Commented el 23 feb. 2022 a las 18:06

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.