Gif veuillez patienter

Résolu
jvergoby Messages postés 30 Date d'inscription lundi 2 janvier 2006 Statut Membre Dernière intervention 31 octobre 2006 - 31 mars 2006 à 13:47
huberdine Messages postés 158 Date d'inscription samedi 8 février 2003 Statut Membre Dernière intervention 17 juin 2010 - 7 avril 2006 à 14:32
Bonjour à tous,

j'ai besoin d'aide. Je cherche un moyen, suite à un submit, d'afficher un gif animé du style "veuillez patienter, traitement en cours ...", superposé à ma page actuelle. Et une fois le chargement terminé, le gif disparaît.
En gros, quand je clique sur le bouton submit, un gif s'ouvre tout en laissant ma page de formulaire dessous, qui celle-ci se rafraichie si le post a fonctionné et fait disparaitre le gif.
Quelqu'un aurait-il une idée ?

Merci à tous.
A voir également:

23 réponses

huberdine Messages postés 158 Date d'inscription samedi 8 février 2003 Statut Membre Dernière intervention 17 juin 2010
31 mars 2006 à 15:17
AJAX (mélange de javascript et DHTML) sert à ce genre de choses
le tutoriel dont je me suis servi pour commencer : http://www.toutjavascript.com/savoir/xmlhttprequest.php3

Explications : tu te sert de la commande XMLHTTPRequest pour envoyer ton formulaire,
et l'attribut readyState de ton objet XMLHTTPRequest te permet de savoir quand le traitement est fini.
Entre temps, tu peux te servir du javascript pour affichier ton image, et la masquer quand le traitement est fini.

huberdine, mais dort aussi ...
3
jvergoby Messages postés 30 Date d'inscription lundi 2 janvier 2006 Statut Membre Dernière intervention 31 octobre 2006
31 mars 2006 à 15:29
J'ai accepter ta réponse, ce lien est vraiment bien, le tuto est très bien expliqué avec de bons exemples. Cela fait quelques mois que j'ai commencé sur PHP et on me demande des choses de plus en plus compliquées, et grâce à des réponses dans ce genre, je me perfectionne. Je ne connais pas du tout le javascript et le DHTML mais avec ce tuto, je peux m'y mettre.
Encore merci et à bientôt.
0
huberdine Messages postés 158 Date d'inscription samedi 8 février 2003 Statut Membre Dernière intervention 17 juin 2010
31 mars 2006 à 15:32
pas de pb.
Bon courage, et on sera toujours là !

huberdine, mais dort aussi ...
0
jvergoby Messages postés 30 Date d'inscription lundi 2 janvier 2006 Statut Membre Dernière intervention 31 octobre 2006
3 avril 2006 à 23:44
Salut huberdine,
tout d'abord merci encore de m'avoir indiquer le concept AJAX pour mettre en oeuvre ma réalisation. C'est vrai que cette technique est vraiment sympa.
Mais j'ai encore des soucis de compréhension.
J'ai un formulaire de demande de création d'une entreprise et au clic sur le submit, il envoi les infos dans une requête d'insert dans une table et créer un répertoire. C'est cette dernière action qui est longue. Donc pendant ce traitement, j'aimerais un petit message du genre "Veuillez patienter, traitement en cours ...".
Et là où je bute c'est justement sur la mise en oeuvre. Dans ma page, j'ai tout mon script php/mysql avec des header location, et suivant ce que répond le serveur, il répond tel ou tel chose.
Mais je ne sais pas trop où placer le script, l'image du style gif animée que j'ai créé et comment appeler le tout.
J'ai trouvé un truc (en rouge dans mon script ci-dessous)sur un site mais il n'y a pas d'envoi vers le serveur pour connaitre son état. Un div est envoyé mais il s'affiche pendant un certain temps, puis disparait avant même que le serveur ait répondu.
Pourrais-tu me venir en aide si tu as deux minutes. Je te remercie. Ci-dessous mon script :

<?php require_once('dbprotect/connexion.php');
include('funct.php');


session_start(); // On relaye la session
if (session_is_registered("authentification") && $_SESSION['privilege'] = = "admin")
{
} else {
header("Location:index.php?erreur=intru"); // redirection en cas d'echec
}


// ------ AJOUT D'UNE SOCIETE --------


if(isset($_POST['loginf']))
{
if(($_POST['loginf'] == "") || ($_POST['passf'] == ""))
{
header("Location:admin_recor.php?erreur=empty");
} else if($_POST['passf'] == $_POST['pass2f'])
{
// passe toutes les variables $POST en variables
$loginf = addslashes($_POST['loginf']);
$passf = md5($_POST['passf']); // ici, crypte le mot de passe MD5 (j'aime MD5!)
$passf2 = $_POST['passf'];
$nomf = addslashes($_POST['nomf']);
$prenomf = addslashes($_POST['prenomf']);
$privilegef = $_POST['privilegef'];
$societef = addslashes($_POST['societef']);
$courrielf = $_POST['courrielf'];
$dateinscrf = date("Y-m-d");
$validi = 0;
// INSERT dans la base de données
if (is_dir('glpi_'.$loginf))
{
header("Location:admin_recor.php?add=nokrep&sa=$loginf"); // redirection si repertoire existant
} else {
mysql_select_db($database_dbprotect, $dbprotect);
if (mysql_query("INSERT INTO utilisateurs (login, pass, pass2, nom, prenom, privilege, societe, courriel, dateinscr, validite) VALUES ('".$loginf."', '".$passf."', '".$passf2."', '".$nomf."', '".$prenomf."', '".$privilegef."','".$societef."','".$courrielf."','".$dateinscrf."','".$validi."')"))
{
if($privilegef == "admin")
{
header("Location:admin_recor.php?add=okad"); // redirection si création réussie
} else {
mkdir('glpi_'.$loginf);
open_dir('sauv_glpi','glpi_'.$loginf);
if (file_exists("glpi_$loginf/index.php"))
{
if (mysql_query("CREATE DATABASE IF NOT EXISTS `glpi_".$loginf."`"))
{
header("Location:admin_recor.php?add=okut"); // redirection si création user, rep et database réussie
} else {
header("Location:admin_recor.php?add=nokda"); // redirection si création database echouee
}
} else {
header("Location:admin_recor.php?add=nokut"); // redirection si echouee no file
}
}
} else {
header("Location:admin_recor.php?add=nok"); // redirection si echouee BD
}
}
}
}
?>
<html>
<head>
<title>ADMINISTRATION</title>
<script language="javascript">
function do_totals1()
{
document.all.pleasewaitScreen.style.pixelTop = (document.body.scrollTop + 50);
document.all.pleasewaitScreen.style.visibility="visible";
window.setTimeout('do_totals2()',1);
}

function do_totals2()
{
lengthy_calculation();
document.all.pleasewaitScreen.style.visibility="hidden";
}

function lengthy_calculation()
{
var x,y
for(x=0;x<1500000;x++)
{
y += (x * y) / (y - x);
}
}
</script>
</head>



Chargement...

Veuillez patienter...





<form action="" method="post" name="add">

- : : : ESPACE ADMINISTRATION - CR&Eacute;ATION : : : -



Cr&eacute;er un utilisateur ou un administrateur

Login,
,

----

Mot de passe,
,

----

R&eacute;p&eacute;ter mot de passe,
,

----

NOM,
,

----

Pr&eacute;nom,
,

----

Soci&eacute;t&eacute;,
,

----

E-mail,
,

----

Privil&egrave;ge,
<select name ="privilegef" id="privilege">
<option value="user">Utilisateur</option>
<option value="admin">Administrateur</option>
</select>,

----


<?php if(isset($_GET['erreur']) && ($_GET['erreur'] == "passf"))
{
echo ("Veuillez entrer deux fois votre mot de passe SVP

");
}
if(isset($_GET['add']) && ($_GET['add'] == "nok"))
{
echo ("Il y a eu un probl&egrave;me lors de l'insertion en base !!!

");
}
if(isset($_GET['add']) && ($_GET['add'] == "okut"))
{
echo ("L'utilisateur a &eacute;t&eacute; cr&eacute;&eacute; avec succ&egrave;s !
Le r&eacute;pertoire contenant GLPI est cr&eacute;&eacute;
Vous devez vous connecter avec ce nouvel utilisateur
pour configurer sa base GLPI

");
}
if(isset($_GET['add']) && ($_GET['add'] == "nokut"))
{
echo ("La cr&eacute;ation du r&eacute;pertoire glpi a &eacute;chou&eacute;e !
Cependant le r&eacute;pertoire contenant GLPI n'a pas &eacute;t&eacute; cr&eacute;&eacute; !!!

");
}
if(isset($_GET['add']) && ($_GET['add'] == "nokda"))
{
echo ("La cr&eacute;ation de la database glpi a &eacute;chou&eacute;e !
Cependant le r&eacute;pertoire contenant GLPI n'a pas &eacute;t&eacute; cr&eacute;&eacute; !!!

");
}
if(isset($_GET['add']) && ($_GET['add'] == "okad"))
{
echo ("L'administrateur a &eacute;t&eacute; cr&eacute;&eacute; avec succ&egrave;s !

");
}
if(isset($_GET['erreur']) && ($_GET['erreur'] == "empty"))
{
echo ("Un petit oubli non ? Veuillez renseigner au moins un login et un mot de passe SVP

");
}
if(isset($_GET['add']) && ($_GET['add'] == "nokrep"))
{
echo ("La cr&eacute;ation du r&eacute;pertoire contenant GLPI
pour la soci&eacute;t&eacute ".$_GET['sa']."
a &eacute;chou&eacute;e !
Le r&eacute;pertoire glpi_".$_GET['sa']." existe d&eacute;j&agrave !

");
}
?>
</form>

</html>

Merci de ta réponse.
@+
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
huberdine Messages postés 158 Date d'inscription samedi 8 février 2003 Statut Membre Dernière intervention 17 juin 2010
4 avril 2006 à 10:28
J'ai pas mal simplifié le code pour le rendre plus lisible :

<script language="javascript">
function envoi()
{
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
} xhr_object.open("POST", "ton_fichier_traitement.php", true);
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4)
{
// On arrive ici quand le traitement effectué dans le fichier "ton_fichier_traitement.php" est terminé
// On masque le message d'attente
document.getElementById("pleasewaitScreen")style.display='none';
}
} xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Données à envoyer en POST
var data = "loginf="+document.add.loginf.value+"&passf="+document.add.passf.value;
// Envoi des données
xhr_object.send(data);
// On affiche le message pour patienter
document.getElementById("pleasewaitScreen")style.display='block';
}
</script>

<form action="" method="post" name="add" id="add">



</form>

Veuillez patienter

huberdine, mais dort aussi ...
0
jvergoby Messages postés 30 Date d'inscription lundi 2 janvier 2006 Statut Membre Dernière intervention 31 octobre 2006
4 avril 2006 à 10:55
Merci huberdine pour cette réponse.
En fait je sors tout mon traitement php/mysql et les retours header dans un fichier php de traitement et garde juste le formulaire et le traitement XMLHttpRequest dans mon script d'origine.
C'est bien ça.
Les retours header vont-ils être interprêtés ?
Merci
0
huberdine Messages postés 158 Date d'inscription samedi 8 février 2003 Statut Membre Dernière intervention 17 juin 2010
4 avril 2006 à 11:11
oui, c'est bien ça.
la propriété : xhr_object.responseText te permet de récupérer des données en provenance de ton fichier de traitement.
ex :

xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4)
{
// On arrive ici quand le traitement effectué dans le fichier "ton_fichier_traitement.php" est terminé
// On masque le message d'attente
document.getElementById("pleasewaitScreen").style.display='none';
document.getElementById("div_form").InnerHTML = xhr_object.responseText;
}
}

En fait, tu peux voire ton ficher de traitement de ton formulaire comme un iframe invisible : tu peux lui envoyer des données et il peux t'en revoyer.
A toi de lui envoyer ce que tu veux, et de récupérer correctement ce qu'il te renvoie.
Dans l'exemple ci dessus, je traite ce qui est renvoyé comme du html (j'aurais donc fait en sorte que mon fichier de traitement me renvoi du html) et je l'affiche dans un div.
Tu pourrais aussi bien récupérer du javascript et l'exécuter :
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4)
{
// On arrive ici quand le traitement effectué dans le fichier "ton_fichier_traitement.php" est terminé
// On masque le message d'attente
document.getElementById("pleasewaitScreen").style.display='none';
eval(xhr_object.responseText);
}
}

huberdine, mais dort aussi ...
0
jvergoby Messages postés 30 Date d'inscription lundi 2 janvier 2006 Statut Membre Dernière intervention 31 octobre 2006
4 avril 2006 à 11:14
Super et merci encore pour ces réponses.
Je m'y met dès ce soir quand je rentre du taf, et si j'ai encore des questions, je te fais signe.
Merci encore
Bonne journée.
0
huberdine Messages postés 158 Date d'inscription samedi 8 février 2003 Statut Membre Dernière intervention 17 juin 2010
4 avril 2006 à 11:26
pas de pb
Bonne journée à toi aussi

huberdine, mais dort aussi ...
0
jvergoby Messages postés 30 Date d'inscription lundi 2 janvier 2006 Statut Membre Dernière intervention 31 octobre 2006
4 avril 2006 à 23:41
Salut Huberdine,

merci encore pour tes réponses, j'y vois beaucoup plus clair maintenant, j'ai compris le fonctionnement.
Encore une question et j'espère que ce sera la dernière :
dans le cas où je répond que la création est OK, comment faire pour que le formulaire s'affiche mais que les champs soient vides. Comme est mon script, je récupère le contenu de la réponse qui s'affiche là où je lui est dis, mais le formulaire est plein.
Par contre s'il y a un soucis ou qu'un champ est vide alors il s'affiche comme il est à l'heure actuelle c'est à dire avec ce que l'admin a rempli.
Je ne sais pas si je suis clair. Je pense que ça doit être plus compliqué.
Merci et à bientôt.
0
huberdine Messages postés 158 Date d'inscription samedi 8 février 2003 Statut Membre Dernière intervention 17 juin 2010
5 avril 2006 à 01:31
A toi de formater la réponse comme tu le souhaite :
tu peux ensuite utiliser le contenu de cette réponse pour paramétrer tes actions.
Admettons par exemple que tu fasse en sorte que xhr_object.responseText vale "Ok" si ton traitement se soit bien passé.
Dans se cas tu peux faire :

if(xhr_object.responseText == "0k")
{
//Si tu veux vider ton formulaire
document.form.loginf.value = "";
document.form.passf.value = "";

//Si tu veux faire disparaitre ton formulaire :
document.getElementById("div_form").style.display='none';

// etc... à toi de faire marcher ton imagination en fonction de ce que tu veux faire avec l'interface ;-)
}

huberdine, mais dort aussi ...
0
jvergoby Messages postés 30 Date d'inscription lundi 2 janvier 2006 Statut Membre Dernière intervention 31 octobre 2006
5 avril 2006 à 10:28
Super. Et ma dernière question, et je ne t'embête plus. Tu me disais que je pouvais faire passer du html dans le responseText, donc si dans mon traitement php je retourne :
echo "Il y a eu un problème lors de l'insertion en base !!!

"

est ce que les couleurs seront interprêtées. En fait j'aimerais que suivant le message, si répondu en erreur alors rouge sinon vert.

Et ce sera la dernière question.

Merci encore.
0
huberdine Messages postés 158 Date d'inscription samedi 8 février 2003 Statut Membre Dernière intervention 17 juin 2010
5 avril 2006 à 10:41
Il suffit simplement que ta feuille de style corresponde !
C'est donc trivial.

Explications :
Quand tu utilise
document.getElementById("div_form").InnerHTML = xhr_object.responseText;

par exemple pour afficher ce que te retourne le script de traitement du formulaire.

Dans ce cas, le contenu de ton form ayant l'ind "div_form" est remplacé par la valeur contenur dans


xhr_object.responseText

C'est à dire par :
Il y a eu un probl&egrave;me lors de l'insertion en base !!!

en reprenant ton exemple.
Ainsi, si ta feuille de style définit que les span de classe "erreur"
doivent s'afficher en rouge, ton texte s'affichera en rouge !

huberdine, mais dort aussi ...
0
jvergoby Messages postés 30 Date d'inscription lundi 2 janvier 2006 Statut Membre Dernière intervention 31 octobre 2006
5 avril 2006 à 10:51
Tu as répondu à toutes mes questions et je t'en remercie.
J'y vois beaucoup plus clair maintenant.
Ce concept est vraiment pas mal du tout, je vais approfondir le sujet pour mes futurs projets.
Encore merci et à bientôt.
0
huberdine Messages postés 158 Date d'inscription samedi 8 février 2003 Statut Membre Dernière intervention 17 juin 2010
5 avril 2006 à 11:03
A ton service.
et vive AJAX !

huberdine, mais dort aussi ...
0
jvergoby Messages postés 30 Date d'inscription lundi 2 janvier 2006 Statut Membre Dernière intervention 31 octobre 2006
6 avril 2006 à 23:04
Salut huberdine,
et oui encore moi.
J'ai un nouveau soucis. Quand j'insère dans ma table, si je rentre un prénom avec un é, celui-ci est enregistré dans mon champ prenom avec à la place du é un <!--StartFragment --> é
J'ai mis dans mon script de formulaire :
entre <head></head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

dans le traitement javascript :
XhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded', "text/xml; charset=iso-8859-1");

et dans mon script de traitement :
entre <head></head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

mais rien à faire
Je n'y comprend plus rien. J'ai aussi essayé avec utf-8, c'est la même chose.
Sinon le reste du traitement, c'est nickel.

Merci
0
huberdine Messages postés 158 Date d'inscription samedi 8 février 2003 Statut Membre Dernière intervention 17 juin 2010
7 avril 2006 à 10:31
utilise la fonction htmlentities() avant d'envoyer ton texte dans la bese de données :

ex :
$nom = htmlentities($_POST['nom']);
$requete = "INSERT INTO matable (nom) VALUES ('".$nom."')";
// etc ...

Cette fonction va convertir tous les caractères spéciaux pour les remplacer par leur code html
ainsi :
é -> &eacute;
Les caractères spéciaux pourront donc s'affichier correctement

huberdine, mais dort aussi ...
0
jvergoby Messages postés 30 Date d'inscription lundi 2 janvier 2006 Statut Membre Dernière intervention 31 octobre 2006
7 avril 2006 à 11:10
Hello Huberdine,
encore une fois merci de me répondre aussi vite.
Je viens de faire le test et effectivement ça me converti mon caractère en code html. Cependant, mon "é" est toujours remplacé par "é" ce qui donne "&Atilde;&copy;" dans ma table. Le problème survient peut-être avant l'envoi du formulaire de la javascript :
je te met mon code :
<html>
<head>
<title>ADMINISTRATION</title>
<meta http-equiv= "Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
<script language="javascript">
if(document.all && !window.opera)
{
//si Internet Explorer ou Opera
var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
}
else
{
//si Mozilla
var XhrObj = new XMLHttpRequest();
}


function gestionstatechange() {
var elt = document.getElementById('loading');
switch (XhrObj.readyState) {
case 1:
// 1 (loading) début du transfert des données : loading visible
elt.style.display="block";
// test à supprimer
//alert('1');
//break;
case 2:
// 2 (loaded) données transférées : loading visible
elt.style.display="block";
// test à supprimer
//alert('2');
//break;
case 3:
// 3 (interactive) les données reçues sont accssibles en partie : loading visible
elt.style.display="block";
// test à supprimer
//alert('3');
//break;
case 4:


//si la page cible est OK (code HTTP 200) et 4 (complete :les données sont complètement accessibles), loading caché
// NB : Firefox declanche avec "status" tant que le code de chargement n'est pas à 4
if (XhrObj.status == 200)
{
//définition de l'endroit d'affichage:
var content = document.getElementById("contenu");
//on affecte à l'endroit d'affichage la valeur du fichier distant recupéré avec la propriété .responseText
content.innerHTML = XhrObj.responseText ;
// s'il y avait un Javascript à interpreter dans le fichier distant, on ecrirait : eval(XhrObj.responseText);
}
elt.style.display="none";
// test à supprimer
//alert('Requete terminee');
//break;
//default:
// 0 (uninitialized) non initialisé
//alert('Le serveur est bloqué. Veuillez recommencer.');
//break;
}
}


// Fonction d'envoi des données sur le fichier PHP distant
function envoi(donnees, page) {
// On spécifie la page cible et les modalité d"envoi (true spécifie le mode asynchrone)
var sURL = "traitement_admin_record.php";
// on peut aussi utiliser GET ou HEAED
XhrObj.open("POST",sURL,true);
// declanche la fonction qui affiche le loading en fonction de l'etat de la requetet
XhrObj.onreadystatechange = gestionstatechange;
// et on execute la requete elle-meme ( send ) : header puisque c'est une methode POST, puis données
XhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded', "text/html; charset=iso-8859-1");
XhrObj.send(donnees);
}
</script>
</head>

Traitement en cours ...

<form action="" method="post" name="add" id="add">

- : : : ESPACE ADMINISTRATION - CR&Eacute;ATION : : : -



Cr&eacute;er un utilisateur ou un administrateur

Login,
,

----

Mot de passe,
,

----

R&eacute;p&eacute;ter mot de passe,
,

----

NOM,
,

----

Pr&eacute;nom,
,

----

Soci&eacute;t&eacute;,
,

----

E-mail,
,

----

Privil&egrave;ge,
<select name ="privilegef" id="privilege">
<option value="user">Utilisateur</option>
<option value="admin">Administrateur</option>
</select>,

----

</form>

Merci Huberdine
0
huberdine Messages postés 158 Date d'inscription samedi 8 février 2003 Statut Membre Dernière intervention 17 juin 2010
7 avril 2006 à 11:32
Je t'avoue que là je sèche un peu.
ci dessous la ligne que tu utilises :
XhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded', "text/html; charset=iso-8859-1");

// as tu essayé sans le charset (c'est ce que j'utilise) :
XhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Sinon, fais attention à la logique ; '' ou "" :
XhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded', 'text/html; charset=iso-8859-1');
au lieu de
XhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded', "text/html; charset=iso-8859-1");


huberdine, mais dort aussi ...
0
huberdine Messages postés 158 Date d'inscription samedi 8 février 2003 Statut Membre Dernière intervention 17 juin 2010
7 avril 2006 à 11:35
j'ai aussi trouvé ça :

xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=iso-8859-1");

huberdine, mais dort aussi ...
0
Rejoignez-nous