11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Menu actif après chargement de page

Bonjour à tous,

Je suis en train de réaliser un menu dynamique. C'est-à-dire le contenu de mon menu est constitué des noms des thèmes enregistrés en base de données. Chaque thème est identifié par son ID qui est un paramètre dans l'URL.

Mon souhait est pouvoir récupérer le contenu du thème sur le quel on a cliqué grâce à son paramètre GET et aussi que le lien reste actif même après chargement pour que l'utilisateur sache sur quel menu il navigue.

Le style de menu actif est traité en CSS et le reste en JQUERY. Vous trouverez mon code ci-dessous :

ul li{
	list-style: none;
}
ul li a {
	display: block;
	color: #333; 
	text-decoration: none;
	padding: 8px 8px 17px 8px;
	width: 200px;
	transition: all .3s .1s;
}
ul li a:hover, ul li a:focus {
	background: blue; 
        color:#fff;
        padding: 8px 25px 17px 25px;
        transition: all .3s 0s;
} 
ul li a:active { 
	background: blue;
	color:#fff;
}



<div id="menu">
	<ul>
            <?php
                // connexion BD
		require_once("db.php");

		$sql = "SELECT * FROM theme ORDER BY theme_id DESC".
		$req = $db->prepare($sql);
		$req->execute() or die(print_r($req->errorInfo()));
		$rows = $req->fetchAll();

		foreach($rows as $row){
               ?>
		<li><a href="page.php?id=<?=$row['theme_id']?>"><?=$row['theme_nom']?></a></li>
		<?php } ?>
	</ul>
</div>
<div id="contenu">
	<?php
		$theme_id = $_GET['id'];

		$q = array('id'=>$theme_id);
		$sql = "SELECT * FROM theme WHERE theme_id = :id";
		$req = $db->prepare($sql);
		$req->execute($q) or die(print_r($req->errorInfo()));
		$rows = $req->fetch();

		foreach($rows as $row) {
	?>
	<h1><?=$row['theme_nom']?></h1>
	<p><?=$row['theme_contenu']?></p>
	<?php } ?>
</div>



var $contenu = $('#contenu');
    var page = $('#menu li a:first').text();

    $('#menu li a').on('click', function() {
        var lien = $(this).attr('href');
        var pageCible = $(this).text();

        if(pageCible != page) { 
            page = pageCible;

            $.ajax({
                url: lien,
                cache: false,
                success: function(html) {
                    $contenu.hide().html(html).fadeIn();
                }
            });
        }
        return false;
    });

Modifié par dinolam (11 Apr 2017 - 11:31)
Bonjour Dinolam,
pour transmettre tes infos au serveur tu mélanges 2 techniques différentes:
1ere technique : via l'ancre tu transmets en GET ton id de thème : <a href="page.php?id=<?=$row['theme_id']?>">
2ème technique : via ta fonction ajax tu appelles ta page avec l'id en paramètre, j'ai jamais essayé cette syntaxe, mais pour passer des paramètres avec ajax il faut utiliser le paramètre data avec des données sous forme JSON ou serialisées.

Pour ce que tu veux faire tu peux rester sur la première technique :
exemple:

<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="technique.php?id=10">Ma cible 1</a>
        <a id='20' href="technique.php?id=20">Ma cible 2</a>
        
        <div id="contenu">
            <?php
                if (isset($_GET['id'])) {
                    include "moncontenu_".$_GET['id'].".php";
                    echo "<script>$('#".$_GET['id']."').css('color','red');</script>";
                }
            ?>
        </div>
    </body>
</html>


Dans le div 'contenu' pour simplifier je vais chercher une page différente en fonction de l'ID mais tu peux construire ton contenu comme tu veux en faisant des requêtes sur ta base et en utilisant echo pour afficher le résultat avec les balises Html qui te conviennent...

Bon maintenant pour la technique avec Ajax c'est PAS plus compliqué:

<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="#">Ma cible 1</a>
        <a id='20' href="#">Ma cible 2</a>
        
        <div id="contenu">
        </div>
        <script type="text/javascript">
            $("a").click(function() {
                $("a").css("color","initial");
                $(this).css("color","red");
                var mesData="id="+$(this).attr("id");
                $.ajax({
                    type: "GET",
                    url: "fonctionsAjax.php",
                    data: mesData,
                    success: function(data){
                        $("#contenu").html(data);
                    }
                });
            });                                 
        </script>
    </body>
</html>
</


le fichier fonctionsAjax.php :


<?php

$id=$_GET['id'];

echo "<h1>technique Ajax : contenu ".$id."</h1>";
?>


Avec ajax l'avantage c'est qu'il ne te recharge pas entièrement la page, il va juste envoyer se que tu affiches avec echo (dans fonctionsAjax.php) dans la variable data qui sera utilisée par la fonction décrite dans le paramètre success de la fonction ajax...

Bonne journée
Modifié par GJboba (12 Apr 2017 - 20:22)
Bonjour,

J'aurais une question du coup.
Si l'utilisateur enlève le Javascript de son navigateur.
L'Ajax fonctionnera ?
Et oui sans Javascript pas d'Ajax !
Mais du coup j'ai aussi une question: pourquoi un utilisateur désactiverait t'il javascript?

Bonne soirée
Administrateur
Bonjour,

dinolam a écrit :
Mon souhait est pouvoir récupérer le contenu du thème sur le quel on a cliqué grâce à son paramètre GET et aussi que le lien reste actif même après chargement pour que l'utilisateur sache sur quel menu il navigue.

Je n'ai pas compris : au clic, on change de thème ça OK.
Le contenu HTML est-il différent d'un thème à l'autre ? Je suppose que oui, c'est plus un thème de CMS qu'un habillage / thème CSS (styleswitcher) ?

Pour que le lien du thème affiché soit indiqué comme actif, ça pourrait aussi être fait côté serveur (le serveur sait quel thème on lui envoie, il peut aussi bien envoyer un code HTML de navigation avec une classe .active sur l'item du lien en question).

Javascript non fonctionnel : il y a 12.000 raisons autres que l'utilisateur pour lesquelles JS pourrait ne plus fonctionner. CDN qui ne fonctionne plus, réseau capricieux, 1 minuscule erreur de JS autre part (y compris d'un service tiers), une extension qui le bloque, etc, etc
Un fallback peut être mis en place : on clique sur le lien (bon ben pas d'AJAX ce coup-ci) et le serveur renvoie la page complète avec indication de l'item actif dans la navigation au lieu du #contenu
Merci à tous pour vos réponses.
@GJboba, concernant la première technique, je ne peux créer de fichier comme t'avais fait :
include "moncontenu_".$_GET['id'].".php"; parce que je ne connais pas par avance le nombre de thèmes que je vais avoir besoin. Donc je ne peux pas créer de fichier autant que le nombre d'id disponible. Si c'est le cas, comment créer ce ficher : moncontenu_".$_GET['id'].".php dans mon répertoire?

Pour la deuxième technique, j'ai modifié le code ainsi et ça marche. Mais seulement un petit souci que je n'ai pas réussit à corriger, quand j'active un lien et que je clique n'importe ou dans la page, le style disparait sur mon lien.


 <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>

Merci,
Cdlt,
Modifié par dinolam (03 May 2017 - 10:26)
Sujet clos
Aller à