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