Dynamiser les page html sans en recharger le contenu

Soyez le premier à donner votre avis sur cette source.

Snippet vu 18 305 fois - Téléchargée 30 fois

Contenu du snippet

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...

A voir également

Ajouter un commentaire Commentaires
Messages postés
16
Date d'inscription
dimanche 25 janvier 2004
Statut
Membre
Dernière intervention
10 mai 2006

-> Ajax
Messages postés
181
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
28 décembre 2006

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.
Messages postés
4
Date d'inscription
mercredi 8 septembre 2004
Statut
Membre
Dernière intervention
18 septembre 2004

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 .
Messages postés
4
Date d'inscription
mercredi 8 septembre 2004
Statut
Membre
Dernière intervention
18 septembre 2004

ç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 ;-)
Messages postés
276
Date d'inscription
dimanche 22 juillet 2001
Statut
Modérateur
Dernière intervention
5 décembre 2013

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.
Afficher les 8 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.