I present my code so they can help me, I’m trying to do a shopping cart, where products from a list and then generated a table, where each row is a record (accessed from a mysql db).
I’ve managed to do what I need, when you click on a record, shipping GET A model form via jQuery ajax. The problem: If you use the list pagination works fine, but if I walk a place located on the page below, I results in the vector consulted and restart the index. I show the codes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Listado de Productos</title>
<script language="javascript" type="text/javascript" src="js/jquery-1.8.3.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$("#paginar").live("click", function(){
$("#contenido").html("<div align='center'><img src='imgs/cargando.gif'/></div>");
var pagina=$(this).attr("data");
var cadena="pagina="+pagina;
$.ajax({
type:"GET",
url:"listar_busqueda.php",
data:cadena,
success:function(data)
{
$("#contenido").fadeIn(1000).html(data);
}
});
});
});
</script>
<link href="css/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
$(function() {
/* For zebra striping */
$("table tr:nth-child(odd)").addClass("odd-row");
/* For cell text alignment */
$("table td:first-child, table th:first-child").addClass("first");
/* For removing the last border */
$("table td:last-child, table th:last-child").addClass("last");
});
</script>
<!-- script para manejar los click en los productos y sumarlos a la tabla --->
<script>
var total = 0;
$(document).ready(function() {
$('#form').submit(function(event){ //en el evento submit del fomulario
event.preventDefault(); //detenemos el comportamiento por default
var url = $(this).attr('action'); //la url del action del formulario
var datos = $(this).serialize(); // los datos del formulario
$.ajax({
type: 'GET',
url: url,
data: datos,
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
var prodid = data[0]; //get id
var prodnom = data[1]; //get name
var proddesc = data[2]; //get id
var precioV = data[3]; //get name
var stock = data[4]; //get name
var cant2 = parseFloat(precioV).toFixed(2)
if(data == 0)
alert("El artículo ingresado no existe en la base de datos");
else
$('#tabla').append("<tr><td>"+prodid+"</td>"+"<td>"+prodnom+"</td>"+"<td>"+proddesc+"</td>"+"<td>"+precioV+"</td>"+"<td>"+stock+"</td>"+"<td>"+parseFloat(cant2).toFixed(2)+"</td>"+"</tr>")
total=parseFloat(total)+cant2;
}
});
});
});
</script>
</head>
<body>
<h2>Listado de Productos</h2>
<table id="tabla" width="100%" border="1">
<tr bgcolor="#F3FCB4">
<td>Codigo de producto</td>
<td>Descripcion</td>
<td>Rubro</td>
<td>Precio</td>
<td>Cantidad</td>
<td>Importe</td>
</tr>
</table>
<div id="contenido"><?php require("proces.php"); ?></div>
</body>
</html>
/////proces.php
<?php
include("conexion.php");
$consulta_cantidad=mysql_query("SELECT * FROM productos",$conexion);
$resultados_cantidad=mysql_num_rows($consulta_cantidad);
if ($resultados_cantidad>0)
{
$filas_pagina=10;
$numero_pagina=1;
if(isset($_GET["pagina"]))
{
sleep(1);
$numero_pagina=$_GET["pagina"];
}
$campo_de_inicio=($numero_pagina-1)*$filas_pagina;
$total_registros=ceil($resultados_cantidad/$filas_pagina);
echo "<table align='center'>";
echo "<tr>";
echo "<td>Codigo</td>";
echo "<td>Nombre de producto</td>";
echo "<td>Precio</td>";
echo "<td>Stock</td>";
echo "<td>Proveedor</td>";
echo "<td>Accion</td>";
echo "</tr>";
$consulta=mysql_query("SELECT id,nombre,precio,stock,proveedor,id_cat FROM productos LIMIT $campo_de_inicio, $filas_pagina",$conexion);
while ($resultados=mysql_fetch_array($consulta))
{
echo "<tr>";
echo "<td>".$resultados["id"]."</td>";
echo "<td>".$resultados["nombre"]."</td>";
echo "<td>".$resultados["precio"]."</td>";
echo "<td>".$resultados["stock"]."</td>";
echo "<td>".$resultados["proveedor"]."</td>";
print '<td>';
print '<form name="form" id="form" action="proces.php">';
print '<input name="car" type="submit" value="C">';
print '<input name="cant" type="text" id="cant" value="1" size="2">';
print '<input name="id" type="hidden" id="id" value="'.$resultados['id'].'" size="2" >';
print '</form>';
echo "</tr>";
}
echo "</table>";
echo "<br/>";
echo "<hr/>";
if ($total_registros>1)
{
echo "<div align='center'>";
if ($numero_pagina!=1)
echo "<a id='paginar' data='".($numero_pagina-1)."'>Anterior</a> ";
for ($i=1;$i<=$total_registros;$i++)
{
if($numero_pagina==$i)
{
echo "<a>".$i."</a> ";
}
else
{
echo "<a id='paginar' data='".$i."'>".$i."</a> ";
}
}
if($numero_pagina!=$total_registros)
{
echo "<a id='paginar' data='".($numero_pagina+1)."'>Siguiente</a>";
}
echo "</div>";
}
}
?>
///productos mysql
-- Estructura de tabla para la tabla `productos`
CREATE TABLE IF NOT EXISTS `productos` (
`id` int(6) NOT NULL AUTO_INCREMENT,
`nombre` varchar(50) NOT NULL,
`desc` varchar(200) NOT NULL,
`precio` decimal(5,2) NOT NULL,
`stock` int(6) NOT NULL,
`proveedor` varchar(100) NOT NULL,
`id_cat` int(3) NOT NULL,
PRIMARY KEY (`id`),
KEY `id_cat` (`id_cat`),
KEY `id_cat_2` (`id_cat`),
KEY `id_cat_3` (`id_cat`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1539 ;
I think the problem is because your variable is set on javascript and nothing more..
you could use cookies to solve this.
This is $.cookie and it can help you to solve your problem.
Instead of
it would be something like
and everytime you want to modify it or read, just do it