jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Trucs et astuces > Un lien vers une page, qui finalement va charger un fragment

Un lien vers une page, qui finalement va charger un fragment

lundi 5 février 2007, par Toutati

jQuery permet facilement à un lien d’inclure des fragments d’une page sans recharger la page entière. Mais si on désactive javascript, c’est le fragment qui est affiché : bof !

Pour le visiteur comme pour les moteurs d’indexation il y a une solution simple : demander à jQuery de réécrire ce lien. C’est ainsi qu’on va fabriquer un javascript non intrusif !


Appeler un fragment dans une page

  • Mettre une class="load" aux liens qui pointent vers un fragment
  • Mettre un id="myid" sur le div récepteur dans lequel doit se loger le fragment
  • avoir le fragment de page mapage_fragment.html

Voici le premier code qui, lors d’un click et pour tous les liens ayant class="load" insère le fragment dans le div id="myid" puis empêche le rechargement de la page par un return false;

Ce jquery est intrusif, voir l’exemple (en activant/désactivant javascript dans votre navigateur)

Afficher la page brute si le javascript est désactivé

Ajoutons maintenant un replace pour modifier le lien et la page complète mapage.html vers lequel pointe le lien.

Ce jquery est non intrusif, voir l’exemple (en activant/désactivant javascript dans votre navigateur)

De cette manière, si javascript est désactivé, le lien fonctionnera normalement ; si javascript est actif, le lien est réécrit par jQuery pour appeler le fragment.

Les moteurs pourront référencer plusieurs pages complètes, et vous pourrez éventuellement proposer à vos visiteurs de marquer la vraie page dans leurs favoris.

P.-S.

On ne saurait trop conseiller l’usage de l’extension firefox web developer pour ici activer et désactiver javascript facilement.

Voici les recettes de ma cuisine de codes jQuery dont certains déjà présentés sur jquery.info et dont j’ai extrait certaines possibilités
- Afficher un fragment dans "Le code révélé" http://www.jquery.info/spip.php?art...
- Modifier la propriété d’un élément dans "Cloner des éléments" http://www.jquery.info/spip.php?art...
- Pour corser le tout, je voulais aussi un effet d’affichage comme avec http://interface.eyecon.ro/demos/if...

Visible avec plusieurs effets sur http://ecrantotal72.com/

Documents joints

Répondre à cet article

16 Messages de forum

  • (logo)

    Un lien vers une page, qui finalement va charger un fragment

    2 mars 2007 17:58, par toutati

    Avec les dernières versions de JQuery, voici un exemple qui marche

    Répondre à ce message

    • (logo)

      Ici le visiteur ne voit pas le lien transformé en javascript puisque renommage et appel se font au moment du click

      Avec ré initialisation possible :

      Répondre à ce message

    • (logo)
      Pusieurs liens dans la page 12 octobre 2008 19:51

      Bonjour,
      D’abord merci pour ce script bien utile.
      Ma question est, comment faire si on a plusieurs liens dans la div ? (des liens qui ne pointent pas tous vers "mapage.html").

      Merci d’avance.

      Répondre à ce message

  • (logo)

    Un lien vers une page, qui finalement va charger un fragment

    30 juin 2008 19:11, par vanno

    Merci pour ton code , j’ai essayer de l’intéger à mon site et ca marche nikel, sauf sur ie
    voici le code

    <script type="text/javascript">
    $(document).ready(function () {
    $("a.load")
    .click(function() {
    $(this).attr("href", function() {
    mylink=this.href.replace("mapage", this) ;
    $(this).attr("href", mylink ) ;
    }) ;
    $("#myid").load(this.href) ;
    return false;
    }) ;
    }) ;
    </script>

    siquelqu’un pouvais m’aider :)

    Répondre à ce message

  • (logo)

    Animation d’attente

    6 août 2008 09:37, par yoh

    Merci pour ce script qui marche nickel.

    $(document).ready(function () {
    $("a.load")
    .click(function() {
      $(this).attr("href", function() {
        mylink=this.href.replace("mapage", "mapage") ;  
        $(this).attr("href", mylink ) ;
      }) ;
      $("#myid").load(this.href) ;
      return false ;
    }) ;
    }) ;

    J’aimerai avoir une petite animation d’attente durant la requête :

    quelqu’un saurait-il ce qu’il faut insérer ?

    Répondre à ce message

    • (logo)
      Animation d’attente 9 novembre 2008 17:04

      +1

      je cherche egalement a mettre un petit "chargement" lors du chargement du fragment de page.

      merci d’avance

      Répondre à ce message

      • (logo)
        Animation d’attente 11 novembre 2008 02:38, par gtraxx

        Avec une requête ajax simple on peut ajouter un beforeSend mais pour load je ne pense pas .

        je cite :
        callback (Fonction) : (optionnel) fonction qui sera éxécutée à chaque fois qu’une donnée sera chargée (paramètres : responseText, statut et sa réponse).

        A vérifier ;-)

        Répondre à ce message

      • (logo)
        Animation d’attente 12 novembre 2008 17:58

        Je m’en suis sorti en réduisant l’opacité du bloc le temps du chargement :

        $(document).ready(function () {
        $("a.lien_pagination")
        .click(function() {
          $(this).attr("href", function() {
            mylink=this.href.replace("rubrique[(#ID_RUBRIQUE)]", "page=admin_pagin_news") ;  
            $(this).attr("href", mylink ) ;
          }) ;
          jQuery("#pag_news_yoh")
                   .css('opacity', '0.5');
           $("#pag_news_yoh").load(this.href,function(){
          jQuery("#pag_news_yoh")
                   .css('opacity', '1');}       
                ) ;
          return false ;
        }) ;
        }) ;

        Répondre à ce message

  • (logo)

    Un lien vers une page, qui finalement va charger un fragment

    29 avril 2010 13:25, par Toutati

    Avec un lien de style

    /?mapage=frag-url-a-remplacer&id_truc=458#corp
     
    $(this).attr("href", function() {
        mylink=this.href.replace("frag-url-a-remplacer", "par-morceau-url-nouveau") ;
       //test pour visualiser remplacement
       // $(this).attr("href", mylink ) ;
       //retournera /?mapage=par-morceau-url-nouveau&id_truc=458#corp
      });

      /*! garder un espace pour ne charger que le ID */
      $("#id_affichant").load(mylink, #id-dans-nouveau-morceau)

    Répondre à ce message

  • très chouette ce simple code

    $(document).ready(function ()

    $("a.load")
    .click(function()
    $("#mainDiv").load(this.href) ;
    return false ;
    ) ;

    ) ;

    un simple petit soucis : a va pas en IE8

    Répondre à ce message


Derniers commentaires

Nouveautés sur le Web