2
klicken Wenn ich .add Schaltfläche klicken, die dynamicly hinzugefügt I Ajax-Aufruf eine Auswahl von Daten zu machen, aber wenn ich bin in erster Modul und klicken okey, aber wenn nächstes gehe ich mit dem zweiten Modul und klicken I`v bekam ajax-Aufruf Duplikate und hinzugefügt mehr, dass ein Filter ich weiß nicht, wo ich einen Fehler tun mir bitte so helfen sieUnerwartete Duplikate nach Ajax-Aufruf
Hier `s Code zu beheben:
ein Modul:
$(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; ?>
});
Ein weiteres Modul:
$(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-Aufruf Funktion wie folgt aussieht:
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 Problem lösen, indem Sie fügte hinzu, dass dynamicly zu Schaltflächen hinzugefügt:
$body.off('click', '#add').on('click', "#add", function (e) {
$body.off('click', '#search').on('click', "#add", function (e) {
Es ist für mich arbeiten.
HTML Gruppe von Schaltflächen:
<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>
Sie sollten 'verwenden id' statt' CLASS'. wenn es mehrere sind aber irgendwie gleichen Ajax fordert bearbeiten – urfusion
nachschlagen I id hinzufügen, aber immer noch die gleiche – rad11
schön php in Javascript :)) – madalinivascu