Cela fonctionne les infos complémentaires souhaitées et la vignette sont affichées.
Problème : Lorsque je vais sur la vignette elle apparait / disparait, apparait / disparait ......., cela du vient du fait du Hover qui charge les infos à chaque fois.
Donc je ne vois comment faire, c'est à dire laisser la vignette fixe lorsque je fais un hover dessus et l'afficher en survolant #tablesForm tr
Bonjour, à deviner comme ça je pense que ta vignette se superpose à la case de ton tableau que tu hover sans pour être un enfant du même tr.
Donc si ta souris est sur la vignette ton hover n'est plus le tr tu as donc ton hide qui peut se faire , et après avoir caché ta vignette le hover repart sur le tr...
Dans l'idée je pense que ton soucis viens de là plus précisément, si c'est le cas du coup si tu as compris normalement si ton #result est un enfant du tr le hover devrait toujours être valide, donc insérer ta balise #result dans ton tr peut être une solution.
Autrement tu places l'évènement de hide sur la vignette elle même au lieu de la mettre sur la sortie du hover du tr.
Changer son évènement car on ne réussit pas techniquement n'est pas une bonne solution ou du moins quand on sait que c'est possible.
Je n'utilises pas jquery mais en regardant rapidement sur google l'impression que toggle est même déprécié dans les versions récentes quoique ici ce n'est pas le soucis.
De ce que je lis de la documentation (qu'il faut lire) tout dépend de l'état d'affichage de base de ton élément , toggle montre un élément si son état de base est display none sinon le cache en le mettant en none, donc je me dis que ton élément result est par défaut affiché au premier click il est caché au lieu d'être montré, si tu te bases sur le click met le donc par défaut en display: none tester.
Pour en revenir à ton soucis car les conseils étaient pour celui ci qu'as tu tenté ?
Pour te faire un exemple en js natif tu peux facilement changer ça avec jquery normalement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<style>
#result{
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 10px;
background-color: #000000;
color: #ffffff;
}
#result.show{
display: block;
}
</style>
<table>
<thead>
<tr>
<th>Tableau de test</th>
</tr>
</thead>
<tbody>
<tr>
<td>A survoler 1</td>
</tr>
<tr>
<td>A survoler 2</td>
</tr>
</tbody>
</table>
<div id="result"></div>
<script>
const result = document.querySelector("#result");
// à la sortie de la souris tu retires la class d'affichage, ici la souris doit être entré pour qu'on puisse détecter une sortie, dans ton cas si result s'affiche par dessus le td (ce que j'ai cru comprendre) survolé pas de soucis car la souris serait dedans et il faudrait sortir la souris, sinon tu peux changer ta condition de sortie directement ici
result.addEventListener("mouseleave",() => {
result.classList.remove("show");
});
document.querySelectorAll("td").forEach(col => {
// à l'entrée de la souris sur une colonne tu ajouts la class d'affichage
col.addEventListener("mouseenter",() => {
result.textContent = col.textContent;
result.classList.add("show");
});
});
</script>
</body>
</html>
Le code que j'ai donné est un exemple si result doit contenir les données du load alors .... au lieu de mettre les données du td remplacer par les données du load.
Et je saisi l'idée mais on ne comprend pas quelque chose si on change l'évènement (du moins de mon point de vue).
Si tu as des soucis n'hésites pas à en faire part c'est le but.
$('#tablesForm').on('dblclick', 'tr', function(event) {
var idCard = $(this).attr("data-id");
var mouseX = event.pageX;
var mouseY = event.pageY;
// Supprimer tout élément #results existant avant de créer un nouveau
$('#results').remove();
// Afficher idCard en utilisant AJAX
$.ajax({
url: 'data/show_card.php?mode=client',
type: 'GET', // ou 'POST' selon votre configuration
data: { id: idCard }, // Données à envoyer, si nécessaire
success: function(response) {
// Créer un élément div pour afficher la carte
var resultElement = $('<div id="results"></div>');
resultElement.html(response)
.css({
"position": "absolute",
"left": mouseX + "px",
"top": mouseY + "px"
})
.appendTo('body'); // Ajouter l'élément au body pour l'affichage
}
});
event.preventDefault();
event.stopPropagation();
});
// Clic pour faire disparaître idCard
$(document).on("click", function(event) {
if (!$(event.target).closest('#results').length) {
$('#results').remove(); // Supprimer l'élément une fois qu'il a été affiché
}
});
Mais lorsque je fais un double click sur la dernière ligne de mon tableau html la dernière vignette apparait bien avec les données mais elle est affichées plusieurs fois
- Edité par Nicos1235 21 juin 2024 à 14:18:30
Jquery Hover Ajax
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
Konjiki Ashisogi Jizo
Konjiki Ashisogi Jizo
Konjiki Ashisogi Jizo