Agregar registros a una tabla con jquery

drieraperez · #1 (**permalink**) 18/06/2012, 04:39

Buenos días amigos,

Estoy realizando una prueba para ver si me acordaba de como se hacía esto, pero la verdad es que se me ha olvidado.

Tengo una BD con una tabla llamada "articulos", esta contiene campos de ref, nombre, "descripcion", etc.

El tema es que tengo un campo de texto que está conectado a través de JQuery a la BD sacando los artículos que hay con su referencia o su nombre, lo que quiero conseguir es que cuando me aparezca el articulo en el campo (Eso ya está lo tengo) al hacer clic en el artículo y en añadir me agregue a una tabla que está debajo, todos los registros de ese artículo, ref, nombre, precio de venta, etc.

Y así con todos, siempre que busque un artículo y le de clic (Se quedaría seleccionado en el campo de texto) y cuando le de a enviar lo añada a la tabla que hay debajo de este campo. Todo esto si puede ser para que no recargue la web cada vez que añado un artículo, eso quitaría PHP.

Guiarme amigos, porque después de acordarme de todo me atranco en esto.

Graciass!

drieraperez · #2 (**permalink**) 19/06/2012, 04:37

¿Nadie tiene idea? :(

Rosencrantz · #3 (**permalink**) 19/06/2012, 08:34

Esto podria servirte de base

Código Javascript:

Ver original$('.articulo').click(function(event){
  event.preventDefault();  // en caso de que .articulo sea un <a>
  $.ajax({
  url: 'ajax/articulo_info.html',
  data: { $(this).attr('id') }  // $(this) se refiere al <a> al cual se hizo click y posee en el atributo    id el codigo del articulo ej. <a class="articulo" id='1001'>X-Box 360</a>
  success: function(data) {
    $('#div_art_info').html(data); //  div_art_info es donde se carga la informacion de la pagina
   }
 });
})

drieraperez · #4 (**permalink**) 19/06/2012, 08:42

Te adjunto el código que tengo.

Código:

<head>
<link href="css/listado.css" rel="stylesheet" type="text/css">
<link href="css/general.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.4.custom.css" />
<!--Sistema de Factura-->
<!-- Autocompletar -->

<script src="js/jquery.js" type="text/javascript"></script>
			<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
			<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
			<script type="text/javascript">
				$(function(){
					$('#buscar_usuario').autocomplete({
					   source : 'ajax.php',
					   select : function(event, ui){
						  
							   $('#resultados').html(  
								
								''
								);
					   }
					});
				});
			</script>
			<!-- Final del Script -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Nueva Factura</title>
</head>

<body class="web">
<?php include "cabeza.php"; ?>
 <div class="menu"><?php include "menu.php"; ?></div>
 
 <div class="listado">
 <table border="0">
 <tr>
 <td width="400"><?php include "empresa.php"; ?> </td>
 </tr>
 <div id="factura">
 </table>
 <table class="altrowstable" id="alternatecolor" width="95%">
 <tr><td>Añadir Producto: <input name="producto" type="text" id="buscar_usuario" ><input name="Añadir" type="button" value="Añadir"></td></tr>
 <table class="altrowstable" id="alternatecolor" width="95%">
 <tr>
 <td>Referencia</td>
 <td>Nombre</td>
 <td>Precio</td>
 <td>Cantidad</td>
 <td>Importe</td>
 <td>Edición</td>
 </tr>
 </table>
 </div> 
 </div>
</body>
</html>

Cuando ejecuto este código se crea una tabla con un campo encima que con el código que hay en el archivo ajax.php carga la base de datos de la tabla artículos con la referencia, nombre y precio del producto, ahora cuando selecciono este y le doy a añadir que me lo añada a la tabla que hay debajo con los datos de la base de datos de ese producto.

Muchas gracias por tu respuesta.