Давайте представим, что у меня есть страница, где все мои проекты перечислены в таблице:
ID | ИМЯ ПРОЕКТА | ПРОЕКТНАЯ ССЫЛКА
1 Проект 1 | (КНОПКА)
2 Проект 2 | (КНОПКА)
3 Проект 3 | (КНОПКА)
Теперь в момент нажатия (КНОПКА) для Project 1 Я запускаю этот JavaScript код:
// on button click opening modal window
$(".modal-button").on('click', function () {
let button = $(this);
const id = button.attr('data-id');
// calling backend to get details necessary for modal popup
$.ajax({
url: "/project?id=" + id,
type: "get",
success: function(response){
if(!response.result){
if(response.error === 'expired'){
$('.expired').show();
} else {
alert(response.error);
}
}
let url = response.url;
let modal = document.getElementById("project-modal");
let span = document.getElementsByClassName("close")[0];
// showing modal popup
$('.copied-text').hide();
$('.expiration-changed').hide();
$('#project-modal').show();
// inserting link to disabled input field
$("#link").val(url);
$("#logo-link").val(response.project_url);
$("#expiration-date").val(response.expiration_date);
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
$('#project-modal').hide()
};
// adding close button
$("#share-close-btn").on('click', function(){
$('#project-modal').hide()
});
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
$('#project-modal').hide()
}
};
}
});
$("#date").datepicker({
dateFormat: "yy-mm-dd"
});
// modal button to send new data
$("#copy-btn").on('click', function(){
$('#link').select();
document.execCommand("copy");
this.focus();
let img_url = $("#logo-link").val();
let request_data = {"id": id, "img_url": img_url};
$.ajax({
url: "/projects",
type: "post",
contentType:"application/json",
data: JSON.stringify(request_data),
success: function(response){
if(!response.result){
alert(response.error);
}
}
});
$('.expiration-changed').hide();
$('.copied-text').show();
});
});
Теперь код JS, это в основном показывает $('#project-modal').show(); мое скрытое модальное окно (как это было изначально с style="disabled: disabled;"), первым делом я вызываю back-end, чтобы получить данные проекта по идентификатору, который я получаю от нажатой кнопки (в данном случае ID = 1), с помощью которого Я знаю, какой проект я обновляю.
Когда мне нужно обновить серверную часть новыми данными, и я делаю это впервые на вновь загруженной странице, нажмите $("#copy-btn").on('click', function(){, чтобы отправить новые данные на сервер. конец, он работает нормально, отправляет только 1 POST запрос на сервер и корректно его обновляет.
Но после закрытия (скрытия) Project 1 модальное окно $('#project-modal').hide(); и открытия другого Project 2 модальное окно и отправка обновления $("#copy-btn").on('click', function(){ на сервер с ID=2 по какой-то причине с этим я отправляю ему 2 запроса. 1-й запрос с ID=2 и 2-й запрос с ID=2.
Как я могу обработать несколько открытий модального окна без отправки нескольких запросов с сгенерированным ранее открытым модальным окном ID?
Должен ли я создать модальное окно на лету и не скрывать его, а уничтожить / удалить? Или мой JavaScript код неверен и как его улучшить? Или я все делаю не так?
Если вам нужна дополнительная информация по этому вопросу, пожалуйста, спросите, я обновлю вопрос. Спасибо!