0

Estoy creando una página para un producto y esta tiene un personalizador como color, textura, nombre y cantidad, esta tiene la capacidad de generar el carrito en la misma web con ajax brindando la posibilidad de modificar el producto personalizado anteriormente.

El problema esta en que tiene una calculadora implementada y esta debe ir sumando en la misma web, tiene un input de type='number' que a medida que el usuario de click esta va sumando o restando el precio del producto.

El problema radica en que esto funciona sólo si el usuario da clicks de una forma lenta, es decir un click, dos click, tres click funciona y le calcula perfectamente, pero cuando por ejemplo quiere agregar 100 cantidades nuevas y deja el click pegado, no funciona, muere y sólo suma 1 en vez de 99 mas.

Por ejemplo si quiero sumar 5 productos nuevos, funciona, porque son pocos clicks, pero cuando el usuario deja el click pegado para sumar por ejemplo 100 cantidades, no funciona sólo suma 1 en vez de los 99 faltantes.

Intente con los eventos keyup,keydown,mouseup,mousedown y change de Jquery

Este es el código que genera el servidor al cliente

 echo "
               <script>
               function keyup(key){
                    var price_ = $('#total').text();
                     var new_price = price_.replace('TOTAL: $','');
                     var setter_calculator = parseFloat(Math.round(new_price));
                     $.ajax({
                      url:'admin/ajax_actualizador.php?value_='+key+'&calculator='+setter_calculator,
                      method:'GET',
                      cache:false,
                      success:function(data){
                      var new_operation = parseFloat(Math.round(data));
                      $('#total').text('TOTAL: $'+new_operation);
                      $('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
                      },
                      error:function(data){
                      console.log(data);
                        }
                    });   
               }
               </script>
               ";
<td>
<input style='width:5em' name='update_num' oninput='keyup($( this ).val())' type='number' data-bind='$this->num_' value='$this->num_' id='update_qty'>
 </td>

Este es el código que se encarga de sumar los productos

<?php
$obj = new budget();
class budget{
    protected $Price, $SUM_VALUE = 0;
    protected $calculator;
    public function __construct() {
        if(isset($_GET["value_"]) && (!empty($_GET["value_"])) && isset($_GET["calculator"]) && (!empty($_GET["calculator"]))){
            $this->__setSum__($_GET["value_"]);
            $this->__setCalculator__($_GET["calculator"]);
            $this->__sum__($this->__getSum__(), $this->__getCalculator__());
        }
    }     
    protected function __setSum__($value){
        $this->Price = $value;
    }
    protected function __getSum__(){
        return $this->Price;
    }
    protected function __setCalculator__($total){
        $this->calculator = $total;
    }
    protected function __getCalculator__(){
        return $this->calculator;
    }
    private function __sum__($QTY, $total_price){
        if($QTY>=1 && $QTY<=4){
            $this->SUM_VALUE = 5;
            echo ($total_price+$this->SUM_VALUE);
        }
        if($QTY>=5 && $QTY<=9){
            $this->SUM_VALUE = 3;
            echo ($total_price+$this->SUM_VALUE);
        }
        if($QTY>=10 && $QTY<=49){
            $this->SUM_VALUE = 2;
            echo ($total_price+$this->SUM_VALUE);
        }
        if($QTY>=50){
            $this->SUM_VALUE = 1;
            echo ($total_price+$this->SUM_VALUE);
        }
        
    }
}

En resumen, lo que busco es que esto haga todas las sumas, asi el usuario deje el click pegado, ¿es esto posible?

Este es el código viejo, que funcionaba sin AJAX, pero tenía el mismo problema cuando dejaba el click presionado.

echo "
                 <script>
                 $('tr[id=$data] input[data-bind=$this->num_]').change(function(){
                 var qty = parseFloat(Math.round($('tr[data-bind=$data] td[id=$this->num_]').text()));
                 var price_ = $('#total').text();
                 var new_price = price_.replace('TOTAL: $','');
                 var setter_price = parseFloat(Math.round(new_price));
                 if($( this ).val() > qty){
                      var price = parseFloat(Math.round($( this ).val()));
                      if(price>=1 && price<=4){     
                      var new_operation = parseFloat(Math.round((setter_price+5)));
                      $('#total').text('TOTAL: $'+new_operation);
                      $('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
                      }
                      if(price>=5 && price<=9){
                      var new_operation = parseFloat(Math.round((setter_price+3)));
                      $('#total').text('TOTAL: $'+new_operation);
                      $('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
                      }
                      if(price>=10 && price<=49){
                      var new_operation = parseFloat(Math.round((setter_price+2)));
                      $('#total').text('TOTAL: $'+new_operation);
                      $('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
                      }
                      if(price>=50){
                      var new_operation = parseFloat(Math.round((setter_price+1)));
                      $('#total').text('TOTAL: $'+new_operation);
                      $('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
                      }
                    }else{
                    var price = parseFloat(Math.round($( this ).val()));
                      if(price>=1 && price<=4){
                      var new_operation = parseFloat(Math.round((setter_price-5)));
                      $('#total').text('TOTAL: $'+new_operation);
                      $('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
                      }
                      if(price>=5 && price<=9){
                      var new_operation = parseFloat(Math.round((setter_price-3)));
                      $('#total').text('TOTAL: $'+new_operation);
                      $('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
                      }
                      if(price>=10 && price<=49){
                      var new_operation = parseFloat(Math.round((setter_price-2)));
                      $('#total').text('TOTAL: $'+new_operation);
                      $('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
                      }
                      if(price>=50){
                      var new_operation = parseFloat(Math.round((setter_price-1)));
                      $('#total').text('TOTAL: $'+new_operation);
                      $('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
                      }
                    }                   
                  });
                 </script>   
                 ";

8
  • Son muchas peticiones ajax por click, se satura el servidor, intenta con onblur que se dispara al quitar el foco del input
    – DanAlvarez
    el 24 jul. 2017 a las 20:29
  • Ya lo intente sin ajax, y sigue igual, solo suma 1 asi agregue 100 cantidades mas el 24 jul. 2017 a las 20:36
  • Deja el ajax, mi sugerencia es que intentes con: <input style='width:5em' name='update_num' onblur='keyup(this.value)' type='number' data-bind='$this->num_' value='$this->num_' id='update_qty'> y para que realice la operación das click en otro lado de la ventana
    – DanAlvarez
    el 24 jul. 2017 a las 21:10
  • Ya lo intente, creo que el problema es de otra cosa, cuando lo coloco como blur y dejo el click pegado solo suma un valor, en vez de sumar los 99, creo que esto es porque toma el valor de la ultima variable, por ejemplo si dejo el click pegado en el evento blur, unas 100 cantidades de items, suma 1 nada mas el 24 jul. 2017 a las 21:19
  • Testeando, me acabo de dar cuenta que esto funciona cuando da click, por click si clickea 100 veces, funciona, pero al dejarlo pegado es que no cambia, existe alguna solución a eso? La lógica al parecer se trata como un cronometro, que el usuario deja el click pegado y va cambiando la hora dinamicamente con los segundos, es exactamente la misma funcionalidad el 24 jul. 2017 a las 21:36

1 respuesta 1

0

Comunidad para este problema complejo busque una solución mucho mas compleja, pero es esta

echo "
                 <script>
                 $('tr[id=$data] i[ng-show=$data]').click(function(){
                     $('tr[data-bind=$data]').show();
                     var update_qty = $('tr[id=$data] input[data-bind=$this->num_]').val();
                     $.ajax({
                     url:'admin/ajax_actualizador.php?value_='+update_qty,
                     method:'GET',
                     cache:false,
                     success:function(data){
                            var last_qty = parseFloat(Math.round($('tr[data-bind=$data] td[id=$this->num_]').text()));
                            if(update_qty!=last_qty){ 
                            $.ajax({
                            url:'admin/ajax_actualizador.php?value_='+last_qty,
                            method:'GET',
                            cache:false,
                            success:function(data){
                            var last_price = $('#total').text();
                            var set_format = last_price.replace('TOTAL: $','');
                            var format_mathematic = parseFloat(Math.round(set_format));
                            var ajax_numeric = parseFloat(Math.round( data ));
                            var new_operation = (format_mathematic-ajax_numeric);
                            $('#total').text('TOTAL: $'+new_operation);
                            document.getElementById('sum').value = new_operation;
                              },
                            error:function(data){
                                console.log(data);
                               }
                            });
                            var last_price = $('#total').text();
                            var set_format = last_price.replace('TOTAL: $','');
                            var format_mathematic = parseFloat(Math.round(set_format));
                            var ajax_numeric = parseFloat(Math.round( data ));
                            var new_operation = (format_mathematic+ajax_numeric);
                            $('#total').text('TOTAL: $'+new_operation);
                            document.getElementById('sum').value = new_operation;                                                                           
                            $('tr[data-bind=$data] td[id=$this->num_]').text(update_qty+ ' ');
                            }else{
                             return false;
                            }
                        },
                     error:function(data){
                            
                            console.log(data);
                       }
                     });
                     $('tr[id=$data]').hide()
                 });
                 </script>
                 ";

Lo que hice fue hacer el calculo con un click, en un id especifico de cada tabla, Una doble petición AJAX, una para restar el valor total, para que la segunda petición ajax, sume al valor total desde donde finalizo, es decir que si en vez de 99 sumo 1 mas, empieza a evaluar desde el 99 y no vuelve a sumar todo. Esta fue la solución a mi problema espero que les sirva a alguien cuando tenga que hacer doble petición AJAX en una sola sentencia

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.