Mise à jour dynamique de page

**italiano76** · 15/12/2010, 15h44

Bonjour à tous !!!

En gros je vous explique ce que je voudrais, comme sur le site de facebook quand on est en page principale et lorsque l'on va tout en bas de la page on a un lien avec "publication plus anciennes". Lorsqu'on clique dessus la suite des informations, qui sont plus ancienne, apparaissent à l'écran!
Je voudrais pouvoir faire ca sur mon site pour éviter de surcharger ma page !!!
Est ce que quelqu'un pourrait m'aider ??? Notamment en me proposant un code car je ne suis pas trop calé sur ce sujet ...
Merci beaucoup

**DarkSeiryu** · 15/12/2010, 16h57

Bonsoir.

Cherche du côté du langage AJAX, tu devrais pouvoir trouver ton bonheur (je ne peux pas te donner d'exemple de code, j'suis pas assez calé sur le sujet...).

En espérant t'avoir aidé.

**12monkeys** · 17/12/2010, 20h31

Bonsoir

Comme te le propose DarkSeiryu cela fonctionne via Ajax. En résumé cela consiste à modifier une page sans devoir recharger toute la page...

Voir ceci : http://ajax.developpez.com/cours/ et http://javascript.developpez.com/faq/?page=Ajax

**hh-cx** · 18/12/2010, 00h37

Je connais pas facebook du tout, mais si j'ai bien compris, tu as une liste de n choses, et quand tu cliques sur les plus anciennes, ca apparait sans recharger la page ... moi je te proposerai de le faire en Jquery
Pour l'exemple de code, j'ai rien sous la main mais en gros ca pourrait donner ca :
si on a :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="listeT">
 <ul>
  <li> DATE1: TITRE 1 </li>
  <li> DATE2: TITRE 2 </li>
 </ul>
 <a href="listeTmore"/>
</div>

Donc ca donnerait en Jquery (a placer dans un .js ou entre les balises <head><script style="text/javascript"></script></head> et syntaxe à verifier

)

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/*selecteur sur a dont le href est listeTmore */
 $("a[href=listeTmore]").bind('click', function(e)
 {
/* loader le retour du .php dans l'element ayant pour id listT, ici le div */
/* en considérant que source.php est le fichier qui va générer plus de résultat et dont le code source (interpreté) va etre insérer dans le div ayant l'id #listT */ 
  $('#listT").load('source.php', function(response, status, xhr) {
   if (status == 'error') {
    alert('erreur...');
   }
/* annule l'action par defaut (=l'ouverture de lien dans ce cas précis pour le <a>) */
  event.preventDefault();
 });

C'est un exemple, tu peux par contre tout loader des le débuts et n'afficher que les 3 premiers (display: none sur le reste des elements ou div de taille plus petite) et utiliser les differents effets que Jquery offre pour dérouler (slideDown, bounce et autre) le reste de la section en question (je vois tout en div oui je sais

)

au fait la fonction load de jquery utilise les fonctionnalités ajax mais à la sauce jquery...

en espérant que ca puisse t'être utile.

Mise à jour dynamique de page

Conception Web

Vue hybride

Partager

Partager