Fast input with jQuery and AJAX

0

I am creating a page for a product and it has a customizer such as color, texture, name and quantity, it has the ability to generate the cart on the same website with ajax providing the possibility to modify the custom product previously.

The problem is that you have a calculator implemented and this should be added to the same website, has a input of type='number' that as the user click is adding or subtracting the price of the product.

The problem is that this works only if the user clicks slowly, ie a click, two clicks, three clicks works and calculates perfectly, but when for example you want to add 100 new quantities and leave the click stuck, does not work, dies and only adds 1 instead of 99 more.

For example, if I want to add 5 new products, it works, because they are few clicks, but when the user leaves the click attached to add, for example, 100 quantities, it does not work only sum 1 instead of the 99 missing ones.

Try events keyup,keydown,mouseup,mousedown y change de Jquery

This is the code that the server generates to the client

 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>

This is the code that is responsible for adding the products

<?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);
        }
        
    }
}

In summary, what I'm looking for is for this to do all the sums, so the user leaves the click pasted, is this possible?

This is the old code, which worked without AJAX, but had the same problem when I left the click pressed.

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>   
                 ";
    
asked by Carlos Estarita 24.07.2017 в 22:22
source

1 answer

0

Community for this complex problem look for a much more complex solution, but it is this

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>
                 ";

What I did was to do the calculation with a click, in a specific id of each table, A double AJAX request, one to subtract the total value, so that the second ajax request, add to the total value from where it ended, is Say that if instead of 99 add 1 more, start evaluating from 99 and not add everything again. This was the solution to my problem I hope it will help someone when they have to double AJAX request in a single sentence

    
answered by 26.07.2017 в 21:03