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

Accueil du site > Débuter > $.get(), Le code révélé

$.get(), Le code révélé

jeudi 31 août 2006, par Fil


Les techniques dites AJAX permettent à une page HTML, déjà chargée dans le navigateur, d’aller chercher sur le même site un fragment de HTML et de l’insérer quelque part. jQuery possède tout ce qu’il faut pour faire cela.

Ici, nous allons employer $.get(), qui charge une URL et, une fois l’URL chargée, appelle une fonction en lui passant le contenu chargé.

Notre fonction prendra donc le contenu en question (variable c), transformera les symboles < en &lt;c.replace(/</mg,'&lt;') —, et insérera le résultat dans une <div/> prévue à cet effet et qu’on a nommée <div id="code"></div>.

$.get(this.href,
 function (c) {
   $("#code")
   .html(c.replace(/</mg,'&lt;'));
 }
);

Les URLs clicables sont données, dans la page, par des liens portant la classe .load :

<a href="404" class="load">404</a>

Dès que la page est prête, on affecte aux liens ayant la classe .load une fonction qui s’active lorsqu’on les clique (avec un return false; qui indique qu’il ne faut pas que le navigateur suivre le lien... et quitte notre page) :

$(document).ready(function() {
 $("a.load").click(function() {
   $.get(this.href,
     function (c) {
       $("#code")
       .html(c.replace(/</mg,'&lt;'));
     }
   );
   return false;  
 });
});

On ajoute ensuite deux effets graphiques : le premier masque la div #code dès qu’on clique — $("#code").hide() —, le second la révèle doucement après chargement du contenu — .fadeIn("slow") :

$(document).ready(function() {
 $("a.load").click(function() {
   $("#code").hide();
   $.get(this.href,
     function (c) {
       $("#code")
       .html(c.replace(/</mg,'&lt;'))
       .fadeIn('slow');
     }
   );
   return false;  
 });
});

Reste à ajouter un poil de CSS sur la div qui va afficher notre code, et le tour est joué.

P.-S.

L’inspiration initiale vient de la jolie page de démo de Christian Heilmann.

Documents joints

Répondre à cet article

6 Messages de forum

  • (logo)

    inclusion de code dans du html

    1er septembre 2006 17:09, par Nicolas Krebs

    Pour faire de l’inclusion de code dans du html juste avec du javascript, voir aussi la méthode de Disruptive Innovations SARL,

    Voir en ligne : HTML Overlays

    Répondre à ce message

  • (logo)

    Le code révélé

    9 octobre 2006 22:17, par JL

    oui, c’est super et lumineux ... et presque au premier regard !

    un truc je comprend pas : c’est l’argument de replace.
    c’est quoi ’mb’ après /et pour être sur : replace, c’est du javascript ici, pas du jquery ?

    Répondre à ce message

  • (logo)

    Le code révélé

    25 août 2008 17:48, par artotal

    Bonjour,
    j’essaie de mettre une animation dans la méthode load()
    $("#formule1Ajax").click(function() // ont click sur le bouton
    $(".blocFormule").hide("slow") ;
    $(".finTexte").hide() ;
    $("#blocFormuleAjax").load("fichierAjax/formule1ajax.php",
    var : test,
    function()
    ) ;
    return false ; // ont désactive le lien href
    ) ;
    Mais rien à faire ?

    Répondre à ce message

  • (logo)

    $.get(), Le code révélé

    14 janvier 2011 21:24

    Une idée sur le comment appeler cela a partir d’un bouton flash ? (AS3)
    « 
    import flash.external.ExternalInterface ;

    function onClick(e:Event) : void

    ExternalInterface.call(? ????) ;

    bt01.addEventListener (MouseEvent.CLICK, onClick) ; _ »

    je nage :(

    Répondre à ce message


Derniers commentaires

Nouveautés sur le Web