#javascript #php #html #sweetalert2
#javascript #php #HTML #sweetalert2
Вопрос:
Заявление
Сначала я попытался создать окно подтверждения, используя bootstrap modal, но это довольно сложно и сложно спроектировать. Позже, когда я просматривал веб-страницы в поисках некоторых идей, я нашел Sweetalert2.
Итак, я хотел бы создать окно подтверждения перед удалением с помощью Sweetalert2 (https://sweetalert2.github.io /), который я только что обнаружил сегодня (20/4/19) и обнаружил, что он действительно потрясающий.
Что я пробовал до сих пор
В разделе A, где расположена кнопка удаления, из следующего кода окно не появилось, и вместо этого нужно выполнить действие удаления.
Front.php
<html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!--Sweetalert2 css and js files-->
<link rel="stylesheet" href="sweetalert2.min.css">
<script type="text/javascript" src="sweetalert2.min.js"></script>
<body>
<!--Table-->
<div class="table-responsive">
<table class="table table-hover table-fixed w-auto" border="2" align="center" style="color: white">
<!--Header-->
<thead>
<tr>
<th><center>ID</center></th>
<th><center>Type</center></th>
<th><center>URL</center></th>
<th><center>Issued date</center></th>
<th><center>Lattitude</center></th>
<th><center>Longitude</center></th>
<th colspan="2"><center>Action</center></th>
</tr>
</thead>
<!--Queries-->
<?php
for($i=0;$i<count($results->data);$i ):
$news = $results->data[$i];
?>
<tbody>
<tr>
<td><b><?php echo $news['crimenews_id'];?></b></td>
<td><?php echo $news['crimenews_cat'];?></td>
<td><?php echo $news['crimenews_url'];?></td>
<td><?php echo $news['crimenews_datetime'];?></td>
<td><?php echo $news['crimenews_locationLat'];?></td>
<td><?php echo $news['crimenews_locationLong'];?></td>
<td>
<a href="front.php?edit_id=<?php echo $news['crimenews_id'];?>" class="btn btn-info" style="border:2px solid black"><b>Editamp;emsp;amp;ensp;<i class="far fa-edit"></i></b></a>
<!-------------------------------------Section A-------------------------------------------------------------------------------------------------------------------------------------------------->
<a href="process.php?delete_id=<?php echo $news['crimenews_id'];?>" class="btn btn-danger" id="Test" style="border:2px solid black;"><b>Deleteamp;ensp;<i class="fas fa-trash-alt"></i></b></a>
<!-------------------------------------End Section A---------------------------------------------------------------------------------------------------------------------------------------------->
</td>
</tr>
</tbody>
<?php endfor ?>
</table>
</div>
</body>
</html>
<script>
$('#Test').click(function(e) // I do not sure about this line
{
e.preventDefault();
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
allowOutsideClick : true,
allowEscapeKey : true,
confirmButtonColor: 'btn btn-primary',
cancelButtonColor: 'btn btn-danger',
confirmButtonText: 'Sure'
})
})
</script>
Комментарии:
1. Привет, так в чем, собственно, вопрос?
2. Создайте окно подтверждения перед удалением действия с помощью Sweetalert2 в разделе A.
3. Это не вопрос. Это просьба к кому-то сделать это за вас, судя по всему, ваша третья такая просьба сегодня
4. Ну, из моего кода, почему это не сработало? Я новичок в использовании SweetAlert2, и я не очень разбираюсь в синтаксисе, но я хотел бы попробовать, потому что это действительно потрясающий дизайн и выглядит интересно.
Ответ №1:
Вот живая демонстрация: Codepen demo
Во-первых, убедитесь, что вы не дублируете идентификаторы html -> использовать class="" вместо id="" для похожих элементов:
<!-- OLD:
<a href="process.php?delete_id=<?php echo $news['crimenews_id'];?>" class="btn btn-danger" id="Test" style="border:2px solid black;"><b>Deleteamp;ensp;<i class="fas fa-trash-alt"></i></b></a>
-->
<!-- new: -->
<a href="#" data-target="<?php echo $news['crimenews_id'];?>" class="prompt-delete btn btn-danger" style="border:2px solid black;"><b>Deleteamp;ensp;<i class="fas fa-trash-alt"></i></b></a>
Обратите внимание, чтобы быть уверенным, что будет использоваться окно подтверждения, я изменил значение href на # и поместил атрибут crimenews_id into data- . Затем обновите свой скрипт, чтобы запрашивать пользователя перед удалением элемента:
<script>
$(".prompt-delete").click(function() {
// get the target id to delete
var target_id = $(this).data("target");
// prepare the url to redirect in case of deleting an item
var url_delete = "process.php?process.php?delete_id=" target_id;
// initialize confirmation box
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
type: "warning",
showCancelButton: true,
allowOutsideClick: true,
allowEscapeKey: true,
confirmButtonColor: "btn btn-primary",
cancelButtonColor: "btn btn-danger",
confirmButtonText: "Sure",
onClose: function(e) {
console.log(e);
}
}).then(result => {
if (result.value) {
// if CONFIRMED => go to delete url
window.location = url_delete;
}
});
});
</script>
Комментарии:
1. Окно по-прежнему не всплывает :/
Ответ №2:
Из ответа @verjas, в котором есть некоторые синтаксические ошибки, поэтому я попытался заставить его работать, и это выглядит так…
<a href="javascript:void(0)" data-id="<?php echo $news['crimenews_id'];?>" class="btn btn-danger remove" style="border:2px solid black;font-size:1em"><b><i class="fas fa-trash-alt"></i></b></a>
<script>
$(".remove").click(function()
{
var num = $(this).data("id");
var url = "process.php?delete_id=" num;
Swal.fire({
titleText: "Are you sure for deleting this?",
text: "This action cannot be reverted.",
type: 'warning',
showCancelButton: true,
showCloseButton : true, //Close button at the top-right corner.
allowEscapeKey : true, //Press ESC to cancel
focusCancel : true, //Prevent unexpected delete due to mistakes.
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Sure',
}).then(result =>
{
if(result.value)
{
window.location = url_delete;
}
});
});
</script>