Menu actif

Utilisateur anonyme - 11 avril 2017 à 11:36 - Dernière réponse : cs_stay 496 Messages postés jeudi 7 juillet 2005Date d'inscription 24 mai 2017 Dernière intervention
- 20 mai 2017 à 18:40
Bonjour,

Un petit souci que j'ai dans mon code que je n'ai pas réussi à corriger, quand j'ai un hover activé sur un lien avec la classe "active" et que je clique sur n'importe ou dans la page, le style disparaît sur mon lien. Je souhaiterais supprimer la class active seulement quand je clique sur un autre lien mais pas en dehors de mes liens. Ce qui n'est pas le cas actuellement. Merci par avance !


<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<a id='10' href="#" rel="nofollow noopener noreferrer" target="_blank">Ma cible 1</a>
<a id='20' href="#" rel="nofollow noopener noreferrer" target="_blank">Ma cible 2</a>

<div id="contenu">
</div>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
var mesData="id="+$(this).attr("id");
$.ajax({
type: "GET",
url: "fonctionsAjax.php",
data: mesData,
success: function(data){
if (data !== '') {
$(this).addClass("active");
$("#contenu").html(data);
} else {
$(this).removeClass("active");
}
});
});
return false;
});
</script>
</body>
</html>

Et le fichier fonctionsAjax.php

<?php
$id=$_GET['id'];
echo "<h1>technique Ajax : contenu ".$id."</h1>";
?>
Afficher la suite 

Votre réponse

1 réponse

cs_stay 496 Messages postés jeudi 7 juillet 2005Date d'inscription 24 mai 2017 Dernière intervention - Modifié par cs_stay le 20/05/2017 à 18:42
0
Utile
Bonjour,

Et bien, c'est très simple. Le contenu du fichier fonctionAjax.php ne peut être vide car tu fais un echo dedans.

Il te faut faire un retour json dans ton fichier fonctionAjax.php
<?php
$id = isset($_GET['id']) ? $_GET['id'] : 0;
echo json_encode(array(
    'id' => $id,
    'contenu' => "<h1>technique Ajax : contenu ".$id."</h1>"
));


Dans ton appel asynchrone, tu dois ajouter la clé dataType avec la valeur json. Et dans ta condition, récupérer la clé (deuxième dimension) id dans l'object data. Tu dois également supprimer toutes les class active dans les tag a. Et tu fais pareil avec la clé contenu. En cas d'erreur dans ton retour. Par exemple une erreur PHP ou autre. Utilise l'object error dans ton appel JS.
$.ajax({
    type: "GET",
    dataType: 'json',
    url: "fonctionsAjax.php",
    data: mesData,
    success: function(data){
        $('a').removeClass("active"); // supprime les class active
        if (data.id !== '') {           
            $(this).addClass("active"); // ajoute la class active
            $("#contenu").html(data.contenu); // ajoute le text
        }
    },
    error: function(json) {
        console.log(json.responseText.replace(/(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)|(<!--.*?-->)/gim, ""););
    }
});


Je te déconseille de mélanger ton contenu text et HTML avec ton code PHP.
Je te propose d'utiliser un design pattern MVC pour gérer tes templates et intégrer un moteur de template à ton application.
Par exemple Smarty

A oui, je n'ai pas testé le code que je te propose. Je l'ai fais de mémoire. Dis-moi si cela a fonctionné.

stéph
Commenter la réponse de cs_stay

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.