rad11
Reputation: 1561
Unexpected duplicates ajax call after click
When I click .add button which is added dynamicly I call ajax to make a select from data but when I m in first module and click is okey , but when next I go to second module and click I`v got duplicates ajax call and added more that one filter I dont know where I do a mistake so please help me to resolve it
Here`s code:
One module:
$(document).ready(function () {
$("select").select2();
var $toggleColumns = $('.toggleColumns');
var datatableName = "list";
var $body = $("body");
var URL = 'xxx';
var columns = [
{'data': 'title', 'class': "datatable-row-title"},
{'class': '',
'orderable': false,
"mData": "comment_type_value", "mRender": function (data, type, full) {
if (data > 0) {
return '<label class="details-control" style="width:100%; height:100%;"> ' + translate('t_expand_comment_type_down') + ' </label>';
} else {
return "";
}
},
},
{'mData': 'item', "mRender": function (data, type, full) {
return data;
}},
{'data': 'seller'},
{'data': 'buyer'},
{'data': 'cat'},
{'data': 'comment_type'},
{'data': 'startts'},
{'data': 'endts'},
{'data': 'ts'},
{'data': 'price'},
{'data': 'qty'},
{'data': 'sales'},
];
var order = [];
<?php if (isset($_GET["filters"])): ?>
URL_TMP = URL;
URL_TMP += "?insert=false";
getAjaxDatatable(datatableName, URL_TMP, columns, order, "transaction");
URL_TMP = "";
<?php else: ?>
getButtonsAfterAdded();
$body.on("click", ".toggleColumnsButton", function (e) {
$("#columnsContainer").toggle("slow");
return false;
});
$body.on("click", ".remove", function (e) {
e.preventDefault();
$(this).parent().parent().remove();
getButtonsAfterRemove();
if ($("#list tbody tr").length > 0) {
var validate = validateTransaction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
loader.popup("hide");
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "transaction");
}
resetSelect2();
});
$body.on("change", ".commentType", function () {
if ($("#list tbody tr").length > 0) {
getAjaxDatatable(datatableName, URL, columns, order, "transaction");
}
});
$body.on("change", ".categories", function () {
if ($("#list tbody tr").length > 0) {
getAjaxDatatable(datatableName, URL, columns, order, "transaction");
}
});
$body.on('click', ".add", function (e) {
e.preventDefault();
var filterID = $(this).parent().prev().find("option:selected").attr("data-filteroptionid");
$(".filters").append(filtersHTMLTransactionSelect(filterID));
var filterId = $(".filter:last-child .chooseFilter option:not(:disabled)").attr("data-filterOptionId");
$(".filter").last().prepend("<div class='col-sm-4 form-group sibling'>" + filtersHTMLTransactionValues(filterId) + "</div>");
$(".filter").last().append(getCollectionOfButtons());
resetSelect2();
transactionDatepicker();
getButtonsAfterAdded();
});
$body.on("keypress", function (e) {
if (e.keyCode == 13) {
loader.popup("show");
var validate = validateTransaction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
loader.popup("hide");
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "transaction");
}
});
$body.on('click', ".search", function (e) {
e.preventDefault();
var validate = validateTransaction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "transaction");
});
$toggleColumns.on('click', function (e) {
var column = $('#' + datatableName).DataTable().column($(this).attr('data-column'));
column.visible(!column.visible());
});
$(".csv").on("click", function (e) {
e.preventDefault();
var validate = validateTransaction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
$.ajax({
method: "POST",
url: "xxxx",
dataType: "JSON",
data: {
filters: getActiveFiltersTransaction(),
format: 1,
module_id: <?php echo \kontrola\TransactionActions::$MODULE_ID; ?>
},
success: function (response) {
getAccessMessageWithStatusDataTable(response);
getUses();
$.gritter.add({
title: translate('gritter_title_raports'),
text: $("#waitingTimeForFile").html(),
class_name: 'success'
});
$("[data-controller-name=raportsDownloaded]").css({
"color": "red"
});
setTimeout(function () {
$(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
color: "#505b72"
});
$.gritter.removeAll();
}, 15000);
}
});
});
$(".xls").on("click", function (e) {
e.preventDefault();
var validate = validateTransaction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
$.ajax({
method: "POST",
url: "xxx",
dataType: "JSON",
data: {
filters: getActiveFiltersTransaction(),
format: 0,
module_id: <?php echo \kontrola\TransactionActions::$MODULE_ID; ?>
},
success: function (response) {
getAccessMessageWithStatusDataTable(response);
getUses();
$.gritter.add({
title: translate('gritter_title_raports'),
text: $("#waitingTimeForFile").html(),
class_name: 'success'
});
$("[data-controller-name=raportsDownloaded]").css({
"color": "red"
});
setTimeout(function () {
$(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
color: "#505b72"
});
$.gritter.removeAll();
}, 15000);
}
});
});
$body.on("click", "#raportsScroll", function (e) {
e.preventDefault();
var top = $("[data-controller-name=raportsDownloaded]").offset().top;
top = 241 - 65;
$('html, body').animate({
scrollTop: top
}, 1000);
});
$body.on("change", ".chooseFilter", function () {
var filterId = $(this).find(":selected").attr("data-filterOptionId");
$(this).parent().prev().html(filtersHTMLTransactionValues(filterId));
// transactionDefaultStateOptions();
transactionDatepicker();
resetSelect2();
});
<?php endif; ?>
});
Another module:
$(document).ready(function () {
$("select").select2();
var $toggleColumns = $('.toggleColumns');
var datatableName = "list";
var $body = $("body");
var URL = 'xxx';
var columns = [
{'data': 'title', 'class': "datatable-row-title"},
{'mData': 'item', "mRender": function (data, type, full) {
return data;
}},
{'data': 'price'},
{'data': 'qty'},
{'data': 'user'},
{'data': 'cat'},
{'data': 'startts'},
{'data': 'endts'}
];
var order = [];
getButtonsAfterAdded();
<?php if (isset($_GET["filters"])): ?>
URL_TMP = URL;
URL_TMP += "?insert=false";
getAjaxDatatable(datatableName, URL_TMP, columns, order, "auction");
URL_TMP = "";
<?php else: ?>
$body.on("click", ".toggleColumnsButton", function (e) {
$("#columnsContainer").toggle("slow");
return false;
});
$body.on("click", ".remove", function (e) {
e.preventDefault();
$(this).parent().parent().remove();
getButtonsAfterRemove();
if ($("#list tbody tr").length > 0) {
var validate = validateAuction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
loader.popup("hide");
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "auction");
}
$("select").select2("destroy");
$("select").select2();
});
$body.on("change", ".commentType", function () {
if ($("#list tbody tr").length > 0) {
getAjaxDatatable(datatableName, URL, columns, order, "auction");
}
});
$body.on("change", ".categories", function () {
if ($("#list tbody tr").length > 0) {
getAjaxDatatable(datatableName, URL, columns, order, "auction");
}
});
$body.on('click', ".add", function (e) {
e.preventDefault();
var filterID = $(this).parent().prev().find("option:selected").attr("data-filteroptionid");
$(".filters").append(filtersHTMLAuctionSelect(filterID));
var filterId = $(".filter:last-child .chooseFilter option:not(:disabled)").attr("data-filterOptionId");
$(".filter").last().prepend("<div class='col-sm-4 form-group sibling'>" + filtersHTMLAuctionValues(filterId) + "</div>");
$(".filter").last().append(getCollectionOfButtons());
$("select").select2("destroy");
$("select").select2();
auctionDatepicker();
getButtonsAfterAdded();
});
$body.on("keypress", function (e) {
if (e.keyCode == 13) {
loader.popup("show");
var validate = validateAuction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
loader.popup("hide");
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "auction");
}
});
$body.on('click', ".search", function (e) {
e.preventDefault();
var validate = validateAuction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "auction");
});
$toggleColumns.on('click', function (e) {
var column = $('#' + datatableName).DataTable().column($(this).attr('data-column'));
column.visible(!column.visible());
});
$(".csv").on("click", function (e) {
e.preventDefault();
var validate = validateAuction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
$.ajax({
method: "POST",
url: "xxx",
dataType: "JSON",
data: {
filters: getActiveFiltersAuction(),
format: 1,
module_id: <?php echo \kontrola\AuctionActions::$MODULE_ID; ?>
},
success: function (response) {
getAccessMessageWithStatusDataTable(response);
getUses();
$.gritter.add({
title: translate('gritter_title_raports'),
text: $("#waitingTimeForFile").html(),
class_name: 'success'
});
$("[data-controller-name=raportsDownloaded]").css({
"color": "red"
});
setTimeout(function () {
$(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
color: "#505b72"
});
$.gritter.removeAll();
}, 15000);
}
});
});
$(".xls").on("click", function (e) {
e.preventDefault();
var validate = validateAuction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
$.ajax({
method: "POST",
url: "xxxx",
dataType: "JSON",
data: {
filters: getActiveFiltersAuction(),
format: 0,
module_id: <?php echo \kontrola\AuctionActions::$MODULE_ID; ?>
},
success: function (response) {
getAccessMessageWithStatusDataTable(response);
getUses();
$.gritter.add({
title: translate('gritter_title_raports'),
text: $("#waitingTimeForFile").html(),
class_name: 'success'
});
$("[data-controller-name=raportsDownloaded]").css({
"color": "red"
});
setTimeout(function () {
$(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
color: "#505b72"
});
$.gritter.removeAll();
}, 15000);
}
});
});
$body.on("click", "#raportsScroll", function (e) {
e.preventDefault();
var top = $("[data-controller-name=raportsDownloaded]").offset().top;
top = 241 - 65;
$('html, body').animate({
scrollTop: top
}, 1000);
});
$body.on("change", ".chooseFilter", function () {
var filterId = $(this).find(":selected").attr("data-filterOptionId");
$(this).parent().prev().html(filtersHTMLAuctionValues(filterId));
auctionDefaultStateOptions();
auctionDatepicker();
$("select").select2("destroy");
$("select").select2();
});
<?php endif; ?>
});
<?php endif; ?>
Ajax call function looks like:
function filtersHTMLAuctionSelect() {
var filters = "";
$.ajax({
method: "POST",
url: "xxxxx",
dataType: "JSON",
async: false,
success: function (response) {
filters += "<div class='filter'><div class='col-sm-4 form-group'>";
filters += "<select class='form-control chooseFilter' style='width: 100%;'>";
$.each(response, function (index, value) {
filters += "<option data-filterOptionId=" + value.id + ">" + translate(value.title) + "</option>";
});
filters += "</select>";
}
});
filters += "</div></div>";
return filters;
}
Okey I resolve problem by added that to buttons added dynamicly:
$body.off('click', '#add').on('click', "#add", function (e) {
$body.off('click', '#search').on('click', "#add", function (e) {
It work for me.
HTML group of buttons:
<div class="col-sm-4 form-group">
<div class="col-lg-3"></div>
<div class="col-lg-1"></div>
<button class="add btn btn-success btn-quirk col-sm-3" id="add"><i class="glyphicon glyphicon-plus"></i></button>
<div class="col-lg-1"></div>
<button class="search btn btn-warning btn-quirk col-sm-3" id="search"><i class="glyphicon glyphicon-search"></i></button>
</div>
Upvotes: 2
Views: 1868
Answers (2)
Afshan Shujat
Reputation: 551
sometimes this issue appears if we make a ajax call on an element that contain children inside it and function call repeatedly for children also. And try thanpa solution - $('#add').on('click', function (e) {
Upvotes: 0
Thanasis Pap
Reputation: 2051
Maybe you need to stop propagation as well, this might be an issue of bubbling.
So when you call
e.preventDefault();
also call stop propagation which will make your code look like this:
e.preventDefault();
e.stopPropagation();
You can read more here: https://api.jquery.com/event.stoppropagation/
EDIT:
Another thing that might go wrong is here:
$body.on('click', "#add", function (e) {
Try using
$('#add').on('click', function (e) {
Upvotes: 1
Related Questions
- How do I return the response from an asynchronous call?
- What is the difference between call and apply?
- jQuery AJAX submit form
- Abort Ajax requests using jQuery
- How to check if element is visible after scrolling?
- Stop setInterval call in JavaScript
- How do I detect a click outside an element?
- How to manage a redirect request after a jQuery Ajax call
- How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?