Chargement avec l'AJAX et va à l'ancre dans le contenu chargé

Je suis en train de construire un site web pour organiser des collections de bandes dessinées.

De sorte que vous avez à gauche une liste de vôtre comics, et si vous cliquez sur l'un d'eux, la page avec le plus de détails sur cette bande dessinée est chargé sur la droite avec l'AJAX avec jQuery load() fonction.

Je n'ai pas une page pour chaque bande dessinée, mais aussi pour chaque serie (un pour tous les "Walking dead", un pour tous les "Spiderman"....) donc, sur chaque page qui peut être un beaucoup de différents comics.

Cependant lorsque l'on clique sur une bande dessinée que je ne veux pas seulement à charger la bonne page, mais aussi d'aller à la bonne position dans cette page.

J'ai ancres dans chaque page (#i12,#i13 avec un numéro unique à chaque fois).

Comment puis-je, après que le contenu est chargé à l'aide d'AJAX, à la bonne ancre ? J'ai essayé de modifier dynamiquement l'URL de la page (en ajoutant un #i12 à la fin), mais sans succès.

J'ai été en utilisant document.location.hash, mauvaise idée ?

Un exemple très simple : en cliquant sur le lien de la page est chargée dans la div et je voudrais la page pour faire défiler jusqu'à l'ancre #i120

La page principale : 

<div id="list">
<a href="test.php#i120">Go to num 120</a>
</div>
<div id="content">

</div>

Javascript : 

$("a").live('click',function (event)
{
    $("#Content").load(this.href);

    event.stopImmediatePropagation();
    event.preventDefault();
});

Page Test.php : 

<div id="i1">Text1</div>
...
...
<div id="i120">Text120</div>
  • Pouvez-vous poster le jQuery que vous travaillez avec? Et un représentant de l'extrait de votre code html?
  • Extrêmement simplifiée code posté.
  • Dans ce cas, je serais plutôt d'accord avec @tanduci-dessous.
InformationsquelleAutor Loïc Février | 2010-10-29
  1. 4

    D'abord, débarrassons-nous de l'invalidité de l'IDs, ils ne peuvent pas commencer par un nombre, jusqu'à ce que le HTML5, j'avais préfixe de vos Identifiants avec quelque chose comme id="nav1".

    La partie est de nettoyage, ce que vous pouvez faire pour le défilement est-ce:

    $("a").live('click', function(event) {
    var hash = this.hash;
    $("#Content").load(this.href, function() {
      document.location.hash = hash;
    });
    event.stopImmediatePropagation();
    event.preventDefault();
});

    Que vais courir une fois que le contenu est chargé, donc il y a quelque chose à faire défiler jusqu'à. Cette approche instantanément y va, donc, pour l'animer...c'est assez facile ainsi:

    $("a").live('click', function(event) {
    var hash = this.hash;
    $("#Content").load(this.href, function() {
      var st = $(hash).scrollTop();
      $('html, body').animate({ scrollTop: st }, 200); //200ms duration
    });
    event.stopImmediatePropagation();
    event.preventDefault();
});

    Nous sommes de stockage this.hash comme une variable parce qu'à l'intérieur que de rappel, this va se référer à la #Content élément, de ne pas l'ancre, nous avons cliqué sur.

    • Merci. ID non valide corrigé. Dans la pratique, il n'était pas invalide (c'est à dire : #comic120) mais j'ai simplifié à l'extrême dans la question....
    InformationsquelleAutor Nick Craver
  2. 2

    Jquery ScrollTo est probablement votre meilleur pari.

    Sinon je conseille d'avoir quelques liens invisibles sur la page (comme <un href="#1" id="link1"></a>) et puis après, l'ajax est terminée et que vous avez l'id # vous exécutez:

    $("#link" + idnumber).click();

    Simple, mais très efficace.

    • Merci. Je cherchais quelque chose qui n'utilise pas de script externe, mais je vais le regarder.
    InformationsquelleAutor Explosion Pills