1

Tengo una table donde se me muestran la informacion que mando llamar desde mi BD mediante un campo llamado DN, el detalle es que necesito validar que al momento de llamar dos veces o mas el mismo DN no me aparesca en mi tabla de informacion si no una sola vez.

listado.html

<section>
    <form id="codigobarras">
      <input type="text" name="codigo" value=""  placeholder="Escanear Codigo de Barras del DN" class="codigo"/>
      <button type="button" name="button" class="boton" id="boton">Descargar  <i class="fas fa-cloud-download-alt"></i></button>
   </form>    
</section>

<section class="tsect">
    <table class="grilla" id="tabla">
        <thead>
            <tr>
             <th>Id</th>
             <th>NetApp Po</th>
             <th>Customer Np</th>
             <th>Qty</th>
             <th>Rev</th>
             <th>Boxes by Po</th>
             <th>Dn</th>
             <th>Create Date asn</th>
             <th>Shipping Address</th>
             <th>Description</th>
             <th>So Number</th>
            </tr>
                </thead>
                <tbody id="registros">

                </tbody>
            </table>

                <script type="text/javascript">

        /* Tras cargar el documento posicionamos el cursor en el lector de código de barras */
document.addEventListener('DOMContentLoaded', function() {
    let codigobarras = document.getElementById('codigobarras');
    /* Ponemos el foco en el campo "codigo" */
    codigobarras.codigo.focus();
    /* Capturamos el evento de envío de formulario (pulsar ENTER o pulsar Enviar) */
    codigobarras.addEventListener("submit", function(e) {
        /* Evitamos el envío real del formulario */
        e.preventDefault();
        /*agregamos el if para condicionar la validacion*/
        if("input[name='codigo']"=="input[name='codigo']"){
             alert "No se puede agregar codigos repetidos"; 
             return 
         }if("input[name='codigo']"!="input[name='codigo']"){ 
             alert "aqui no se como plasmar para que se agrege"; 
         }
        /* Hacemos la llamada al API (busqueda.php o el API de ejemplo) */
        $.ajax({
            url: 'busqueda.php',
            method: 'post',
            data: {
                codigo: codigobarras.codigo.value,
            },
        })
        .done(function(datos) {
            /* Depuramos los datos recibidos */
            console.log( datos );
            /* Si no se devolvió ningún registro (false) debería hacerse algo */
            if (datos === false) {
                /* hacer algo */
                alert('No se encontró el código de barras');
                return;
            }
            /* Agregamos una fila con los datos obtenidos */
            $('#registros').append($('<tr>')
                    .append($('<td>').append( datos.id ))
                    .append($('<td>').append( datos.net_app_po ))
                    .append($('<td>').append( datos.customer_np ))
                    .append($('<td>').append( datos.qty ))
                    .append($('<td>').append( datos.rev ))
                    .append($('<td>').append( datos.boxes_by_po ))
                    .append($('<td>').append( datos.dn ))
                    .append($('<td>').append( datos.create_date_asn ))
                    .append($('<td>').append( datos.shipping_address ))
                    .append($('<td>').append( datos.description ))
                    .append($('<td>').append( datos.so_number ))
            );
        })
        .fail(function() {
                alert( "Error" );
        })
        .always(function() {
            /* Seleccionamos el texto para que se pueda sobreescribir por la siguiente lectura */
            $("input[name='codigo']").select();
        });
    });
}, false);

        </script>
        </section>

busqueda.php

<?php
$servidor = 'localhost';
$base_datos = 'net';
$usuario = 'root';
$clave = '';
/* Dos métodos de poner el juego de caracteres en utf-8 */
$conexion = new PDO(
  "mysql:host=${servidor};dbname=${base_datos};charset=utf8",
  $usuario,
  $clave,
  [
    PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'UTF8'"
  ]
);

/* Preparamos la consulta SQL */
$res = $conexion->prepare('SELECT * FROM caratulasalida WHERE dn = :codigo');
/* Asignamos el parámetro al valor enviado por POST */
$res->bindValue(':codigo', $_POST['codigo'], PDO::PARAM_STR);
/* Ejecutamos la consulta */
$res->execute();
/* Devolvemos el registro obtenido como respuesta en JSON */
header("Content-type: application/json; charset=utf-8");
echo json_encode($res->fetch(PDO::FETCH_ASSOC));



?>
5
  • 1
    puedes colocar los datos que tiene la pagina busqueda.php
    – PieroDev
    Commented el 25 may. 2018 a las 17:41
  • @Pierro listo ya esta tambien el otro archivo que me pedias.
    – francisco
    Commented el 25 may. 2018 a las 18:09
  • un favor realiza la prueba primer en mysql , porque lo que veo es un select * from o capas el :codigo se pierde
    – PieroDev
    Commented el 25 may. 2018 a las 22:43
  • @OscarGarcia aqui tienes lo que te comentaba
    – francisco
    Commented el 26 may. 2018 a las 16:01
  • la consulta funciona muy bien en el sql manda llamar la informacion que corresponde y la muestra en pantalla pero el detalle es validar que cuando se haga la consulta dos veces del mismo dn no me los agrege a la lista @Pierro
    – francisco
    Commented el 28 may. 2018 a las 17:07

1 respuesta 1

1

Te recomiendo llevar un registro de los código de barras agregados a la tabla:

/* Listado de códigos de barras agregados a la tabla */
let listado = {};

Antes de enviar la consulta XHR comprobamos si existe el código de barras en la tabla mediante hasOwnProperty() y en caso de no existir marcamos el código de barras como pendiente de ser consultado, para evitar dobles envíos, con un false:

    /* Comprobar la existencia del código de barras ANTES de enviar la petición XHR */
    if (listado.hasOwnProperty(codigobarras.codigo.value)) {
        /* Hacer lo necesario para mostrar que el código de barras está repetido */
        alert('Este código de barras ya está incluido en la tabla');
        return;
    } else {
        /* Si el código de barras está marcado como siendo consultado, evitamos consultarlo de nuevo */
        if (listado[codigobarras.codigo.value] === false) {
            /* Se podría implementar una caducidad o algo así por si falla el done/fail */
            alert('Una petición anterior para este código de barras está esperando a ser respondida');
        } else {
            /* Marcamos el código de barras como pendiente de ser consultado para evitar doble envío */
            listado[codigobarras.codigo.value] = false;
        }
    }

Cuando se obtenga un código de barras podemos marcarlo simplemente con un true o bien almacenar en él los datos del producto y borrar el elemento en caso de fallo (no existir en la base de datos y, por lo tanto, no poder ser agregado):

/* Si no se devolvió ningún registro (false) debería hacerse algo */
if (datos === false) {
    /* Eliminamos la marca de estar siendo consultado el código de barras */
    delete listado[datos.dn];
    /* hacer algo */
    alert('No se encontró el código de barras');
    return;
}
/* Agregamos los datos al listado de códigos de barras obtenidos */
listado[datos.dn] = datos;

En caso de error (error HTTP, página no encontrada o error en el código PHP) también podemos eliminar la marca de consulta con delete.

Tu código javascript se quedaría:

/* Tras cargar el documento posicionamos el cursor en el lector de código de barras */
document.addEventListener('DOMContentLoaded', function() {
    let codigobarras = document.getElementById('codigobarras');
    /* Listado de códigos de barras agregados a la tabla */
    let listado = {};
    /* Ponemos el foco en el campo "codigo" */
    codigobarras.codigo.focus();
    /* Capturamos el evento de envío de formulario (pulsar ENTER o pulsar Enviar) */
    codigobarras.addEventListener("submit", function(e) {
        /* Evitamos el envío real del formulario */
        e.preventDefault();
        /* Comprobar la existencia del código de barras ANTES de enviar la petición XHR */
        if (listado.hasOwnProperty(codigobarras.codigo.value)) {
            /* Hacer lo necesario para mostrar que el código de barras está repetido */
            alert('Este código de barras ya está incluido en la tabla');
            return;
        } else {
            /* Si el código de barras está marcado como siendo consultado, evitamos consultarlo de nuevo */
            if (listado[codigobarras.codigo.value] === false) {
                /* Se podría implementar una caducidad o algo así por si falla el done/fail */
                alert('Una petición anterior para este código de barras está esperando a ser respondida');
            } else {
                /* Marcamos el código de barras como pendiente de ser consultado para evitar doble envío */
                listado[codigobarras.codigo.value] = false;
            }
        }
        /* Hacemos la llamada al API (busqueda.php o el API de ejemplo) */
        $.ajax({
            url: 'busqueda.php',
            method: 'post',
            data: {
                codigo: codigobarras.codigo.value,
            },
            /* Almacenamos el código de barras en "this.codigo" */
            codigo: codigobarras.codigo.value,
            /* Forzamos error cualquier respuesta que no sea json */
            dataType: "json",
        })
        .done(function(datos) {
            /* Depuramos los datos recibidos */
            console.log( datos );
            /* Si no se devolvió ningún registro (false) debería hacerse algo */
            if (datos === false) {
                /* Eliminamos la marca de estar siendo consultado el código de barras */
                delete listado[datos.dn];
                /* hacer algo */
                alert('No se encontró el código de barras');
                return;
            }
            /* Agregamos los datos al listado de códigos de barras obtenidos */
            listado[datos.dn] = datos;
            /* Agregamos una fila con los datos obtenidos */
            $('#registros').append($('<tr>')
                .append($('<td>').append( datos.id ))
                .append($('<td>').append( datos.net_app_po ))
                .append($('<td>').append( datos.customer_np ))
                .append($('<td>').append( datos.qty ))
                .append($('<td>').append( datos.rev ))
                .append($('<td>').append( datos.boxes_by_po ))
                .append($('<td>').append( datos.dn ))
                .append($('<td>').append( datos.create_date_asn ))
                .append($('<td>').append( datos.shipping_address ))
                .append($('<td>').append( datos.description ))
                .append($('<td>').append( datos.so_number ))
            );
        })
        .fail(function() {
            /* Borramos la marca de estar consultando los datos */
            delete listado[this.codigo];
            alert( "Error" );
        })
        .always(function() {
            /* Seleccionamos el texto para que se pueda sobreescribir por la siguiente lectura */
            $("input[name='codigo']").select();
        });
    });
}, false);
1
  • 1
    gracias, gracias muchisisimas gracias funciono genial @OscarGarcia neta que javascriot y tu son la meritita onda encerio muchas gracias
    – francisco
    Commented el 29 may. 2018 a las 15:58

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.