Foros del Web » Programando para Internet » Jquery »

Crear lineas dinámicas Jquery

Estas en el tema de Crear lineas dinámicas Jquery en el foro de Jquery en Foros del Web. Buenas compañer@s, Una consulta, existe la posibilidad de crear un input y que al agregar un nombre, codigo, id, este autmaticamente me cree una linea ...
  #1 (permalink)  
Antiguo 21/04/2016, 13:15
 
Fecha de Ingreso: enero-2016
Ubicación: Heredia
Mensajes: 35
Antigüedad: 8 años, 11 meses
Puntos: 0
Exclamación Crear lineas dinámicas Jquery

Buenas compañer@s,

Una consulta, existe la posibilidad de crear un input y que al agregar un nombre, codigo, id, este autmaticamente me cree una linea con la informacion necesaria, por ejemplo:

Tabla_productos
Id Nombre Descripcion Precio
01 Pastilla Para dolores $0.50
02 Flores Decoracion $1.00
03 Laptop Computacion $900
04 Celular Apple $500

Luego quiero hacer una busqueda por ID por ejemplo:

busqueda por ID: 03

automaticamente se debe mostrar otra tabla con los campos del producto:

Tabla_busqueda:
Id Nombre Descripcion Precio
03 Laptop Computacion $900

Luego si quiero otro producto, hago la busqueda:
busqueda por ID: 01

Tabla_busqueda:

Id Nombre Descripcion Precio
03 Laptop Computacion $900
01 Pastilla Para dolores $0.50

Seria algo similar a los programas que tienen en los supermecados, donde por medio de un lector, este lee el codigo de barras y automaticamente me crea una linea del producto con su cantidad, nombre, descripcion, precio, etc.

Espero me haya dado a entender.

Muchas gracias por la ayuda que me puedan brindar.
  #2 (permalink)  
Antiguo 22/04/2016, 07:58
 
Fecha de Ingreso: agosto-2015
Ubicación: La Habana
Mensajes: 72
Antigüedad: 9 años, 4 meses
Puntos: 4
Respuesta: Crear lineas dinámicas Jquery

Lo que debes hacer es configurarle en el onchange del input una petición ajax enviandole nombre, código o id, el server procesa y te envía los datos, luego manipulas los datos y los muestras, pudiera ser dentro de un div
Cita:
$.ajax({
url:'${url_que_procesa}',
type:'GET',
data: {id:$('#id_input').val(),},
dataType:'json',
success: function(data){
if( data ) {
$('#div_datos').append('<table width="100%" border="0" cellspacing="10" cellpadding="0" align="center"></table>');
$('#div_datos').append('<tr align="left"></tr>');
$('#div_datos').append('<td align="center" width="50"><b>campo1</b></td>');
$('#div_datos').append('<td align="center" width="50"><b>campo2</b></td>');
$('#div_datos').append('<tr align="left"></tr>');
$('#div_datos').append('<td align="center" width="50"><b>'+data[0]+'</b></td>');
$('#div_datos').append('<td align="center" width="50"><b>'+data[1]+'</b></td>');
}
},
error{alert('error')}
})
recuerda ademas manipular el error que en este caso utilizo la funcion alert, ademas este codigo es para que te lleves una idea, puedes mejorarlo muchisimo mas.
  #3 (permalink)  
Antiguo 22/04/2016, 08:02
 
Fecha de Ingreso: agosto-2015
Ubicación: La Habana
Mensajes: 72
Antigüedad: 9 años, 4 meses
Puntos: 4
Respuesta: Crear lineas dinámicas Jquery

disculpa me falto parte del codigo
Cita:
$('#id_input').on('change', function(){
//------------------------------------------------
// peticion ajax (pudiera ser la funcion $.get o tambien $.ajax
//--------------------------------------------------

$.ajax({
url:'${url_que_procesa}',
type:'GET',
data: {id:$('#id_input').val(),},
dataType:'json',
success: function(data){
if( data ) {
$('#div_datos').append('<table width="100%" border="0" cellspacing="10" cellpadding="0" align="center"></table>');
$('#div_datos').append('<tr align="left"></tr>');
$('#div_datos').append('<td align="center" width="50"><b>campo1</b></td>');
$('#div_datos').append('<td align="center" width="50"><b>campo2</b></td>');
$('#div_datos').append('<tr align="left"></tr>');
$('#div_datos').append('<td align="center" width="50"><b>'+data[0]+'</b></td>');
$('#div_datos').append('<td align="center" width="50"><b>'+data[1]+'</b></td>');
}
},
error{alert('error')}
})
  #4 (permalink)  
Antiguo 23/04/2016, 14:37
 
Fecha de Ingreso: enero-2016
Ubicación: Heredia
Mensajes: 35
Antigüedad: 8 años, 11 meses
Puntos: 0
Exclamación Respuesta: Crear lineas dinámicas Jquery

Buenas amigo,

muchas gracias por la ayuda y su pronta respuesta, una consulta (de ajax no conozco), imagino que en esta parte:
url:'${url_que_procesa}' // ahi pongo el php que me hace la busqueda en la base de datos

luego en esta parte:
Código Javascript:
Ver original
  1. if( data ) {
  2. $('#div_datos').append('<table width="100%" border="0" cellspacing="10" cellpadding="0" align="center"></table>');
  3. $('#div_datos').append('<tr align="left"></tr>');
  4. $('#div_datos').append('<td align="center" width="50"><b>campo1</b></td>');
  5. $('#div_datos').append('<td align="center" width="50"><b>campo2</b></td>');
  6. $('#div_datos').append('<tr align="left"></tr>');
  7. $('#div_datos').append('<td align="center" width="50"><b>'+data[0]+'</b></td>');
  8. $('#div_datos').append('<td align="center" width="50"><b>'+data[1]+'</b></td>');
  9. }
en esta tabla como se ingresan los datos que se extrayeron de la URL? o no es necesario que se haga un llamado? la tabla es dinamica, me refiero que si se ingresa un segundo producto, el primer producto se mantendria tambien?
Disculpa mi ignorancia, pero como mencione no conozco de ajax, y es para poder entenderlo un poco, porque debo entregar el proyecto pronto y no tengo mucho tiempo para llevar un curso intensivo de ajax.
Muchas gracias
  #5 (permalink)  
Antiguo 26/04/2016, 08:26
 
Fecha de Ingreso: agosto-2015
Ubicación: La Habana
Mensajes: 72
Antigüedad: 9 años, 4 meses
Puntos: 4
Respuesta: Crear lineas dinámicas Jquery

Primero decirte que $.ajax({... es una función de jquery para facilitar las peticiones ajax.
http://api.jquery.com/jquery.ajax/
Cita:
url:'${url_que_procesa}',
url es un parámetro dentro de la función $.ajax que especifica la url que procesa la petición, en mi caso ahora estoy programando con Java por eso esta expresión ${url_que_procesa}, en url_que_procesa pongo la url, pero el parametro es url:' ' (dentro de las comillas va la url).

Despues si la peticion se ejecuta correctamente, en el succes programas el comportamiento que desees. La variable data representa los datos recibidos de la petición y en este sencillo ejemplo estoy recibiendo un array con 2 elementos ( data[0], data[1]) y los muestro en la tabla (pudieras recibir un objeto, o una variable o cualquier otra cosa). En tu caso pudieras enviarle desde el servidor un array con los tres elementos que necesitas. La tabla se la estoy agregando al div_datos que debes tener en el html, yo generalmente antes de hacer la peticion $.ajax vacio el div
Cita:
$('#div_datos').empty();
y luego le agrego un .gif (el clasico recorrido en circulo ) que indica que esoy esperando, luego cuando llega la peticion vuelvo a vaciar el div y le agrego la tabla
Cita:
success: function(data){
$('#div_datos').empty();
en caso de error muestro un mensaje de error. Hechale un vistazo al link para te situes bien.
  #6 (permalink)  
Antiguo 26/04/2016, 10:17
 
Fecha de Ingreso: enero-2016
Ubicación: Heredia
Mensajes: 35
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Crear lineas dinámicas Jquery

Esta genial, muchas gracias, ya vi el link y ahora si creo que puedo hacerlo, muchas gracias de nuevo!
  #7 (permalink)  
Antiguo 27/04/2016, 06:42
 
Fecha de Ingreso: agosto-2015
Ubicación: La Habana
Mensajes: 72
Antigüedad: 9 años, 4 meses
Puntos: 4
Respuesta: Crear lineas dinámicas Jquery

solo decierte que generalmente utilizo Json para enviar datos desde el servidor a una peticion asincrona ( pudiera ser tambien XML), si mal no recuerdo para eso php tiene una funcion a la cual debes hacerle un echo
Cita:
$prueba = "prueba";
echo json_encode($prueba);
  #8 (permalink)  
Antiguo 27/04/2016, 18:41
 
Fecha de Ingreso: enero-2016
Ubicación: Heredia
Mensajes: 35
Antigüedad: 8 años, 11 meses
Puntos: 0
Exclamación Respuesta: Crear lineas dinámicas Jquery

Buenas, muchas gracias, te comento lo que he podido hacer, para ver si me puedes dar la mano en esta parte que estoy super perdido, con respecto a la parte de la base de datos:
Tengo el index.html
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.  
  3. <html lang="es">
  4.  
  5.     <head>
  6.         <title>Factura Ventas</title>
  7.         <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  8.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  9.         <script type="text/javascript" src="js/bootstrap.js"></script>
  10.         <script type="text/javascript" src="js/bootstrap.min.js"></script>
  11.         <script type="text/javascript" src="js/jquery.js"></script>
  12.         <script type="text/javascript" src="js/llenado_de_campos.js"></script>
  13.     </head>
  14.    
  15.     <body>
  16.         <div class="box box-primary">
  17.             <div class="box-header">
  18.                 <h3 class="box-tittle">Factura de Venta</h3>
  19.             </div>
  20.             <div class="box-body">
  21.                     Codigo Barras
  22.                     <input type="text" name="busqueda" class="form-control" id="busqueda" value="" placeholder="" maxlength="30" autocomplete="off" onKeyUp="nuevalinea();" />
  23.             </div>
  24.             </div>
  25.             <input type="submit" class="btn btn-primary" name="save" value="Salvar Factura">
  26.         <br/>
  27.         <table class="table table-bordered table-hover">
  28.             <thead>
  29.                 <th>No</th>
  30.                 <th>Nombre del Producto</th>
  31.                 <th>Cantidad</th>
  32.                 <th>Precio</th>
  33.                 <th>Descuento</th>
  34.                 <th>Total</th>
  35.                
  36.             </thead>
  37.             <tbody class="detail">
  38.                 <tr>
  39.                     <td class="no">1</td>
  40.                     <td><input type="text" class="form-control productname" name="productname[]"></td>
  41.                     <td><input type="text" class="form-control quantity" name="quantity[]"></td>
  42.                     <td><input type="text" class="form-control price" name="price[]"></td>
  43.                     <td><input type="text" class="form-control discount" name="discount[]"></td>
  44.                     <td><input type="text" class="form-control amount" name="amount[]"></td>
  45.                     <td><a href="#" class="btn btn-danger delete">Borrar</td>
  46.                 </tr>
  47.             </tbody>
  48.             <tfoot>
  49.                 <th></th>
  50.                 <th></th>
  51.                 <th></th>
  52.                 <th></th>
  53.                 <th></th>
  54.                 <th style="text-align: center;" class="total">$<b>0</b></th>
  55.             </tfoot>
  56.         </table>
  57.     </body>
  58.    
  59. </html>

Luego tengo el JavaScript
Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.              $("#resultadoBusqueda").html('<p>No hay codigo</p>');
  3.  
  4.              
  5.               $('body').delegate('.delete','click',function(){
  6.                   $(this).parent().parent().remove();
  7.               });
  8.              
  9.               $('.detail').delegate('.quantity, .price, .discount','keyup',function(){
  10.                  var tr = $(this).parent().parent();
  11.                  var qty = tr.find('.quantity').val();
  12.                  var price = tr.find('.price').val();
  13.                  var dis = tr.find('.discount').val();        
  14.                  var amt = (qty * price)-(qty * price * dis)/100;
  15.                  tr.find('.amount').val(amt);
  16.                  total();
  17.               });
  18.            });
  19.            
  20.            function total()
  21.            {
  22.                var t = 0;
  23.                $('.amount').each(function(i,e)
  24.                {
  25.                    var amt = $(this).val()-0;
  26.                    t += amt;
  27.                });
  28.                $('.total').html(t);
  29.            }
  30.            
  31.            function nuevalinea()
  32.            {
  33.                 var textoBusqueda = $("input#busqueda").val();
  34.                 var n = ($('.detail tr').length - 0)+ 1;
  35.                 var tr = '<tr>' +
  36.                             '<td class="no">' + n + '</td>'+
  37.                             '<td><input type="text" class="form-control productname" name="productname[]"></td>'+
  38.                             '<td><input type="text" class="form-control quantity" name="calidad[]"></td>'+
  39.                             '<td><input type="text" class="form-control price" name="price[]"></td>'+
  40.                             '<td><input type="text" class="form-control discount" name="discount[]"></td>'+
  41.                             '<td><input type="text" class="form-control amount" name="amount[]"></td>'+
  42.                             '<td><a href="#" class="btn btn-danger delete">Borrar</td>'+
  43.                          '</tr>';
  44.                 $('.detail').append(tr);
  45.                 if (textoBusqueda !== "") {
  46.                    $.post("buscar.php", {valorBusqueda: textoBusqueda}, function(mensaje) {
  47.                        $("#resultadoBusqueda").html(mensaje);
  48.                     });
  49.                 } else {
  50.                    $("#resultadoBusqueda").html('<p>KMPOS</p>');
  51.                    };
  52.            }

Por ultimo tengo el buscar.php

Código PHP:
Ver original
  1. <?php
  2. //Archivo de conexión a la base de datos
  3. require'../../class/database.php';
  4. //$this->objCon = new DataBase();
  5. //Variable de búsqueda
  6. $consultaBusqueda = $_POST['valorBusqueda'];
  7.  
  8. print_r($consultaBusqueda);
  9.  
  10. //Filtro anti-XSS
  11. $caracteres_malos = array("<", ">", "\"", "'", "/", "<", ">", "'", "/");
  12. $caracteres_buenos = array("& lt;", "& gt;", "& quot;", "& #x27;", "& #x2F;", "& #060;", "& #062;", "& #039;", "& #047;");
  13. $consultaBusqueda = str_replace($caracteres_malos, $caracteres_buenos, $consultaBusqueda);
  14.  
  15. //Variable vacía (para evitar los E_NOTICE)
  16. $mensaje = "";
  17.  
  18. //Comprueba si $consultaBusqueda está seteado
  19. if (isset($consultaBusqueda)) {
  20.  
  21.     //Selecciona todo de la tabla mmv001
  22.     //donde el nombre sea igual a $consultaBusqueda,
  23.     //o el apellido sea igual a $consultaBusqueda,
  24.     //o $consultaBusqueda sea igual a nombre + (espacio) + apellido
  25.         $objData = new Database();
  26.         $sth = $objData->prepare("SELECT *, COUNT(*) FROM mmv001
  27.     WHERE nombre COLLATE UTF8_SPANISH_CI LIKE '%$consultaBusqueda%'
  28.     OR apellido COLLATE UTF8_SPANISH_CI LIKE '%$consultaBusqueda%'
  29.     OR CONCAT(nombre,' ',apellido) COLLATE UTF8_SPANISH_CI LIKE '%$consultaBusqueda%'
  30.     ");
  31.         $sth->execute();
  32.         $consulta = $sth->fetchAll();
  33.      
  34. //Obtiene la cantidad de filas que hay en la consulta
  35.         $filas = $consulta[0]['COUNT(*)'];
  36.    
  37.  
  38.     //Si no existe ninguna fila que sea igual a $consultaBusqueda, entonces mostramos el siguiente mensaje
  39.     if ($filas === 0) {
  40.         $mensaje = "<p>No hay ningún usuario con ese nombre y/o apellido</p>";
  41.     } else {
  42.         //Si existe alguna fila que sea igual a $consultaBusqueda, entonces mostramos el siguiente mensaje
  43.         echo 'Resultados para <strong>'.$consultaBusqueda.'</strong>';
  44.  
  45.         //La variable $resultado contiene el array que se genera en la consulta, así que obtenemos los datos y los mostramos en un bucle
  46.          if ($consulta){
  47.                        foreach ($consulta as $row){
  48.              
  49.             $nombre = $row['nombre'];
  50.             $apellido = $row['apellido'];
  51.             $edad = $row['edad'];?>
  52.            
  53.            <tbody class="detail">
  54.                 <tr>
  55.                     <td class="no">1</td>
  56.                    
  57.              
  58.                     <td><input type="text" class="form-control discount" name="descuento" value="<?php echo $row['nombre'] ?>"></td>
  59.                     <td><input type="text" class="form-control amount" name="total" value="<?php echo $apellido ?>"></td>
  60.                     <td><a href="#" class="btn btn-danger delete">Borrar</td>
  61.                 </tr>
  62.            </tbody>
  63.             <tfoot>
  64.                 <th></th>
  65.                 <th></th>
  66.                 <th></th>
  67.                 <th></th>
  68.                 <th></th>
  69.                 <th style="text-align: center;" class="total">$<b>0</b></th>
  70.             </tfoot>
  71.  
  72.            
  73.         <?php  
  74.                        };
  75.         };//Fin while $resultados
  76.  
  77.     }; //Fin else $filas
  78.  
  79. };//Fin isset $consultaBusqueda
  80.  
  81. //Devolvemos el mensaje que tomará jQuery
  82. echo $mensaje;

Pero no me funciona con la base de datos, de igual manera los datos no son los correctos de un producto, utilice otra base de datos menos complicada.

Lo que sucede es que no puedo hacer la conexion bien.

Gracias, saludos

Etiquetas: lineas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:30.