У меня есть функция в столбцах Datatables, например, так:
{ 'data': 'status',
'fnCreatedCell': function (nTd, sData, oData, iRow, iCol) {
if ((oData.status == null) && (oData.status.status != '10Stat') && (oData.id > 100)) {
var html = '<span class="tipster text-danger" data-toggle="tooltip" data-placement="top" title="Edit branch"><i class="far fa-edit mx-1 text-secondary zindex-tooltip replaceBranch" onclick="replaceBranch(\''+oData.orderId+'\')"></i></span>';
} else {
var html = '<i class="far fa-edit mx-1 lightgray zindex-tooltip"></i>';
}
$(nTd).html(html);
}, 'defaultContent': ''
},
Проблема в том, что функция replaceBranch(), которая вызывается с onclick, повторяется еще раз каждый раз, если при нажатии на значокт.е.при первом всплытии модала вызов ajax выполняется один раз, результат один.Если щелкнуть по другому значку, появится модальное окно, вызов ajax будет выполнен дважды, будет два результата.Если щелкнуть другой значок, появится модальное окно, вызов ajax будет выполнен три раза, и получится три результата.И т. Д.
function replaceBranch(order) {
var mainhtml = '<div class="d-flex my-3"><div class="flex-fill"><h5 class="text-secondary text-left">change branch for order '+order+'</h5></div><div class="flex-fill"></div></div><form onSubmit="return false;"><div class="form-group"><select class="custom-select select5" id="change-country"><option value="" selected>Choose a country...</option></select></div>' + '<div class="form-group"><select class="custom-select select5" id="change-region" disabled><option value="" selected>Choose a region...</option></select></div>' + '<div class="form-group"><select class="custom-select select4" id="change-city" disabled><option value="" selected>Choose a city...</option></select></div>' + '<div class="form-group"><select class="custom-select select4 required" id="change-branch" disabled><option value="" selected>Choose a branch...</option></select></div><div class="input-group mb-3"><input id="branch-input" type="text" class="form-control" placeholder="Branch code" value=""><div class="input-group-append"><button class="btn btn-outline-secondary" type="button" id="branch-load">Find</button></div></div></form>' + '<div id="change-packets-row"></div>';
$.ajaxSetup({
async: true
});
$.ajax({
type: "GET",
url: "http://www.example.com/branches.php?branches",
dataType: "json",
cache: false,
success: function (data) {
$.each(data.countries, function(key, val) {
var html = '<option value="' + key + '">' + val + '</option>';
$(html).appendTo('#change-country');
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
$(document).on('change', '#change-country', function() {
var selectedCountry = $('#change-country option:selected').val();
$("#change-region").prop("disabled", "disabled");
$("#change-region").find('option').not(':first').remove();
$("#change-city").prop("disabled", "disabled");
$("#change-city").find('option').not(':first').remove();
$("#change-branch").prop("disabled", "disabled");
$("#change-branch").find('option').not(':first').remove();
$("#change-result").remove();
if (selectedCountry != '') {
$.ajax({
type: "GET",
url: "http://www.example.com/branches.php?branches&country="+encodeURIComponent(selectedCountry),
dataType: "json",
cache: false,
success: function (country) {
$.each(country, function(key, value) {
var html = '<option value="' + key + '">' + key + '</option>';
$(html).appendTo('#change-region');
});
$("#change-region").removeAttr("disabled");
console.log(country);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
});
$(document).on('change', '#change-region', function() {
var selectedRegion = $('#change-region option:selected').val();
$("#change-city").prop("disabled", "disabled");
$("#change-city").find('option').not(':first').remove();
$("#change-branch").prop("disabled", "disabled");
$("#change-branch").find('option').not(':first').remove();
$("#change-result").remove();
var i = 0;
if (selectedRegion != '') {
$.ajax({
type: "GET",
url: "http://www.example.com/branches.php?branches®ion="+encodeURIComponent(selectedRegion),
dataType: "json",
cache: false,
success: function (region) {
$.each(region, function(key, value) {
var html = '<option value="' + key + '">' + key;
if (value !== null) {
html += ' (' + value + ')';
}
html += '</option>';
$(html).appendTo('#change-city');
});
$("#change-city").removeAttr("disabled");
console.log(region);
i++;
console.log(i);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
});
$(document).on('change', '#change-city', function() {
var selectedCity = $('#change-city option:selected').val();
$("#change-branch").prop("disabled", "disabled");
$("#change-branch").find('option').not(':first').remove();
$("#change-result").remove();
if (selectedCity != '') {
$.ajax({
type: "GET",
url: "http://www.example.com/branches.php?branches&city="+encodeURIComponent(selectedCity),
dataType: "json",
cache: false,
success: function (city) {
city.sort(function(a, b) {
return a.street > b.street;
});
$.each(city, function(key, value) {
var html = '<option value="'+value.id+'">'+value.street+' - '+value.place+'</option>';
$(html).appendTo('#change-branch');
});
$("#change-branch").removeAttr("disabled");
console.log(city);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
});
$(document).on('change', '#change-branch', function() {
var selectedBranch = $('#change-branch option:selected').val();
$('#change-result').remove();
$('#branch-input').val(selectedBranch);
if (selectedBranch != '') {
$.ajax({
type: "GET",
url: "http://www.example.com/branches.php?branches&branch="+encodeURIComponent(selectedBranch),
dataType: "json",
cache: false,
success: function (branch) {
var html = '<div class="col mt-2" id="change-result">';
html += '<h5>'+branch.place+'</h5>';
html += '<p>'+branch.street+', '+branch.city+' '+branch.zip+' (Branch '+branch.id+')</p>';
html += '</div>';
$(html).appendTo('#change-packets-row').hide().fadeIn(1000);
Swal.enableConfirmButton();
console.log(branch);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
});
$(document).on('click', '#branch-load', function() {
var selectedBranch = $('#branch-input').val();
$('#change-result').remove();
if (selectedBranch != '') {
$.ajax({
type: "GET",
url: "http://www.example.com/branches.php?branches&branch="+encodeURIComponent(selectedBranch),
dataType: "json",
cache: false,
success: function (branch) {
var html = '<div class="col mt-2" id="change-result">';
html += '<h5>'+branch.place+'</h5>';
html += '<p>'+branch.street+', '+branch.city+' '+branch.zip+' (Branch '+branch.id+')</p>';
html += '</div>';
$(html).appendTo('#change-packets-row').hide().fadeIn(1000);
Swal.enableConfirmButton();
console.log(html);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
});
Swal.fire({
html: mainhtml,
showCancelButton: true,
confirmButtonText: 'Choose a branch',
cancelButtonText: 'Cancel',
showLoaderOnConfirm: true,
animation: true,
focusConfirm: false,
onOpen: function () {
Swal.disableConfirmButton();
$('.select4').select2({
theme: 'bootstrap4',
minimumResultsForSearch: 20
});
$('.select5').select2({
theme: 'bootstrap4',
minimumResultsForSearch: Infinity
});
},
preConfirm: function() {
var branch = document.getElementById('branch-input').value;
if (branch) {
$.ajax({
url: 'http://www.example.com/packets.php?changeStore',
type: 'GET',
data: {
orderId: order,
newStoreCode: branch
},
success: function(msg) {
Swal.fire({
title: 'OK',
text: 'Branch changed to '+msg.result,
type: 'success'
});
$('#updateAll').click();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
Swal.fire({
title: 'Error!',
html: errorThrown,
type: 'error',
confirmButtonText: 'Close'
})
}
})
}
},
allowOutsideClick: function() {!Swal.isLoading()}
})
}
Функция replaceBranch() находится вне jQuery(document).ready(function($), потому что, iirc, функция не работала, если была помещена внутрь, поскольку таблица данных обычно загружается позже, чем DOM.
Я попытался
onclick="replaceBranch(\''+oData.orderId+'\'); return false;"
, а также добавил
$(".replaceBranch").unbind("click");
в начале функции replaceBranch().Ни одна из них не работает.
Что может быть причиной многократного запуска вызовов ajax?