Dynamiser les page html sans en recharger le contenu
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...
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
- Dynamiser les page html sans en recharger le contenu
- Html array - Conseils pratiques -PHP
- Exemple de code html page d'accueil ✓ - Forum Graphisme/design
- Exemple de page d'authentification - Conseils pratiques -PHP
- Exemple de page d'accueil html et css ✓ - Forum PHP
- Interface pour chaque page ✓ - Forum PHP
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.