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.

15/12/2010, 15h44	#1
italiano76 Invité de passage Inscription : décembre 2010 Messages : 1 Détails du profil Informations forums : Inscription : décembre 2010 Messages : 1 Points : 0 Points : 0	Mise à jour dynamique de page 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
	00

17/12/2010, 20h31	#3
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	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 __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

15/12/2010, 16h57	#2
DarkSeiryu Membre confirmé Mickaël Développeur Web Inscription : janvier 2009 Messages : 408 Détails du profil Informations personnelles : Nom : Mickaël Âge : 23 Localisation : France, Haute Savoie (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2009 Messages : 408 Points : 234 Points : 234	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é.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email