0

Buenas, estoy intentado hacer mi kardex o historial de entrada y salida de mi producto. Pero tengo un problema. No quiero que al pasar a ver los detalles de un producto la pagina requiera recargarse. Sino ocultar la primera tabla(producto.php) donde se listan todos mis productos y mostrar la tabla donde se detalla el producto(histo.php) y un botón para retroceder y volver a ver la tabla original producto.php(obviamente).

Todo esto sin recargar mi pagina.

Tengo avanzado lo siguiente

Mi archivo producto.php

<?php 
include('php/conexion.php');
$sql="SELECT * FROM producto";
$result=$conn->query($sql);
?>

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <table class="table table-hover table-bordered">
    <thead>
      <tr>
        <th>ID_Producto</th>
        <th>nombre</th>
        <th>peso/volumen</th>
        <th>categoria</th>
        <th>stock_min</th>
        <th>precio</th>
        <th>Accion</th>
      </tr>
    </thead>
    <tbody>
    <?php 
    if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                echo "<tr>
                    <td>".$row["id_producto"]."</td>
                    <td>".$row["nombre"]."</td>
                    <td>".$row["peso"]." ".$row["unidad_medida"]."</td>
                    <td>".$row["categoria"]."</td>
                    <td>".$row["stock_min"]."</td>
                    <td>".$row["precio"]."</td>
                    <td><a class='btn btn-info' role='button' href='histo.php?id=".$row['id_producto']."'><i class='fa fa-history' aria-hidden='true'></i> Historial</a></td>
                    </tr>";
            }
    }else{
        echo "<tr><td colspan='100%'>No hay datos que Mostrar</td></tr>";
    }

    ?>

    </tbody>
  </table>
</div>
</body>
</html>

Y me muestra esto:

introducir la descripción de la imagen aquí

y este es mi archivo histo.php

<?php
    include('php/conexion.php');
    $sql = "SELECT * FROM detalle_compra WHERE id_producto = '".$_GET["id"]."'";
    $result=$conn->query($sql);
?>
<!DOCTYPE HTML>
<html lang="en-ES">
<head>
    <meta charset="UTF-8">
    <title></title>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <table class="table table-hover table-bordered">
    <thead>
      <tr>
        <th>Descripcion</th>
        <th>Id Producto</th>
        <th>Cantidad</th>
        <th>Fecha</th>
      </tr>
    </thead>
    <tbody>
    <?php
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                $idcompra=$row["id_compra"];
                echo "<tr>
                        <td>Entrada</td>
                        <td>".$row["id_producto"]."</td>
                        <td>".$row["cantidad"]."</td>";
            $sql3="SELECT * FROM compra WHERE id_compra='$idcompra'";
            $result3=$conn->query($sql3);
            if($result3->num_rows>0){
                while($row3=$result3->fetch_assoc()){
                    echo "<td>".$row3["fecha_emision"]."</td></tr>";
                }
            }
            }

            $sql2 = "SELECT * FROM detalle_venta WHERE id_producto = '".$_GET["id"]."'";
            $result2=$conn->query($sql2);

            if ($result2->num_rows > 0) {
                while($row2 = $result2->fetch_assoc()) {
                    $idventa=$row2["id_venta"];
                    echo "<tr>
                        <td>Salida</td>
                        <td>".$row2["id_producto"]."</td>
                        <td>".$row2["cantidad"]."</td>";

            $sql4="SELECT * FROM venta WHERE id_venta='$idventa'";
            $result4=$conn->query($sql4);
            if($result4->num_rows>0){
                while($row4=$result4->fetch_assoc()){
                    echo "<td>".$row4["fecha_emision"]."</td></tr>";
                }
            }
            }
            }
        }else{
            echo "<tr><td colspan='100%'>No hay datos por mostrar</td></tr>";
        }
    ?>
    </tbody>
  </table>
    <a class='btn btn-info' role='button' href='producto.php'><i class="fa fa-arrow-left" aria-hidden="true"></i> Regresar</a>
</div>
</body>
</html>

Que me muestra el historial del producto(Entrada y Salida) indicado: Aqui por ejemplo es el producto de codigo: 1

introducir la descripción de la imagen aquí

Y aqui el de mi producto codigo: 2

introducir la descripción de la imagen aquí

Agradezco de antemano toda la ayuda que puedan brindarme.

1
  • Para realizar peticiones sin que se recargue la página usa AJAX el 16 jul. 2016 a las 13:07

1 respuesta 1

1

Para que no una página no se recargue usa AJAX, de la siguiente manera producto.php queda así:

    <?php 
    include('php/conexion.php');
    $sql="SELECT * FROM producto";
    $result=$conn->query($sql);
    ?>

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
     <div id=response-form>
      <table class="table table-hover table-bordered">
        <thead>
          <tr>
            <th>ID_Producto</th>
            <th>nombre</th>
            <th>peso/volumen</th>
            <th>categoria</th>
            <th>stock_min</th>
            <th>precio</th>
            <th>Accion</th>
          </tr>
        </thead>
        <tbody>
        <?php 
        if ($result->num_rows > 0) {
            $i = 0;
                while($row = $result->fetch_assoc()) {
                ?>
                <script type="text/javascript">
                    $(document).ready(function(){
                        $("#historial_<?php echo $i; ?>").click(function(){
                            var dataString = "cod="+$("#historial_<?php echo $i; ?>").val()+
                                             "valor="+$(#valor_<?php echo $i?>).val();


                        $.ajax({
                            type: "POST",
                            url: "histo.php",
                            data: dataString,
                            cache: false,
                            success: function(html){
                                //Div de respuesta  $("#response_form").html(html);
                            } 
                        });
                    });
                    });
                </script>
<input type="hidden" id = "valor_<?php echo $i?>" value="<?php $row["id_producto"] ?>">
                <?php
                    echo "<tr>
                        <td>".$row["id_producto"]."</td>
                        <td>".$row["nombre"]."</td>
                        <td>".$row["peso"]." ".$row["unidad_medida"]."</td>
                        <td>".$row["categoria"]."</td>
                        <td>".$row["stock_min"]."</td>
                        <td>".$row["precio"]."</td>
                        <td><a class='btn btn-info' role='button' id='historial_".$i."'><i class='fa fa-history' aria-hidden='true'></i> Historial</a></td>
                        </tr>";
          $i++;
                }
        }else{
            echo "<tr><td colspan='100%'>No hay datos que Mostrar</td></tr>";
        }

        ?>

        </tbody>
      </table>
    </div>
    </div>
    </body>
    </html>

Como ves en boton le doy un id "historial" y le pongo una contador $i para que me identifique que fila es y en en el ajax le paso los parametros y le envio la petición, y en el div de respuesta cargo la pagina histo.php sin que se recargue totalmente la página, no es la mejor función pero es la idea, quizás falte algo, revisa un poco sobre AJAX Saludos!

2
  • una pregunta, soy nuevo con ajax y eso. Pero en que parte es donde el contenido de mi segundo archivo histo.php se muestra?
    – Raphael
    el 17 jul. 2016 a las 8:40
  • 1
    Dentro del div con el id="response-form", ahi dentro se va a pintar la pagina histo.php el 17 jul. 2016 a las 19:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.