How to show details of a product without reloading the page

Question

How to show details of a product without reloading the page

Navigation

#1 by (1 votes)

0

Good, I am trying to make my kardex or history of entry and exit of my product. But I have a problem. I do not want that when going to see the details of a product the page requires recharging. But hide the first table ( producto.php ) where all my products are listed and show the table where the product is detailed ( histo.php ) and a button to go back and go back to see the original table producto.php (obviously).

All this without reloading my page.

I have advanced the following

My file 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>

And show me this:

and this is my histo.php file

<?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>

That shows me the product history (Entry and Exit) indicated: Here, for example, is the product code: 1

And here the one of my product code: 2

I thank you in advance for all the help you can give me.

mysql php ajax

asked by Raphael 16.07.2016 в 13:44

source

1 answer

Error Parsing Date Sqlite Redirect in ZF2 does not work

score 1 · Accepted Answer

So that not a page does not recharge, use AJAX, in the following way producto.php is like this:

    <?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>

As you see in the button, I give it a "history" id and I put an $ i counter to identify which row it is and in the ajax I pass the parameters and send the request, and in the response div charge the histo.php page without fully recharging the page, it is not the best function but it is the idea, maybe something is missing, check a bit about AJAX Greetings!