begin process at 2012 05 28 13:38:32
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Trucs & Astuces

 > DYNAMISER LES PAGE HTML SANS EN RECHARGER LE CONTENU

DYNAMISER LES PAGE HTML SANS EN RECHARGER LE CONTENU


 Information sur la source

Note :
5,67 / 10 - par 6 personnes
5,67 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Niveau :Expert Date de création :10/11/2003 Vu :16 556

Auteur : aKheNathOn

Ecrire un message privé
Site perso
Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note

 Description

Le principe est pris sous flash, avec la fonction LoadMovie, vous avez déjà chargé une animation, et vous naviguez dans celle-ci, et vous chargez une nouvelle animation.

Le language javascript et pas assez complet pour proposer ce genre de fonctions, mais j'ai essayé de la coder. Le code en lui-même est typé sur un certain systéme donc pas la peine de le mettre, car il ne serais pas adapté à vos besoin.

J'ai décidé juste de vous expliquer mon astuce.

Alors ce que je veux faire :
- Pour l'instant les systéme de navigation, on va prendre pour exemple le fameux phpMyAdmin, sont du type : Lien vers une nouvelle page.
- Ce que je veux faire, c'est une gestion dynamique sans chargement de page afin d'optimiser l'envoi d'informations.

Par exemple on veut lire tous les articles dans dans une base de données et les mettre dans un tableau.

Le truc à l'air simple mais pour cela faut écrire en php le code qui générera un tableau en html ... etc : C'est la methode classique.

Ma methode consiste à faire un script php, qui lirais les données dans la base SQL et qui les renverrais sous forme de chaine, que le javascript interpreterais et mettrais en place.

Comment je vais m'y prendre :

1 - Le php lit les articles, les concaténe dans une chaine, et rédige un simple javascript .
Ex :

Dans ma base de données j'ai la table Fiches, avec les fiches individuelles suivantes :
Nom : X
Age : 20
Etc
Nom : Y
Age : 30
Etc ...

Le script php lit donc toutes les fiches et va garder en mémoire seulement :
$chaine = 'X|20]Y|30]';

Ensuite il rédige un script du style :

<script>
parent.RefreshTableau('<? echo $chaine; ?>');
</script>

Bon alors comment gérer ce genre d'appel dans une page centrale, celle qui affiche les résultats ...

Donc vous faites une page HTML tout à fait classique et aprés <body> mettez ceci :
<iframe id="socket1" src="" style="display: none;"></iframe>

Bon déjà vous voyez, je l'ait appelé socket, tout simplement car je considére qu'on passe à un type de programmation socket, même si c'est pas tout à fait le cas, c'est une methode analogique.

Je vous explique le principe par analogie à la programmation sockets :
1 - Ouverture de communication en socket :
-> socket1.src = "server:port";
2 - Envoy des données
-> C'est le script php qui répond, et il répond dans une fonction , dans notre exemple RefreshTableau(message), donc c'est lui le gestionnaire de reception de données de ce socket.

Bon revenons à nos mouttons ...

Donc vous avez créé l'élément socket, maintenant définissez la zone ou mettre le tableau.

Le meuilleur moyen c'est créer une balise d'interpretation label :
<label id="tableau"></label>

Alors maintenant la fonction RefreshTableau :

PS : Je considére que vous avez mis la fonction de gestion des objets de dreamweaver MM_findObj() ...

function RefreshTableau(msg) {
  var tab = MM_findObj("tableau");
  var tables = msg.split("]");
  var html;
  html = "<table>"
  for(i=0; i < tables.length; i++) {
    html += "<tr>";
    champs = tables[i].split("|");
    for(j=0; j<champs.length; j++) {
     html + = "<td>"+champs[j]+"</td>";
    }
    html += "</tr>";
  }
  html += "</table>";
  tab.innerHTML = html;
}


Voilà donc comment vous aurez chargé dynamiquement un tableau dans un fichier HTML, sans pour autant recharger tout la page, ou sa mise en page ...

Au passage, pour le rechargement il est bien entendu que vous devez faire activer le socket ainsi :

function LoadTableau() {
  var sock  = MM_findObj("socket1");
  sock.src = "script.php?params";
}

L'avantage, c'est que par exemple vous pouvez proposer un écran de chargement en cours à l'utilisateur, et désque le socket répond, ben vous l'enelevez et remettez le tableau...

Sans parler de la rapidité de chargement .

A utiliser avec précaution car c'est compatible IE 5.0 ou supérieur à cause des IFRAME...




 Sources du même auteur

Source avec Zip SYSTÉME DE ZOOM SUR DES IMAGES
Source avec Zip Source avec une capture PALETTE DE COULEURS RGB COMME CELLE DE WINDOWS
MANIPULATION ET FONCTIONS POUR LES CHAMPS FICHIERS DES FORMU...

 Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol

Commentaires et avis

Commentaire de flashfun le 11/11/2003 13:21:24

&gt;&gt;Le meuilleur moyen c'est créer une balise d'interpretation label :
&lt;label id="tableau"&gt;&lt;/label&gt;

Je connais pas ça, peux-tu m'expliquer?

&gt;&gt;PS : Je considére que vous avez mis la fonction de gestion des objets de dreamweaver MM_findObj() ...

Je connais pas ça, peux-tu me donner le contenu de la fonction?

J'ai déjà utilisé un systèm un peu près pareil, j'utilise une frame normal de taille zéro: dans cette frame je charge une page php,
Le programme php écrit directement dans un textarea le contenu de ce que je veux afficher dans un paragraphe de la page principale, puis un javascript copie le contenu du textarea dans le contenu du paragraphe à mettre à jour.
Il est passible de faire la même chose avec une iframe.

Je ne suis pas convaincu de gagné du temps en faisait traité les informations par un javascript, à la vitesse de l'éxécution du php, tu ne dois pas voir la différence si tu rajoute 2 ligne d'exécution en plus.
Il faudrai faire des essais.

Ps: sur ce site ils utilisent aussi une iframe:
&lt;iframe src="chkmsg.aspx?r=..." name="CheckMsg" id="CheckMsg" width="1" height="1" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"&gt;&lt;/iframe&gt;

La page donne:
&lt;html&gt;&lt;head&gt;&lt;title&gt;-&lt;/title&gt;
&lt;meta http-equiv="Refresh" content="240; url=chkmsg.aspx?r=..."&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;

Commentaire de aKheNathOn le 11/11/2003 13:43:20

ben moi j'apelle ça une balise d'interpretation car elle à la fonction innerHTML, et qu'elle n'a aucun effet visuel, donc je l'utilise en plus de sa fonction par défault, pour charger dynamiquement du html, qui sera interprété ...

Walla le fonction de dream :

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))&gt;0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i&lt;d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i&lt;d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

Et cette methode comporte un avantage certain, quand t'as une grosse mise en page, l'habillage n'est pas à recharger... parcontre tu peux en modifier une partie etc...

Sur les requettes internet faut plutôt raisoner en nombre de HITS car la vitesse de téléchargement n'est plus de 56 K pour dire que la page est lente à charger... c'est juste les requettes qui sont lentes ...

L'avantage c'est de ne pas avoir a charger plusieurs trucs, donc 1 seul hit.

Quand à l'utilisation des frames, c'est fait diviser l'écran, nix utilise une frame invisible, ce qui revient à utliser une iframe, mais il doit préférer la balise FRAME pour la compatibilité.

Il faut savoir avant d'utiliser ces methodes à qui on s'adresse, et si c'est un intranet, ou un logiciel internet pour une boite, on peut cibler alors vers un explorateur, comme IE, donc pour les sites grands public, je vous déconséille donc d'utiliser ces methodes....

Commentaire de pixtaz le 08/09/2004 07:16:53

pour teste j'ai creer un fichier script.php et j'ai mis
<? $chaine = 'X|20]Y|30]'; ?>
<script language="JavaScript" type="text/JavaScript">
parent.RefreshTableau('<? echo $chaine; ?>');
</script>

et sur une page html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans titre</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))&gt;0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i&lt;d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i&lt;d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//-->
</script>
</head>

<body>
<script language="JavaScript" type="text/JavaScript">
<!--
function RefreshTableau(msg) {
var tab = MM_findObj("tableau");
var tables = msg.split("]");
var html;
html = "<table>"
for(i=0; i < tables.length; i++) {
html += "<tr>";
champs = tables[i].split("|");
for(j=0; j<champs.length; j++) {
html + = "<td>"+champs[j]+"</td>";
}
html += "</tr>";
}
html += "</table>";
tab.innerHTML = html;
}

function LoadTableau() {
var sock = MM_findObj("socket1");
sock.src = "script.php";
}

//-->
</script>
<iframe id="socket1" src="" style="display: none;"></iframe>
<a href="#" onmouseover="LoadTableau();">test</a>
<label id="tableau"></label>
</body>
</html>


mais ça marche pas j'ai une erreur .

qui peut me dire d'ou ça peut venir ? je suis sur ie 6

je vous remercie d'avance

Commentaire de aKheNathOn le 08/09/2004 09:06:01

J'ai vu deux erreurs :

Déjà y'à un bug avec le javascript de dream. Au pire essayez :

function MM_findObj(n, d) { //v4.01
  return document.all(n);
}

Sous IE ça passera nikel.

Sinon dans la fonction RefreshTableau(msg) y'à écrit à un moment :
html + = "<td>"+champs[j]+"</td>";

Et le javascript attend que le + et le = soient collés, et non séparés avec un espace.

Aprés tu verras, ça fonctionne nikel. Au fait, t'es même pas obligé de faire un script php. Tu peux mettre ça en dur dans un fichier HTML si tu veux tester ça n'importe-où.

Waouuu.... Merci pour la note au fait(4/10). Je vois même pas pk y'en à qui essayent cette méthode vu que tt le monde pense qu'elle est pourave.

Je vois même pas pk je me casse le cul à vous aider.

Commentaire de pixtaz le 08/09/2004 13:51:53

ça marche chez moi .

je note qq chose que apres avoir reussi a le faire marche quand ça marche la ce le cas et je trouve ça tres util donc paff 10/10 ;-)

Commentaire de pixtaz le 08/09/2004 17:42:18

j'ai mis aussi un <META HTTP-EQUIV="Pragma" content="no-cache">
sur le fichier script.php histoire de ne pas avoir la meme chose a chaque clique :-)

sinon je trouve ça vraiment bien mais je pense qu'il faut vraimnet trouver qq chose pour le faire macher sur mozilla .

Commentaire de ifebo le 13/05/2005 17:58:31

Et re Paff ! moi je mets 9 parce que rien n'est parfait dans ce bas monde ;-)
Mais je tiens à encourager les bonnes volontés.
Merci à vous ça va me servir.
Et le minitrucenplus de la metabalise c'est bien d'y avoir pensé.
Moi j'aurais sans doute oublié. je vois pourtant que j'en aurais eu besoin. Merci encore.

Commentaire de mandark le 10/07/2006 13:45:51

-> Ajax

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,217 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales