Navigation en AJAX avec pages php

Dumasflo
Javascript

Bonjour,

J'ai un problème avec la navigation AJAX, j'ai suivi le tuto "jQuery : Navigation Ajax" et avant, le tuto pour travailler avec des pages en php.

Mon soucis est que quand je clique sur un de mes boutons de navigation, une page de dialogue s'affiche (en fait c'est le alert(textStatus) ) qui me marque "error", et si je remplace le alert(textStatus) par alert(errorThrown), elle m'affiche "Not Found".

Merci de votre attention !

Voici mon index.php

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/navigation.js"></script>

<?php
    if(!isset($_GET"p"])){$_GET"p"]="index"; }
    if(!file_exists("pages/".$_GET"p"].".php")){ $_GET"p"]="404"; }
    ob_start();
    include "pages/".$_GET"p"].".php";
    $pages = ob_get_contents();
    ob_end_clean();

    include "template.php";
?>

Voici le fichier template.php qui est en fait la base de toutes mes pages 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="template.css" />

        <?php if(isset($head)): ?>
            <?php echo $head; ?>
        <?php else: ?>
        <title>Florent Dumas - Game Sound Designer</title>
        <?php endif; ?>
    </head>

        <body>

            <div id="conteneur2">
                    <ul id="nav">
                        <a href="index">HOME</a>   |  
                        <a href="projects">PROJECTS</a>   |  
                        <a href="skills">SKILLS</a>   |  
                        <a href="contact">CONTACT</a>   |  
                        <a href="links">LINKS</a>
                    </ul>

                <div id="titrecol1">
                <div align="left">Florent Dumas    |    Game Sound Designer</div>               
                </div>

                <div id="contenu">
                <?php echo $pages; ?>
                </div>

            </div>

        </body>

</html>

Voici mon navigation.js (je crois que c'est là qu'il faut changer des choses ...) 

$(document).ready(function(){
    $("#nav a").click(function(){
        page=$(this).attr("href");
        $.ajax({
            url: "pages/"+page,
            cache:false,
            success:function(html){
                afficher(html);
            },
            error:function(XMLHttpRequest,textStatus,errorThrown){
                alert(textStatus);
                }
        })
        return false;
        });
});
function afficher(data){
    $("#contenu").fadeOut(500,function(){
    $("#contenu").empty();
    $("#contenu").append(data);
    $("#contenu").fadeIn(500);
})
}

enfin voici mon .htaccess 

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([a-zA-Z0-9\-]*)$ index.php?p=$1 [QSA,L]

5 réponses

thunder75

Vu ton code, dans ton $.ajax, le paramètre url sera 'pages/index' ou 'pages/projects' ..., ces fichiers existent ils ?
En général dans le paramètre url, faut mettre des fichiers de type php ou html ou js.

Dumasflo
Auteur

Oui mes pages se trouvaient dans ~pages/.

Comme je n'arrivais pas à faire marcher cette méthode avec les pages php, j'ai cherché ailleurs et j'ai utilisé le plugin jNavigate, ça donne ça : www.dumasflo.fr
Les soucis c'est que les fades ne se font pas je ne sais pas pourquoi, et quand on fait "page précédente" la page se double ...

thunder75

C'est vrai qu'il n'y a pas d'effet de fade, par contre sous firefox, le clic sur précédent ne double pas les pages.

Dumasflo
Auteur

Oui le problème n'agit que sous chrome et safari ... bizarre

iluzzion

je sais pas si c'est pareil chez vous, mais pour moi le site mais beaucoup trop longtemps a charger.