Я не лучший программист в мире, поэтому малейшие вещи заставят меня споткнуться. Я почти уверен, что этот вопрос задавался раньше, но то, что я обнаружил, у меня не сработало (или, возможно, я просто понятия не имею!).
Итак, я только начал использовать sweetalert2 для объединения с моими существующими функциями jquery (которые уже довольно давно успешно используются). Я могу заставить все в sweetalert2 работать и мои существующие обратные вызовы jquery работать ... но не вместе. По сути, порядок событий будет следующим: нажмите кнопку «Удалить» -> откроется модальное окно -> нажмите «Подтвердить» -> «Обработать удаление изображения» -> «Закрыть модальное окно» -> «Скрыть миниатюру изображения» -> жизнь в порядке. В качестве альтернативы порядок закрытия модального окна и скрытия эскиза можно поменять местами.
Урезанный HTML:
<div class="recordC">
<div><a data-fancybox="image_group" href="a/ path" class="showGalImg" ><img src="path/ to/ thumbnail-image"/></a></div>
<li><a id="del-10792-01522" href="#" class="delbuttonC" >DELETE</a></li>
</div>
Обратите внимание, что идентификаторы генерируются динамически и существует несколько div.recordC (по одному для каждого изображения)
Jquery / sweetalert2:
$('.delbuttonC').click(function() {
var del_id = $(this).attr("id");
var photoId = 'id=' + del_id;
deletePhoto(photoId);
e.preventDefault();
});
function deletePhoto(photoId) {
swal({
title: "Are you sure?",
text: "Are you sure you want to delete this photo?",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "Yes, delete it!",
cancelButtonColor: '#d33',
confirmButtonColor: "#3085d6 ",
preConfirm: function() {
return new Promise(function(resolve) {
$.ajax({
url: "path/ to/ delete/ function",
type: "GET",
data: photoId,
success: function() {
swal({
title: 'Deleted!',
text: 'Your file has been deleted!',
type: 'success'}).then(function () {
$(this).parents(".recordC").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
});
} // success:
}); // $.ajax
}); // Promise()
}, // preConfirm:
}); // swal
} // deletePhoto
Откроется модальное окно, $ .ajax работает и sweetalert2 успешно работает. В моей исходной функции jquery обратный вызов также работает после удаления изображения. Но черт возьми, если я смогу заставить его работать с swal ().
Я также пробовал:
success: function() {
swal('Deleted!', 'Your file has been deleted!', 'success');
$(this).parents(".recordC").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
и я поменял местами порядок двух обратных вызовов, а также переместил свой обратный вызов после выполнения $ .ajax (где он находится в моей текущей версии, которая работает). Я также изменил $ (this) на $ ("#" + del_id) ... и многое другое. Все эти перестановки возникли в результате различных вопросов, задаваемых в Интернете! При каждом изменении, которое я делаю, все с sweetalert2 работает, и мне удается удалить изображение ... Мне просто не удается скрыть div.recordC. Я знаю, что должен быть очень простой ответ, который я не могу понять :-(