Вопрос или проблема
Я хочу показать сообщение об успешном удалении, используя toastr.js, когда любой пользователь нажимает на кнопку удаления. Сначала появляется предупреждение, поэтому я использую sweetalert2.js, но после подтверждения удаления в sweetalert2.js, удаляется только категория, но успешное сообщение не отображается в toastr.js, вместо этого появляется ошибка: Uncaught ReferenceError: toastr не определен
В CategoryController:
#region API CALLS
// https://localhost:7230/Admin/Category/getall => чтобы получить все свойства категории в json для использования в datatable
[HttpGet]
public IActionResult GetAll()
{
List<Category> objCategoryList = _unitOfWork.Category.GetAll().ToList();
return Json(new { data = objCategoryList });
}
[HttpDelete]
public IActionResult Delete(Guid? id)
{
if (!id.HasValue)
{
return Json(new { success = false, message = "Недействительный ID" });
}
var categoryToBeDeleted = _unitOfWork.Category.Get(category => category.Id == id.Value);
if (categoryToBeDeleted == null)
{
TempData["error"] = "Категория не найдена или уже удалена.";
return Json(new { success = false, message = "Ошибка при удалении" });
}
_unitOfWork.Category.Remove(categoryToBeDeleted);
_unitOfWork.Save();
return Json(new { success = true, message = "Категория успешно удалена" });
}
#endregion
В Index.cshtml:
@model IEnumerable<Category>
<div class="container mt-4">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">Данные категорий</h5>
<a asp-controller="Category" asp-action="Upsert" class="btn btn-primary" style="box-shadow: none" data-bs-toggle="modal" data-bs-target="#categoryModal">
<i class="fas fa-plus-circle"></i> Добавить категорию
</a>
<!-- Модальное окно для создания/обновления категории -->
<div class="modal fade" id="categoryModal" tabindex="-1" aria-labelledby="categoryModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<form asp-controller="Category" asp-action="Upsert" method="post">
<div class="modal-header">
<h5 class="modal-title" id="categoryModalLabel">
@if (TempData["CategoryId"] != null)
{
<span>Редактировать категорию</span>
}
else
{
<span>Добавить новую категорию</span>
}
</h5>
<button type="button" style="box-shadow: none" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
</div>
<div class="modal-body">
<!-- Скрытое поле для Id -->
<input type="hidden" id="Id" name="Id" value="@(TempData["CategoryId"] ?? Guid.Empty.ToString())" />
<div class="mb-3">
<label for="CategoryName" class="form-label fw-bold ms-1">Название категории</label>
<input type="text" class="form-control" id="CategoryName" name="CategoryName"
value="@TempData["CategoryName"]" required placeholder="Название категории" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
<button type="submit" class="btn btn-success">Сохранить</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="card-body">
<table id="tableData" class="table table-bordered table-striped" style="width: 100%">
<thead class="thead-light">
<tr>
<th>№</th>
<th>Название категории</th>
<th>Создано в</th>
<th>Действие</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
@section Scripts {
<script src="~/js/category.js"></script>
}
В category.js:
$(function () {
loadDataTable();
});
var dataTable;
function loadDataTable() {
dataTable = $('#tableData').DataTable({
"ajax": { url: '/admin/category/getall' },
"columns": [
{
"data": null, // Колонка серийного номера
"render": function (data, type, row, meta) {
return meta.row + 1; // Отображение индекса строки + 1 для серийного номера
},
"width": "10%"
},
{ data: 'categoryName', "width": "30%" },
{ data: 'createdAt', "width": "25%" },
//{ data: 'id', "width": "15%" },
{
data: 'id',
"render": function (data) {
return `<div class="d-flex justify-content-center">
<div class="w-75 btn-group" role="group">
<a href="/admin/category/upsert?id=${data}"
class="btn btn-warning text-white me-2" style="box-shadow:none" data-bs-toggle="modal" data-bs-target="#categoryModal">
<i class="fas fa-edit"></i> Редактировать
</a>
<a onClick="Delete('/admin/category/delete/${data}')"
class="btn btn-danger ms-2" style="box-shadow:none">
<i class="fas fa-trash"></i> Удалить
</a>
</div>
</div>
`
},
"width": "35%"
}
],
"columnDefs": [
{ "className": "dt-left", "targets": 0 } // Применить левое выравнивание к колонке серийного номера (первой колонке)
]
});
}
function Delete(url) {
Swal.fire({
title: "Вы уверены?",
text: "Вы не сможете отменить это!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Да, удалить!"
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: url,
type: 'DELETE',
success: function (data) {
/*перезагрузить страницу после удаления*/
dataTable.ajax.reload();
//Ошибка: Uncaught ReferenceError: toastr не определен
toastr.success(data.message);
}
});
}
});
}
Ошибка:
Uncaught ReferenceError: toastr не определен
at Object.success (category.js:65:21)
at c (jquery.min.js:2:28327)
at Object.fireWith [as resolveWith] (jquery.min.js:2:29072)
at l (jquery.min.js:2:79901)
at XMLHttpRequest.<anonymous> (jquery.min.js:2:82355)
Ответ или решение
Решение проблемы с интеграцией toastr.js и sweetalert2.js при удалении категории
Описание проблемы
Вы столкнулись с ошибкой Uncaught ReferenceError: toastr is not defined
, которая возникает при попытке использовать библиотеку toastr.js
для отображения сообщения об успешном удалении категории после подтверждения этого действия через sweetalert2.js
. Несмотря на успешное удаление категории с помощью AJAX-запроса, всплывающее уведомление не отображается.
Анализ причин возникновения ошибки
-
Отсутствие библиотеки toastr.js в проекте: Прежде всего, следует убедиться, что библиотека
toastr.js
корректно подключена к вашему проекту. Без этого скрипт не будет определен, что и вызывает вышеуказанную ошибку. -
Порядок подключения скриптов: Убедитесь, что все скрипты загружаются в правильном порядке. Библиотека
toastr.js
должна быть загружена после jQuery, но перед вашим пользовательским скриптомcategory.js
. Если порядок нарушен, это также может привести к ошибке. -
Проверка синтаксиса и путей: Убедитесь, что пути к скриптам и стилям указаны верно.
Решение проблемы
-
Добавление библиотеки toastr.js: Убедитесь, что в вашем
Index.cshtml
добавлены ссылки на стили и скриптыtoastr.js
. Например:<link href="~/lib/toastr/toastr.min.css" rel="stylesheet" /> <script src="~/lib/toastr/toastr.min.js"></script>
-
Проверка порядка скриптов:
Убедитесь, что порядок подключения скриптов выглядит следующим образом:<script src="~/lib/jquery/jquery.min.js"></script> <script src="~/lib/toastr/toastr.min.js"></script> <script src="~/js/category.js"></script>
Это гарантирует, что
toastr.js
будет готов к использованию вcategory.js
. -
Инициализация toastr: Вы можете инициализировать toastr с необходимыми настройками. Например:
toastr.options = { "closeButton": true, "debug": false, "newestOnTop": false, "progressBar": true, "positionClass": "toast-top-right", "preventDuplicates": false, "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "5000", "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" };
-
Проверка вызова toastr в AJAX: Убедитесь, что вы вызываете
toastr.success(data.message)
только при успешном удалении. Например:success: function (data) { if (data.success) { dataTable.ajax.reload(); toastr.success(data.message); } else { toastr.error(data.message); // Показать сообщение об ошибке в случае неудачи } }
Заключение
Следуя вышеприведенным рекомендациям, вы сможете устранить проблему с отображением уведомлений в интерфейсе вашего приложения. Убедитесь, что все библиотеки подключены правильно и тестируйте функционал удаления категории, проверяя при этом логи в консоли на наличие ошибок. Если ошибка все еще остается, возможно, стоит очистить кэш браузера или проверить другие файловые зависимости вашего проекта.
Эти шаги не только помогут вам решить текущую проблему, но и улучшат общий опыт работы с уведомлениями в вашем приложении. Если у вас остались вопросы или требуется дополнительная помощь, не стесняйтесь обращаться!