Menu actif

Question

Posez votre question Signaler

Menu actif

Utilisateur anonyme - Modifié le 3 mai 2017 à 10:32 - Dernière réponse : cs_stay

Messages postés: 496
Date d'inscription: jeudi 7 juillet 2005
Dernière intervention: 24 mai 2017

- 20 mai 2017 à 18:40

Javascript / DHTML Posez votre question Signaler

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

A voir également:

Votre réponse

Répondre au sujet

1 réponse

Votre réponse

Répondre au sujet

Posez votre question

cs_stay · Answer 1 · 2017-05-20T18:40:31+0200

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

Menu actif

Votre réponse

Votre réponse

Votre réponse

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

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