我有一个非常棘手的问题,我不知道如何处理它.我连续有几个文本框,我需要填写这些文本框.每次填充文本框时,我都会获取该值并进行使用该值的Ajax调用.响应确定该文本框是红色还是绿色(使用
Jquery css()函数).
现在这是问题所在.假设我连续有5个文本框.假设我输入1-tab,2-tab,1-tab,1-tab.所有这一切都非常快.例如,1-tab表示我键入1,然后按Tab键移动到下一个文本框.我意识到如果我走得太快,一些文本框不会更新,它们的颜色也不会改变.我认为这是由于ajax需要一些时间来处理.
我想到了这个问题,想出了一个可以解决问题的想法.这是在每个Ajax调用之后添加延迟,然后选项卡到下一个.我在S.O周围搜索并找到了this solution.然而,它并没有真正为我工作(基本上它打破了,JS根本不起作用).
$( ".myTextBox" ).keyup(function() { //Defining my variables here $.ajax({ //Perform First Ajax request $.ajax({ //Perform Second Ajax Request }); }); });
这是我尝试使用我从S.O找到的解决方案的解决方案,但它不起作用.
var timer = null; $( ".myTextBox" ).keyup(function() { clearTimeout(timer); timer = setTimeout( function(){ .ajax({ //Perform First Ajax request $.ajax({ //Perform Second Ajax Request }); }); },200); //Defining my variables here });
现在,有两个选项：
>我的逻辑错误是延迟tab键.能否有更好的逻辑来克服我最初的问题？
>我正在使用上面错误发布的解决方案.
希望得到一些建设性的答案.
谢谢.
编辑：这是完整的代码,根据要求.
$( ".getqty" ).keyup(function() {
var split = this.id.split(":");
var color = split[0];
var size = split[1];
var prodID = split[2];
var $this = $(this);
var value = $this.val();
var stock = 0;
var price = split[3];
var originalProd = split[4];
var dataStock = $this.attr("data-stock");
if(value.length > 0){
value = parseInt(value);
}else{
value = "";
}
$.ajax({ //create an ajax request
type: 'POST',url: 'includes/add.PHP',dataType: 'html',//expect html to be returned
data:'color='+color+'&size='+size+'&prodID='+prodID+'&qty='+value+'&originalProd='+originalProd+'&dataStock='+dataStock,success: function(response){
if(response == "breakOut"){
$this.css('background-color','#F87171').css('border','1px solid #B42C2C');
$("#"+originalProd+"-"+color).text("Not enough in stock.").css('color','#B42C2C');
$("#"+originalProd+"-totalPrice").text("");
}else{
stock = response;
if((value > 0 && value <= stock) || (value > 0 && dataStock == 'yes')){
$this.css('background-color','#66CF66').css('border','1px solid #277230');
}else{
$this.css('background-color','#fff').css('border','1px solid #ccc');
}
var count = 0;
$("."+color+"-" + originalProd).each(function(){
if($(this).val() == 0){
count = count + 0;
}else{
count = count + parseFloat($(this).val(),10);
}
});
//Single Item Total
if(count > 0){
var totalPrice = (price * count).toFixed(2);
$("#"+originalProd+"-"+color).text(count + " - " + totalPrice.toString().replace(/\./g,',') + " Eur").css('color','#CCC');
}else{
$("#"+originalProd+"-"+color).text("");
}
$.ajax({ //create an ajax request
type: 'POST',url: 'includes/cart.PHP',//expect html to be returned
success: function(response){
if(response > 0){
$("#cart_price").text("Cart: "+response.toString().replace(/\./g,')+ " Eur");
}else{
$("#cart_price").text("Cart:0,00 Eur");
}
},error:function (xhr,ajaxOptions,thrownError){
// alert(thrownError);
}
});
if(pathname == 'mycart.PHP'){
location.reload();
}
}
},thrownError){
//alert(thrownError);
}
});
解决方法
您应该使用change事件而不是keyup.来自文档：
The keyup event is sent to an element when the user releases a key on
the keyboard. It can be attached to any element,but the event is only
sent to the element that has the focus.
当您按Tab键时,您的元素将快速更改焦点,并且可能不会为具有正确值内容的输入文本触发keyup事件.
所以尝试：
$( ".getqty" ).change(...)
更新：
由于更改事件仅在输入文本失去焦点时触发,因此您可以改为：
$( ".getqty" ).on('input',function() {
var $this = $(this);
var value = $this.val();
if (value.length > 0) {
value = parseInt(value);
}
else {
value = "";
}
$.ajax({
type: 'POST',url: 'data.txt',dataType: 'text',success: function(response){
$this.css('background-color','1px solid #277230');
$.ajax({
type: 'POST',success: function(response){
$("#cart_price").text("Cart: "+response.toString().replace(/\./g,')+ " Eur");
},thrownError){
console.log(thrownError);
}
});
},error: function (xhr,thrownError){
console.log(thrownError);
}
});
});
或者使用纯javascript事件侦听器：
var elemList = document.getElementsByClassName('getqty');
for (var i = 0; i < elemList.length; i++) {
elemList[i].addEventListener('input',function(e) {
var $this = $(e.target);
var value = $this.val();
if (value.length > 0) {
value = parseInt(value);
}
else {
value = "";
}
$.ajax({
type: 'POST',success: function(response){
$this.css('background-color','1px solid #277230');
$.ajax({
type: 'POST',dataType: 'txt',success: function(response){
$("#cart_price").text("Cart: "+response.toString().replace(/\./g,')+ " Eur");
},thrownError){
console.log(thrownError);
}
});
},thrownError){
console.log(thrownError);
}
});
});
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
