ajax 呼び出しを使用してコンテンツをロードするアプリケーションを開発しています。しかし、特定の状況では、ループで ajax 呼び出しを受け取りますが、ランダムな反復で終了します。以下は、ダブルクリック イベントから最後の ajax 呼び出しまでの一連のコードです。
//I use the double click event to fire the function
$('.item-container').on('click', '.item', function(e) {
var posX = e.pageX;
var posY = e.pageY;
var element = $(this);
var that = this;
setTimeout(function() {
var dblclick = parseInt($(that).data('double'), 10);
if (dblclick > 0) {
$(that).data('double', dblclick-1);
} else {
showToolTip(posX,posY,element);
}
}, 300);
}).on('dblclick', '.item', function(e) {
$(this).data('double', 2);
addItemsToBill(this);
});
function addItemsToBill(selectedItem) {
var element = null;
$(".bill-item-list").each(function() {
if ($(this).css("display") == "block") {
element = $(this);
return;
}
});
if (element == null) {
getSystemMessage(BILL_SELECT_VALIDATION_MSG);
return;
}
if ($('#open-tab .bill-list').find(".bill-item-list").length == 0
&& $(element).find('.bill-item').length == 0) {
getSystemMessage(BILL_SELECT_VALIDATION_MSG);
return;
}
var bill = $('.sample-elements').find('.bill-item');
var clone = bill.clone();
var itemId = $(selectedItem).attr('id');
var billId = $(element).parent().attr('id');
if ($(selectedItem).attr('isopen') == '1') {
$('.open-item-popup-overlay').lightbox_me( {
centered : true,
destroyOnClose : false,
});
$('.itmRate').val('');
$('#itmAmt').html('0.00');
$('.itemQty').text('1');
$('.itm-cancel').click(function() {
$('.open-item-popup-overlay').trigger('close');
});
//when the first run goes it's fine, bt after that, the looping starts from here. I double checked whether there is another code segment which fires this but there are none.
$('.itm-ok').click(function(){
if ($('.itmRate').val() == "") {
getSystemMessage(AMOUNT_INPUT);
return;
}
//This function gets iterated multiple times if I run the same event for multiple times.
//The function is only used in this two locations and no any other places.
billItemDrop(itemId, billId, clone, selectedItem, null,element, 1, true);
return false;
})
} else {
billItemDrop(itemId, billId, clone, selectedItem, null, element, 0,true);
}
}
function billItemDrop(itemId, billId, billItemClone, doubleClickedItem,draggableHelper, catchElement, isOpen, isDoubleClick) {
var openItemQuantity = stringToDouble($('.itemQty').val());
var openItemRate = stringToDouble($('.itmRate').val());
var openItemAmount = openItemQuantity * openItemRate;
var ajaxObject = 'itemId=' + itemId + '&billId=' + billId + '&qty='
+ openItemQuantity + '&rate=' + openItemRate + '&openItem='
+ isOpen;
ajaxCall(ADD_ITEM_TO_BILL,AJAX_POST,ajaxObject,function(response) {
var responseObject = response.billDetail;
var billTotal = responseObject.billTotal;
var total = response.billDetail.rate * response.billDetail.qty;
// Add Items to the bill failed
if (response.status != "success") {
getSystemMessage(ADD_ITEM_TO_PRINTED_BILL);
return;
}
billItemClone.attr('itemId', responseObject.itemId);
billItemClone.attr('billDetailId', responseObject.billDetailId);
billItemClone.find('.bill-item-name').text(
responseObject.itemName);
billItemClone.find('.bill-item-rate span').text(
responseObject.rate.toFixed(2));
billItemClone.find('.bill-item-amount').text(
total.toFixed(2));
billItemClone.find('.bill-item-qty span').text(responseObject.qty);
if (responseObject.kotBotNo != null) {
billItemClone.find('.kot-bot-num').text(
responseObject.kotBotNo);
}
billItemClone.draggable( {
revert : false,
addClasses : false,
zIndex : 1,
containment : "window",
opacity : 0.5,
cursor : "move",
scroll : false,
helper : function() {
return $(this).clone().appendTo('body').show();
}
});
if (isDoubleClick == true
&& (doubleClickedItem != undefined
|| doubleClickedItem != null || doubelClickedItem != "")) {
billItemClone.find('.bill-item-img img').attr('src',
$(doubleClickedItem).css('background-image'));
} else if (isDoubleClick == false
&& (draggableHelper != undefined
|| drdraggableHelper != null || draggableHelper != "")) {
billItemClone.find('.bill-item-img img').attr('src',
draggableHelper.css('background-image'));
}
if (catchElement.height() > 300) {
catchElement.css('overflow-y', 'scroll');
catchElement.css('height', '320px');
}
if (catchElement.find('.bill-item').length == 0) {
billItemClone.insertBefore(
catchElement.find('.item-drop-point')).hide()
.fadeIn("slow");
} else {
billItemClone.insertBefore(
catchElement.find('.bill-item').first()).hide()
.fadeIn("slow");
}
catchElement.parent().find('.amount')
.html(billTotal.toFixed(2));
if (draggableHelper != undefined || draggableHelper != null) {
draggableHelper.hide('fade', function() {
draggableHelper.remove()
});
}
$('.item-drop-point').removeClass('item-drop-hover');
},false);
}
/**
*
* Function for ajax calls - url : webservice url - type : ajax call type - data :
* data that needs to be passed - callback : function that needs to be executed
*
* when ajax call succeed
*
* @param url
* @param type
* @param data
* @param callback
*/
function ajaxCall(url, type, data, callback,async){
// Assign default value to async if its not specified
if (async===undefined) async = true;
$.ajax({
url: url,
type: type,
data: data,
dataType : "json",
cache: false,
beforeSend: function(x){
if(x && x.overrideMimeType){
x.overrideMimeType("application/json;charset=UTF-8");
}
},
async : async,
success:callback
});
}
関数が反復されるため、ajax 呼び出しも反復されます。ブレークポイントを使用して反復を追跡しましたが、クリックイベントの時点から、最初のクリックイベントの後にトリガーされた場所を特定できませんでした。関数を反復させるコードに何か問題がありますか。助けてください。