Navigation avec menu AJAX

Par louroulou, il y a 13 ans

PHP

Bonjour,

En suivant les différents tutoriels du site, j'ai créé mon premier site web.
Ayant quelques notions en html / css, je progresse très doucement en jquery et php.
Bref, je commence par suivre le tuto sur la décomposition du site en php avec l'url rewriting et tout l'toutim.
J’enchaîne avec le tuto sur les menus en ajax ce qui m'arrange bien car j'ai une image de fonds assez lourde imposée par le client.
Du coup je la charge une fois :D
Tout marche à peu près bien sauf que...

Voici le souci
j'ai une galerie photo dans une des pages (http://www.grafikart.fr/tutoriels/jquery/gallerie-image-198) avec ce modèle.
J'ai donc ma page index.php avec un conteneur au milieu qui appelle des pages du dossier contents en fonction de la barre de navigation.
Si je rentre l'adresse de la page monsite/galerie.html tout se passe bien, ça marche.

MAIS si je passe par le menu et que j'appelle la galerie, elle se charge mais le script ne marche pas.
Ce que je soupçonne c'est que le script est appelé dans index.php, ça charge la page d'accueil.
Ensuite je clic sur la galerie dans la barre de navigation mais le script n'est pas chargée avec la page et ça marche pas.

merci de m'éclaire sur mon soucis,

c'est ma première réelle difficulté dans le site alors que je débute en php et tout le bazar.

3 réponses

louroulou, il y a 13 ans

Bonjour,

après pas mal de recherche, je comprends qu'il faudrait que je relance les scripts à chaque fois que le truc en AJAX est exécuté de manière à avoir ma galerie de photos, mon calendrier, ...

Là par contre je ne sais pas très bien faire, pourriez vous m'indiquez des pistes svp :
1) mettre toutes les scripts dans une fonction (init ?)
2) charger la fonction init à chaque exécution du code ajax (donc dès qu'un clic sur menu.

merci

Gregory, il y a 13 ans

Bonjour,

Peux tu nous fournir du code, et aussi nous dire ce que dis la console pour voir les erreurs javascript

louroulou, il y a 13 ans

Voici mon code tel que demandé.
D'abord la page index.php (viens après le code du script ajax (nav.js) :

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>L'Espace Insolite - location courte durée </title>
        <link rel="stylesheet" type="text/css" href="styles/nav.css">
        <link rel="stylesheet" type="text/css" href="styles/index.css">
        <link rel="stylesheet" type="text/css" href="styles/typo.css">
        <link rel="stylesheet" type="text/css" href="styles/contact.css">
        <link rel="stylesheet" type="text/css" href="styles/equipment.css">
        <link rel="stylesheet" type="text/css" href="styles/plan.css">
        <link rel="stylesheet" type="text/css" href="styles/galerie.css">
        <link rel="stylesheet" type="text/css" href="styles/calendar.css">
        <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
    </head>
<body>
<div id="main">

    <!-- Image de fonds -->
    <div id="div_main_img">
        <img id="main_img" src="pictures/bg_accueil.jpg" alt="fonds d'écran"/>
    </div>
    <!-- Menu de navigation -->
    <div id="nav">
        <?php 
            include 'contents/nav.php';
        ?>
    </div>
    <!-- Contenu du bloc central avec règle de URLRewriting -->
    <div id="main_bloc">
        <?php 
        if(isset($_GET'p']) && preg_match("/^[a-z0-9]+$/i",$_GET'p'])){ 
            $p=strtolower($_GET'p']);
                if(file_exists("contents/$p.html")){
                    include "contents/$p.html";
                }
                else{
                    include "contents/404.html";
                }
            }
            else {
                include "contents/404.html";
            }   
        ?>
    </div>
    <!-- Pied de page du site -->
    <div id="footer">
        <?php 
            include 'contents/footer.php';
        ?>
    </div>

</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
<script type="text/javascript" src="js/galerie.js"></script>
</body>
</html>

Et voici le code du script ajax nav.js qui est appelé en bas de la page : 

$(document).ready(function(){
    $("#nav a").click(function(){
        page=$(this).attr("href");
            $.ajax({
                url: "contents/"+page,
                cache:false,
                success:function(html){
                    afficher(html);
                },  
                error:function(XMLHttpRequest,textStatus, errorThrown){
                    alert("erreur lors du chagement de la page");
                }
            })
        return false;
    });
});

function afficher(data){
    $("#main_bloc").fadeOut(500,function(){
        $("#main_bloc").empty();
        $("#main_bloc").append(data);
        $("#main_bloc").fadeIn(1000);
    })
}

Comme je le disais dans le premier poste,
si je tappe l'url monsite/galerie.html tout marche
mais si je clic sur le lien, ça marche plus j'ai un pop-up avec : Erreur lors du chargement de la page (mon message d'erreur) (sous Chrome).
Du coup je peux pas faire d'audit pour vous montrez l'erreur, je ne peux pas charger la page :/

merci beaucoup pour ton aide