1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Menu actif

Utilisateur anonyme - Modifié le 3 mai 2017 à 10:32
cs_stay
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
 - 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>";
?>

1 réponse

Réponse 1 / 1
cs_stay
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
 3
Modifié le 20 mai 2017 à 18:42
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
0