Ajax et href complet

Par StanislasP, il y a 15 ans

Javascript

Bonjour, j'ai suivie le tutoriel sur la navigation en ajax, très bien expliquer et très complet. Merci encore.
Seulement, j'ai un soucis. Comment faire pour recuperer tous le href?
mettons que j'ai le lien:
<a href="contact.html">Contact</a>
Qui m'envoie sur la page ou il y a tout d'abord des infos géographique et de contact téléphonique, puis ensuite arrive le formulaire donc en bas de page.
On place alors une ancre ce qui fait que le lien devient:
<a href="contact.html#mail">Contact</a>

Mais la probleme, jquery ne recupere pas le # (j'ai pas tester si le href est long avec de l'url rewriting ou avec des parametre php mais je pense que ce sera pareille)

Comment recuperer ce qu'il y a apres le #?

Voila le code :p

$(document).ready(function(){
    $("#menu a").click(function(){
        page=($(this).attr("href"));
        $.ajax({
            url: "traitement.php?page="+page,
            cache:false,
            success:function(html){
                afficher(html);
            },
            error:function(XMLHttpRequest,textStatus,errorThrown){
                alert(textStatus);
            }
        })
        return false;
    })
});

7 réponses

MrGuillou, il y a 15 ans

Eu bizarre après un petit test jquery me récupère bien l'url avec l'ancre

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $("#test").click(function(){
                $(this).attr("href",'test.php#contact');
                alert($(this).attr("href"));
                return false;
            });
        });
        </script>
    </head>
<body>
    <a id="test" href="test.php#info">tets</a>
</body>
</html>
StanislasP, il y a 15 ans

Effectivement, je viens de penser a mettre un alerte avec le href recupere, il le recupere bien. Mais comment dans ce cas, me deplacer jusqu'a cette ancre? car actuellement, cela ne fonctionne pas.

MrGuillou, il y a 15 ans 
var href = 'test.php#contact';
var ancre = href.split('\#')[1];

N'oublie pas de valiser la réponse si elle conviens à tes attentes.

PhiSyX, il y a 15 ans

window.location.hash : Pour récupérer un ancre de la page courante ^^

StanislasP, il y a 15 ans

Ok, avec vos reponse, je recupere uniquement l'ancre, mais comment alors me deplacer dans la page viser jusqu'a l'ancre? cat jabvascript et moi,... je crois que le resultat est plus grand que pi :p

MrGuillou, il y a 15 ans

Eu j'ai pas tout compris dans ta phrase :|

PhiSyX, il y a 15 ans

Hello, test ça :
Page HTML où il y a le script de navigation ajax

<div id="menu">
    <a href="pwet.php">Sans scrolling</a>
    <a href="pwet.php&ancre=footer">Avec scrolling</a>
</div>

J'ai fait un truc vite fait mais là, il va include $_GET'page'] (= pwet.php)
Et si &ancre=monAncre est spécifié alors on exécute dans la page traitement.php un script JS qui lui fera un scrolling animé

Page traitement.php : 

<?php if (isset($_GET'ancre'])) : ?>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
    $(function(){
        var cible = "<?php echo '#', $_GET'ancre']; ?>";
        var hauteur = "";
        if ($(cible).length >= 1) {
            hauteur = $(cible).offset().top;
        } else {
            hauteur = $("a[name="+ cible.substr(1, cible.length -1) +"]").offset().top;
        }
        $('html,body').animate({scrollTop:hauteur}, 2000);
    });
</script>
<?php endif; ?>

PS: Je me suis inspiré du tuto de graf pour le scrolling animé (Section Tutoriels JS)

Voilà :p