mise a jour DOM page modifier categorie

This commit is contained in:
ben
2025-12-11 16:34:46 +01:00
parent 74a04ea355
commit 63592a114d
5 changed files with 27 additions and 45 deletions

View File

@@ -144,7 +144,7 @@
</div>
<script src="../js/ajouter_article.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
@@ -158,27 +158,9 @@ tinymce.init({
</script>
</body>
</html>
<!--ClassicEditor
.create(document.querySelector('#articleContent'), {
language: 'fr',
toolbar: [
'heading',
'bold', 'italic',
'bulletedList', 'numberedList',
'undo', 'redo'
]
})
.catch(error => {
console.error(error);
});

View File

@@ -104,7 +104,7 @@
</div>
<script src="../js/ajouter_categorie.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -179,7 +179,7 @@
</script>
<script src="../js/modifier_article.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -5,17 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier une catégorie</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../css/blog.css">
<style>
body {
background: #f4f6f981;
}
.container {
margin: 50px auto;
}
</style>
</head>
<body>
@@ -75,10 +67,7 @@
<div class="container">
<h2 class="mb-5 text-center">Modifier une catégorie</h2>
<div id="errorMsg" class="alert alert-danger d-none">Veuillez ezmplir tous les champs obligatoires</div>
<div id="successMsg" class="alert alert-success d-none">La catégorie a été modifiée avec succès !</div>
<form id="modifierCategorie">
@@ -103,7 +92,7 @@
</div>
<script src="../js/modifier_categorie.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

View File

@@ -1,25 +1,36 @@
const form = document.getElementById("modifierCategorie");
const nameField = document.getElementById("categoryName");
const descField = document.getElementById("categorieDescription");
const errorMsg = document.getElementById("errorMsg");
const successMsg = document.getElementById("successMsg");
// Fonction pour afficher un message Bootstrap
function showMessage(type, message) {
// Création de l'alert
const alert = document.createElement("div");
alert.className = `alert alert-${type} mt-3`;
alert.textContent = message;
// Ajout en haut du formulaire
form.prepend(alert);
// Suppression automatique après 2 secondes
setTimeout(() => {
alert.remove();
}, 2000);
}
form.addEventListener("submit", function (e) {
e.preventDefault();
// Vérification des champs obligatoires
if (nameField.value.trim() === "" || descField.value.trim() === "") {
errorMsg.classList.remove("d-none");
successMsg.classList.add("d-none");
showMessage("danger", "Veuillez remplir tous les champs obligatoires");
return;
}
// Succès
errorMsg.classList.add("d-none");
successMsg.classList.remove("d-none");
// Message succès
showMessage("success", "La catégorie a été modifiée avec succès !");
// Redirection après succès
// Redirection après succès
setTimeout(() => {
window.location.href = "../html/accueil_blog.html";
}, 1500);