11521 sujets

JavaScript, DOM et API Web HTML5

Changer le contenu d'une page sans la recharger

Salut,

J'aimerais pouvoir changer le contenu de ma page sans avoir à recharger la barre de boutons en flash. Un peu comme les frames, mais en plus cool.

Et j'ai vu que sur netvibes par exemple, quand on changeait d'onglet, le lien était dirigé vers une ancre (netvibes.com/#General et netvibes.com/#Flux par exemple). J'imagine donc que toutes les pages sont chargées quand on rentre sur le site, et dans ce cas je suis pas sûr que ce soit une très bonne idée dans mon cas puisqu'il s'agit d'un portfolio, avec pas mal de rubriques.

Les iframes, j'ai ouï dire que c'était mal, et j'arrive assez facilement à comprendre pourquoi, et j'ai lu sur le blog d'alsacreations qu'on pouvait les remplacer par des object, mais j'ai pas vraiment compris comment on pouvait en changer le contenu.

Alors est ce que quelqu'un aurait une solution pour changer de rubrique sans recharger ma page ?

Merci !
Bonjour,

Il y a plusieurs possibilités : tu peux charger le contenu entier de ta page et n'en afficher qu'une partie (qui change quand on change de catégorie), ou tu peux utiliser Javascript et XMLHTTPRequest pour charger ton contenu dynamiquement, en gros : faire de l'Ajax (je déteste cette phrase…).

Puisque la première solution ne semble pas être adaptée à ton cas, je vais expliquer rapidement la seconde (avec un petit exemple fait avec jQuery).

L'idée est d'attacher une action au clic sur tes éléments de menu.
Quand ce clic survient, on établit une connexion asynchrone vers la page et on récupère son contenu, que l'on injecte dans le DOM à la place du contenu actuel.

Pour mettre en place cela, il faut que le contenu de tes pages soit placé dans un bloc qui servira de conteneur : par exemple <div id="content">...</div>. Voici un exemple de page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Jambon fumé</title>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <ul id="menu">
      <li><a href="index.html">Accueil</a></li>
      <li><a href="page_a.html">Page A</a></li>
      <li><a href="page_b.html">Page B</a></li>
    </ul>
    <div id="content">
      <h1>Accueil</h1>
    
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </body>
</html>


Pour que Javascript ne soit pas indispensable, toutes les pages doivent pouvoir être affichée seule (sans être chargées via Javascript).

Voici maintenant le code Javascript pour que la magie opère.

$(document).ready(function(){
  
  /* Au clic sur un élément de menu... */
  $('#menu li a').click(function(event){
    
    /* On récupère l'url du lien sur lequel on vient de cliquer. */
    var url = $(this).attr('href');
    
    /*
     * Dans notre bloc #content, on inject le contenu
     * de la page ciblée (par le href) en se limitant
     * à ce qui est dans le bloc #content.
     */
    $('#content').load(url + " #content");
    
    /*
     * On évite le comportement par défaut qui est de 
     * nous envoyer sur la page donnée dans le href).
     */
    event.preventDefault();
  });
  
});


Le problème de cette technique, c'est que l'URL de la page ne change pas, donc pour bookmarker, envoyer le lien à un pote, c'est la crise. C'est pourquoi on utilise souvent des ancres : cela permet d'avoir une trace de l'état de l'application dans l'URL pour pouvoir la restaurer telle que demandée : le but du jeu est de faire analyser l'ancre et fournir la page B si l'ancre est #page_b.

Je ne vais pas trop m'attarder là dessus mais je vais toute de même te fournir quelques ressources :

Railcast - Ajax history and bookmarks - C'est une application de ces principes avec la livrairie jQuery et le framework Ruby on Rails. La partie (très majoritaire) sur Javascript peut t'intéresser puisqu'elle détaille exactement ce que tu souhaites.

jQuery Address - C'est un plugin pour jQuery qui permet de faciliter la manipulation des ancres, toujours dans le but de faire correctement ce que tu veux.

Voilà !


Sephi-Chan
Merci beaucoup pour ta réponse. J'essaie de la mettre en œuvre, mais je pense qu'il y a un soucis à la base : le script JS reconnait un clic sur un élément du menu quand celui ci est en css, mais est-ce que ça peut marcher avec un menu flash ?

Et deuxième question, avec cette méthode, le php et les requêtes $_GET fonctionnent-ils toujours ?

Merci.
Bonjour,

J'ai envie de dire: tant que tu ne maitriseras pas un peu JavaScript et le développement web en général, reste-en aux bonnes vieilles pages qui se chargent complètement quand on clique sur un lien.

Rien de pire qu'une navigation Ajax mal fichue. Smiley ohwell
Le développement web ça va ; Javascript, c'est vrai que ça fait un bail que j'y ai pas touché. Mais justement, je voudrais savoir si ce que je veux est possible avant de bosser mon Javascript, ou si faire de l'Ajax avec des boutons flash et des pages php c'est peine perdue.
Tu peux appeler l'exécution d'une fonction js depuis Flash avec ExternalInterface.call(function, param); (en AS3, matte la doc).

Niveau accessibilité on repassera mais c'est faisable.

Pour le GET, tu peux envoyer des paramètres en GET avec la fonction jQuery get.

Exemple :

$.get('/page_a_charger.php', {param1: value, param2: value}, function(){
       // ce qu'il faut faire quand la page est chargée
});


Pour le POST, c'est la même chose avec $.post.
Modifié par Skoua (08 Sep 2009 - 00:05)
Haha, ok bon je dois admettre que Florent V. avait raison, j'aurai pas le temps d'apprendre tout ça en fait. Tant pis, je vais faire du classique. Merci quand même à tous !
Sujet clos
Aller à