<style>
#login:hover {
background: yellow;
}
#spanLogin {
display:none;
}
</style>
Login: <span id="login" onclick="formLogin();"">MonLogin</span>
<span id="spanLogin"><input type="text" name="login" id="formLogin"
onblur="changeLogin();" /><input type="submit" value="Valider"
onclick="changeLogin();"/></span><br />
<span id="message"></span>
function formLogin() {
document.getElementById('login').style.display =
"none";
document.getElementById('spanLogin').style.display
= "inline";
document.getElementById('formLogin').value = document.getElementById('login').innerHTML;
document.getElementById('message').innerHTML = "";
}
function changeLogin() {
document.getElementById('login').style.display =
"inline";
document.getElementById('spanLogin').style.display
= "none";
document.getElementById('message').innerHTML = "Sauvegarde
en cours.";
document.getElementById('message').style.color =
"red";
validLogin();
}
<?php
// Nous partons du principe que le code SQL est complet et bon.
echo true.",".$_GET['login'];
?>
function handleHttpResponse() {
if (http.readyState == 4) {
results = http.responseText.split(",");
res = results[0];
newLogin = results[1];
if (res == true) {
document.getElementById('login').innerHTML
= newLogin;
document.getElementById('message').innerHTML
= "Login '"+newLogin+"' correctement enregistré.";
document.getElementById('message').style.color
= "green";
}
if (res == false) {
document.getElementById('message').innerHTML
= "Problème d'enregistrement du login '"+newLogin+"'.";
document.getElementById('message').style.color
= "red";
}
}
} |
Avantage d'une bonne gestion du DOM : être capable de modifier à l'envi certaines sections
de sa page, sans devoir à chaque fois recharger celle-ci.
Nous
reprenons ici l'exemple du login, cette fois en donnant la possibilité
de cliquer le texte affiché. Ce clic provoque un remplacement
du texte par un champ contenant ce texte et un bouton de
validation.
Si le bouton est cliqué, une requête HTTPRequest
est lancée, et un code de retour est envoyé. Nous partirons
ici du principe que le code SQL fonctionne à chaque fois,
pour nous concentrer sur les modifications appliquées au DOM,
qui réalise le plus gros du travail visuel.
Notre code HTML est déjà étendu, pour contenir le formulaire
de modification, caché grâce à CSS.
Le code Javascript dispose en conséquence de fonctions pour
cacher et afficher ces éléments span
: formLogin()
et changeLogin().
Le second se charge par ailleurs de lancer la requête HTTPRequest.
Notre code PHP, ici, ne sera qu'une coquille renvoyant l'acceptation
du serveur, et le login modifié. Bien sûr, en production, ce
fichier contiendra toutes les requêtes SQL nécessaires, ainsi
que des tests, afin de renvoyer "false"
plutôt que "true"
au client. La réponse de HTTPRequest étant une chaîne, nous
concaténant "true"
et le nouveau login avec une virgule.
Enfin, la fonction JavaScript handleHttpResponse()
se charge de récupérer les informations et de les utiliser à
bon escient. Elle sépare les deux valeurs renvoyée par PHP dans
un tableau results[],
et exploite ce dernier pour afficher le résultat. |
