1

Tengo una lista de productos, los cuales se muestran por bloques de 20 en 20, y se pueden ver presionando botones de pág. siguiente o pág. anterior (NO se cambia el URL). Ahora, los datos que se muestran pueden editarse, y al hacerlo se actualiza la página para poder ver estos cambios. El problema es que, al actualizar, me retorna al primer bloque, y quisiera que se quedara en el bloque actual. Es decir, si cambio un dato del producto 45, se actualice, pero se quede la página mostrando los productos del 41 al 60 (recordando que se ven de 20 en 20). Actualmente, si cambio el 45, actualiza y retorna al producto 1..Gracias!.

Otro planteamiento es q me refresque pero en el bloque donde estoy, actualmente, si actualizo la página, me retorna al bloque 1, quisiera que, si estoy en el bloque 3 y refresco la página, se quede en el bloque 3

con este modal indico los cambios:

<div id="editProductModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <form name="edit_product" id="edit_product">
                    <div class="modal-header">                      
                        <h4 class="modal-title">Indicar cantidad</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">                    
                        <div class="form-group">
                            <label>Cantidad</label>
                            <input type="text" name="edit_cantidad" id="edit_cantidad" class="form-control" required>
                            <input type="hidden" name="edit_total" id="edit_total">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancelar">
                        <input type="submit" class="btn btn-info" value="Aceptar">
                    </div>
                </form>
            </div>
        </div>
    </div>

este es el script

$(function() {load(1);});
function load(page){
var query=$("#q").val();
var per_page=30;
var parametros = {"action":"ajax","page":page,'query':query,'per_page':per_page};
$("#loader").fadeIn('slow');
$.ajax({url:'ajax/listar_productos.php', 
       data: parametros,
       beforeSend: function(objeto){
       $("#loader").html("Cargando...");
       },
       success:function(data){
        $(".outer_div").html(data).fadeIn('slow');
        $("#loader").html("");
        }
        })
    }
    $('#editProductModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var cliente = button.data('cliente') 
      $('#edit_cliente').val(cliente)
      var sucursal = button.data('sucursal') 
      $('#edit_sucursal').val(sucursal)
      var producto = button.data('producto') 
      $('#edit_producto').val(producto)
      var codigo = button.data('codigo') 
      $('#edit_codigo').val(codigo)
      var categoria = button.data('categoria') 
      $('#edit_categoria').val(categoria)
      var unidad = button.data('unidad') 
      $('#edit_unidad').val(unidad)
      var precio = button.data('precio') 
      $('#edit_precio').val(precio)
      var cantidad = button.data('cantidad') 
      $('#edit_cantidad').val(cantidad)
      var id = button.data('id') 
      $('#edit_id').val(id)
    })

    $("#edit_product" ).submit(function( event ) {
      var parametros = $(this).serialize();
        $.ajax({
                type: "POST",
                url: "ajax/editar_producto.php",
                data: parametros,
                 beforeSend: function(objeto){
                    $("#resultados").html("Enviando...");
                  },
                success: function(datos){
                $("#resultados").html(datos);
                load(1);
                $('#editProductModal').modal('hide');
              }
        });
      event.preventDefault();
    });

el php que hace la edición en sql

session_start();
$tbl=$_SESSION['ordensuc'];
$ordenglobal=$_SESSION['orden'];

if (empty($_POST['edit_id'])){
    $errors[] = "ID está vacío.";
} elseif (!empty($_POST['edit_id'])){
require_once ("../conexion.php");
$cantidad = mysqli_real_escape_string($con,(strip_tags($_POST["edit_cantidad"],ENT_QUOTES)));
$orden_id = $_POST["edit_id"];
$sql = "UPDATE $tbl SET cantidad='".$cantidad."', total='".$total."' WHERE id='".$orden_id."' ";
$query = mysqli_query($con,$sql);
} 

donde se actualiza el listado de productos

session_start();
$ordenglobal=$_SESSION['orden'];
$ordensuc=$_SESSION['ordensuc'];

/* Connect To Database*/
require ("../conexion.php");

$action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:'';
if($action == 'ajax'){
$query = mysqli_real_escape_string($con,(strip_tags($_REQUEST['query'], ENT_QUOTES)));

$tables=$ordensuc;
$campos="*";
$sWhere=" ".$ordensuc.".producto LIKE '%".$query."%'";
$sWhere.=" order by ".$ordensuc.".producto";

include 'pagination.php'; //include pagination file
//pagination variables
$page = (isset($_REQUEST['page']) && !empty($_REQUEST['page']))?$_REQUEST['page']:1;
$per_page = intval($_REQUEST['per_page']); //how much records you want to show
$adjacents  = 4; //gap between pages after number of adjacents
$offset = ($page - 1) * $per_page;
//Count the total number of row in your table*/
$count_query   = mysqli_query($con,"SELECT count(*) AS numrows FROM $tables where $sWhere ");
if ($row= mysqli_fetch_array($count_query)){$numrows = $row['numrows'];}
else {echo mysqli_error($con);}
$total_pages = ceil($numrows/$per_page);
//main query to fetch the data
$query = mysqli_query($con,"SELECT $campos FROM $tables where $sWhere LIMIT $offset,$per_page");
//loop through fetched data


if ($numrows>0){
?>
    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th class='text-center'></th>
                    <th class='text-center'>Codigo</th>
                    <th>Producto</th>
                    <th>Categoria</th>
                    <th>Unidad</th>
                    <th>Cantidad</th>
                    <th></th>
                </tr>
            </thead>
            <tbody> 
                    <?php 
                    $finales=0;
                    while($row = mysqli_fetch_array($query)){   
                        $orden_id=$row['id'];
                        $orden_codigo=$row['codigo'];
                        $orden_producto=$row['producto'];
                        $orden_categoria=$row['categoria'];
                        $orden_unidad=$row['unidad'];
                        $orden_precio=$row['precio'];
                        $orden_cantidad=$row['cantidad'];
                        $orden_total=$row['total'];
                        $orden_image=$row['image'];
                        $finales++;
                    ?>  
                    <tr class="<?php echo $text_class;?>">
                        <td class='text-center'><img src=<?php echo "../images/".$orden_image;?> height="50" width="50"></img></td>
                        <td class='text-center'><?php echo $orden_codigo;?></td>
                        <td ><?php echo $orden_producto;?></td>
                        <td ><?php echo $orden_categoria;?></td>
                        <td class='text-center' ><?php echo $orden_unidad;?></td>
                        <td ><?php echo $orden_cantidad;?></td>
                        <td>
                            <a href="#"  data-target="#editProductModal" class="edit" data-toggle="modal" data-producto="<?php echo $orden_producto?>" data-codigo="<?php echo $orden_codigo?>" data-categoria="<?php echo $orden_categoria?>" data-unidad="<?php echo $orden_unidad?>" data-precio="<?php echo $orden_precio?>" data-cantidad="<?php echo $orden_cantidad?>" data-total="<?php echo $orden_total?>" data-id="<?php echo $orden_id?>"><i class="material-icons" data-toggle="tooltip" title="Editar" >&#xE254;</i></a>
                        </td>
                        </tr>
                    <?php }?>
                    <tr>
                        <td colspan='6'> 
                            <?php 
                                $inicios=$offset+1;
                                $finales+=$inicios -1;
                                echo "Mostrando $inicios al $finales de $numrows registros";
                                echo paginate( $page, $total_pages, $adjacents);
                            ?>
                        </td>
                    </tr>
            </tbody>            
        </table>
    </div>  
<?php   
}   
}
?>  

****y vuelve a paginar****

<?php
function paginate($page, $tpages, $adjacents) {
$prevlabel = "&lsaquo; Anterior";
$nextlabel = "Siguiente &rsaquo;";
$out = '<ul class="pagination   pull-right">';

// previous label

if($page==1) {
    $out.= "<li class='page-item disabled'><a>$prevlabel</a></li>";
} else if($page==2) {
    $out.= "<li class='page-item'><a href='javascript:void(0);' onclick='load(1)'>$prevlabel</a></li>";
}else {
    $out.= "<li class='page-item'><a href='javascript:void(0);' onclick='load(".($page-1).")'>$prevlabel</a></li>";

}
// first label
if($page>($adjacents+1)) {
    $out.= "<li class='page-item'><a href='javascript:void(0);' onclick='load(1)'>1</a></li>";
}
// interval
if($page>($adjacents+2)) {
    $out.= "<li class='page-item'><a>...</a></li>";
}

// pages

$pmin = ($page>$adjacents) ? ($page-$adjacents) : 1;
$pmax = ($page<($tpages-$adjacents)) ? ($page+$adjacents) : $tpages;
for($i=$pmin; $i<=$pmax; $i++) {
    if($i==$page) {
        $out.= "<li class='active page-item'><a>$i</a></li>";
    }else if($i==1) {
        $out.= "<li class='page-item'><a href='javascript:void(0);' onclick='load(1)'>$i</a></li>";
    }else {
        $out.= "<li class='page-item'><a href='javascript:void(0);' onclick='load(".$i.")'>$i</a></li>";
    }
}

// interval

if($page<($tpages-$adjacents-1)) {
    $out.= "<li class='page-item'><a>...</a></li>";
}

// last

if($page<($tpages-$adjacents)) {
    $out.= "<li class='page-item'><a href='javascript:void(0);' onclick='load($tpages)'>$tpages</a></li>";
}

// next

if($page<$tpages) {
    $out.= "<li class='page-item'><a href='javascript:void(0);' onclick='load(".($page+1).")'>$nextlabel</a></li>";
}else {
    $out.= "<li class='disabled page-item'><a>$nextlabel</a></li>";
}

$out.= "</ul>";
return $out;
}
?>
5
  • A la hora de editar manda por el POST ( Si envias datos ), la pagina en algún input hidden con el valor de la pagina, cuando termine el proceso de edición, que te envía nuevamente a la pagina que estaba con el input que enviaste que tendría como valor la pagina que estaba el usuario. Commented el 10 jun. 2019 a las 14:03
  • No tengo alguna variable que me indique o tome el valor de la página actual. No sé de donde tomarlo.
    – Alb
    Commented el 10 jun. 2019 a las 14:08
  • Estoy nuevo acá, no sé como compartir el código..para que tengan mejor panorama
    – Alb
    Commented el 10 jun. 2019 a las 14:09
  • usa editar y añade código así tal cual, lo que haga falta... ya usuarios más experimentados acomodaremos el código para que se vea bien, bienvenido :D Commented el 10 jun. 2019 a las 14:15
  • listo, lo logré..allí están los códigos
    – Alb
    Commented el 10 jun. 2019 a las 14:44

1 respuesta 1

3

Gracias a la tecnología AJAX, las nuevas especificaciones de Javascript y un método popular en estos días llamado fetch podemos realizar operaciones de fondo. Este es fácil de usar hoy en día con contextos asíncronos con el uso de async y await que se ha vuelta casi un estándar

async function(){
    respuestaHttp = await fetch(`url/controlador-mvc/productos/update`,  {
        method: 'post',
        body: JSON.stringify(parametrosDeActualizacion)
    });

    var status = (await r.ok), respuestaJson;
    if (status)
        respuestaJson = (await r.json()); //Obtener la respuesta válida HTTP(200)
    else
        throw new Error(await req.text()); //Si no espera un resultado en formato JSON lo trato como un error

    //tratar respuestaJson para actualizar fila
}

Tu parte servidora PHP sera capaz de deducir los parámetros según el framework que utilices. No estoy al tanto de puede transformar ambos tipos de parámetros como son los POST y GETS al mismo tiempo. Pero si en .Net-Core se puede imagino que en tu framework también.

Si quieres puedes recurrir a la forma nativa de PHP como $_GET["nombreParametro"] y $_POST["nombreParametro"], ya que el método de petición es POST pero puedes ver que en la url incluyo algunos como GET

PD:

Como te das cuenta uso mucho las especificaciones nuevas, que te pueden ayudar mucho com olenguage cliente de tu aplicacion web. Por favor deje un comentario si necesita algo más.

UPDATE:

Creo que el desarrollo de tu funcionalidad podrías ser más económico. Por ejemplo:

  • Podrías guardar una referencia de la fila del producto que estas editando.
  • Luego levantas el modal y editas y envias al servidor la información actualizada
  • Si lo que usas HTML, genera el de la fila a actualizar con $(refFila).replace(htmlFilaGenerada)

Espero sirva de ayuda en algo

6
  • Agradecido por la dedicación Pedro. Sin embargo, realmente soy nuevo en todo esto, no entiendo muchas cosas. SI puedes por favor revisa el código que ya logré subir, para ver que debo cambiar. Creo que la cosa va por el load, pero aún no doy al clavo
    – Alb
    Commented el 10 jun. 2019 a las 14:47
  • Al momento de seleccionar para editar obtengo el id, y podría obtener la fila donde está ubicado, luego hago el update al sql, y luego, donde incluyo esa linea de código?
    – Alb
    Commented el 10 jun. 2019 a las 15:22
  • Parecido a como usted hizo en el método success recibirá el HTML de la fila que editó con los nuevos valores en lugar del HTML de la tabla, y luego remplazas la línea de código $("#resultados").html(datos); con $(refFila).replace(htmlFilaGenerada). Es similar lo que el enfoque es mas reducido
    – Pedro Mora
    Commented el 10 jun. 2019 a las 15:30
  • Pero si haces uso de asunciones y await entonces tu función debe ser asíncrona, es decir estar así async function no?
    – user128299
    Commented el 10 jun. 2019 a las 15:35
  • Entiendo que esto de reemplazar la fila es una opción al método descrito arriba, correcto?. O va combinados?..
    – Alb
    Commented el 10 jun. 2019 a las 15:39

Tu Respuesta

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

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