Navigation en Ajax + Navigation Avec ancre

**goku19** · 24/03/2014, 23h30

Bonjour,

J'ai actuellement un site ou je voudrais que la moitié de la navigation ce fasse en AJAX et l'autre moitié en navigation par ancre (de haut en bas).
Le problème est que je n'arrive pas à trouver de solution pour faire cela.

Actuellement tout fonctionne en ajax mais le problème est que mes ancres (par exemple qui sommes nous, ...) ce trouve sur la page accueil.html et donc disparaît quand je charge une autre page (par exemple contact.html).
Actuellement, même en splittant le href, cela va quand même faire une demande en ajax. Et si je clique sur par exemple qui_sommes_nous, cela vas produire une erreur me disant qu'il ne connait pas cette ancre (logique vu que accueil.html n'est plus chargée).

Voila mon code : (donc dans mon footer par exemple tous les liens avec la class "nav" sont sencé ce charger AJAX et le reste sont des redirections vers des ancres)
Index.php :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html> 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Nice Road</title>
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        <script src="js/jquery-1.11.0.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->
        <script type="text/javascript" src="js/navigation.js"></script><!-- Gestion des pages en Ajax-->
        <script type="text/javascript" src="js/jquery.scrollTo.js"></script><!-- permet le scrollTo-->
        <!--[if lt IE 9]>
            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
	</head>
<body>
<!-- HEADER -->
    <header>
           <!-- MENU -->
                <nav>
                    <ul>
                        <li><a href="#qui_sommes_nous" class="menu" var="1">NOS SERVICES</a></li>
                        <li><a href="#download" class="menu" var="2">TELECHARGER</a></li>
                        <li><a href="#" class="menu" var="3" >DEVENIR CHAUFFEUR</a></li>
                    </ul>
                </nav>
                <!-- END MENU -->
                <div id="connexion">
                    <a href="connexion.html" >INSCRIPTION / CONNEXION</a>
                </div>
    </header>
    <!-- END HEADER -->
<section id="ajax">
        <?php 
            $d="vues/";
            $extension =".html";
            if(isset($_GET['p'])){
                $p(strtolower($_GET['p']));
                if(preg_match("/^[a-z0-9\-]+$/", $p) && file_exists($d.$p.$extension)){
                    include $d.$p.$extension;
                }
                else{
                    include $d."404.html";
                }
            }
            else{
                include $d."accueil.html";
            }
        ?>
    </section>
<footer>
      <nav>
                <ul>
                    <li><a href="#qui_sommes_nous">Nos services</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#download">Téléchargez l'application Nice Road</a></li>
                    <li><a href="#" class="nav">Condition générales d'utilisation</a></li>
                    <li><a href="#" class="nav">Mentions légales</a></li>
                    <li><a href="#">Espace partenaires</a></li>
                </ul>
            </nav>
</footer>

Ainsi que mon fichier navigation :

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).ready(function(){
    $("#connexion a, footer nav ul li .nav").click(function(){
        page= $(this).attr("href");
        $.ajax({
            url: "vues/"+page,
            cache: false, 
            success: function(html){
                showContent(html);
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                alert("textStatus");
            }
        })
        return false;
    });
});
/*Fonction qui affiche la page chargée*/
function showContent(data){
    $("#ajax").fadeOut(500, function(){
        $("#ajax").empty();
        $("#ajax").append(data);
        $("#ajax").fadeIn(1000);
    });
}

J'espère m'être fais comprendre :-)
Merci d'avance pour votre aide.

**Sylvercis** · 26/03/2014, 18h40

Si tu n'as pas trop de liens a gérer, je crois que tu as plus vite fait d'inserer un.onclick dans le code HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
onclick="navig('ancre','quisommesnous');"
//ou bien 
onclick="navig('page','conditionsgenerales');"

et ensuite dans la fonction "navig",
le 1er parametre te dit si c'est un appel de page ajax ou bien un saut vers une ancre.
le 2eme paramètre te donne la destination

tu utilise un tableau associatif pour stocker l'adresse de la page en plus.

"ancre","adressepage"
"ancre","adressepage"

Ensuite tu n'as plus qu'a déterminer si tu te trouve déjà sur la bonne page ou non.
Au besoin tu charge la bonne page en Ajax
Au besoin tu saute jusqu'a l'ancre donné.

En utilisant toujours le principe du tableau et ton code, tu peux aussi te passer de placer un onclick dans le code HTML si tu parvient a récupérer le nom de l'ancre (et qu'elle est unique dans tout le site)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

monAncre = $this.attr("Href");

**Golgotha** · 26/03/2014, 20h27

C'est plus un problème de conception celons moi.

Quelle est la logique d'avoir un liens qui cible une ancre qui pourrait ne pas être disponible ?

**Bovino** · 27/03/2014, 07h49

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="navig('ancre','quisommesnous');"

Nous essayons au maximum d'orienter les réponses vers les bonnes pratiques et cette solution n'est certainement pas à recommander.

Utiliser des attributs d'événement crée un lien beaucoup trop fort entre la structure HTML et le comportement JavaScript rendant le code difficile à maintenir ou à faire évoluer.
La séparation des couches (HTML pour la structure, CSS pour la mise en forme et JavaScript pour le comportement) doit être une priorité dans le code.
Il ne faudrait jamais avoir à entrer dans le code HTML pour modifier l'apparence ou la mise en forme.

**goku19** · 27/03/2014, 14h37

Bonjour et merci à tous pour vos réponses et vos conseils,

Sylvercis, ça m'a l'air bien comme idée et je pense en avoir tiré quelque chose :-)

Bovino, est-ce qui si j'utilise la méthode de Sylvercis mais à la place de mettre un évenement onClick sur les liens je met un evenement en jQuery comme ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<nav>
   <ul>
      <li><a href="mentions_legales.html" type="lien">Mentions Légales</a></li>
      <li><a href="#qui_sommes_nous" type="ancre" >Qui sommes nous ?</a></li>
   </ul>
</nav>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$('nav a').click(){
	type = $(this).attr(type);
	if(type == "ancre"){
		/* je vérifie dans mon tableau associatif dans quelle page est l'ancre et si la page est != current_page
                    et selon le résultat redirection en AJAX ou non vers la page puis scroll vers ancre */ 
	}
	else{
		/* je vérifie si la page est != current_page et selon le resultat je redirige en ajax ou retourne false */
	}
});

Cela conviens t'il ?

**Bovino** · 27/03/2014, 14h54

Oui, c'est beaucoup mieux !

Cependant, quelques maladresses encore dans ton code.
Il est préférable d'utiliser .on('click', ...) plutôt que .click(...).

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a type="ancre">

Il n'est pas conseillé d'inventer des attributs exotiques qui rendront de plus le code invalide et peuvent induire en erreur.
HTML5 offre la possibilité de créer des attributs personnalisés avec data-*

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part