IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Comment afficher une popup contenant un progress bar ?


Sujet :

JavaScript

  1. #1
    Membre du Club Avatar de jlassira
    Inscrit en
    Mai 2005
    Messages
    228
    Détails du profil
    Informations forums :
    Inscription : Mai 2005
    Messages : 228
    Points : 61
    Points
    61
    Par défaut Comment afficher une popup contenant un progress bar ?
    salut j'ai le javascript suivant fait avec ajax :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
     
     
    /** JAVASCRIPT OBJET 
    */
     
    /** Classe mère httpRequest*/
     function httpRequest() {
     
            var m_http_request = false;
     
    	/**
    		Initialise et envoie la requete HTTPRequest
    		 @param : url : url de la reuqête ajax
    		 @param : Istimeout : true : recharge la page suivant le timeout
    		 @param : timeout : valeur du timeout
    		 Attention : le résultat doit être mis dans des composants dont les identifiants sont : loading, resultat, result
    	*/
     
    	this.sendRequest = function sendRequest(i_url,i_isTimeout,i_timeout, i_target)
    	{
     
    		this.url = i_url;
    		this.isTimeout = i_isTimeout;
    		this.timeout = i_timeout;
     
    		if (window.XMLHttpRequest) { // Mozilla, Safari,...
    		    m_http_request = new XMLHttpRequest();
    		    if (m_http_request.overrideMimeType) {
    			m_http_request.overrideMimeType('text/xml');
    		    }
    		} else if (window.ActiveXObject) { // IE
    		    try {
    			m_http_request = new ActiveXObject("Msxml2.XMLHTTP");
    		    } catch (e) {
    			try {
    			    m_http_request = new ActiveXObject("Microsoft.XMLHTTP");
    			} catch (e) {}
    		    }
    		}
     
    		if (!m_http_request) {
    		    alert('Abandon :( Impossible de créer une instance XMLHTTP');
    		    return false;
    		}
     
    		if (i_target == "message_zone")
    		{
    			m_http_request.onreadystatechange = readHttpMessageResponse;
    		}
    		else
    		{
    			m_http_request.onreadystatechange = readHttpRequestResponse;
    		}
    		m_http_request.open('GET', i_url, true);
    		m_http_request.send(null);
     
    		if (i_isTimeout)
    		{		
    			setTimeout("reload('"+i_url+"','"+i_isTimeout+"','"+i_timeout+"','"+i_target+"')",i_timeout);		
    		}
    	}
     
     
    	/**
    	   FONCTION PRIVEE
    	*/
     
    	/**
    	* Fonction lue par XMLHTTPRequest jusqu'à ce que la réponse arrive
    	* Le résultat doit être mis dans des composants dont les identifiants sont : loading, resultat, result
    	*/
    	this.readHttpRequestResponse = function readHttpRequestResponse ()
    	{
    		if (m_http_request.readyState == 4)
    		{
    		    if (m_http_request.status == 200)
    		    {
    				document.getElementById("loading").firstChild.nodeValue = "end loading.";
    				document.getElementById("result").innerHTML = m_http_request.responseText; 			
    		    }
    		    else
    		    {
    				alert('Un problème est survenu avec la requête.');
    			}
    		}
    		else
    		{
    			document.getElementById("loading").firstChild.nodeValue = "loading in progress...";
    		}
    	}
     
     
    	this.readHttpMessageResponse = function readHttpMessageResponse ()
    	{
    		if (m_http_request.readyState == 4)
    		{
    		    if (m_http_request.status == 200)
    		    {
    				document.getElementById("message_zone").innerHTML = m_http_request.responseText; 			
    		    }
    		    else
    		    {
    				alert('Un problème est survenu avec la requête.');
    			}
    		}
    	}	    
     
        }
    /**
    FIN CLASSE MERE
    **/
     
     
    /**
    Fonction globale privée
    */
    /**
    Reload est rappelé par le timeout si nécessaire
    */
     function reload(i_url,i_isTimeout,i_timeout, i_target) {
          var lhttpRequest = new httpRequest();
    	lhttpRequest.sendRequest(i_url,i_isTimeout,i_timeout, i_target);
        }

    je voudrais le modifier afain d'integrer l'affichage d'un pop up montrant à la fois un progress bar et un message "loading in progress" et ce le temps que la reponse http soit disponible et puis il se ferme et donc disparait .

    qualqu'un pourrait il m'aider svp ?
    Ce que l'on fait dans sa vie...

  2. #2
    Expert éminent
    Avatar de titoumimi
    Profil pro
    Inscrit en
    Décembre 2003
    Messages
    3 707
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France

    Informations forums :
    Inscription : Décembre 2003
    Messages : 3 707
    Points : 7 285
    Points
    7 285
    Par défaut
    Pour un message d'attente, tu peux faire ca :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    if (m_http_request.readyState != 4) {
                          document.getElementById("message_zone").innerHTML = "Merci de patienter + mongifaniméd'attente";
    }
    mais une vraie progressbar qui te dit exactement quel pourcentage a été exécuté, je sèche ...
    Globalement inoffensif
    Merci de respecter les règles du forum.
    Aucune question technique par MP !
    _______________________________________________________________________
    Cours Ruby et Ruby on Rails (RoR) - Cours PHP - FAQ Ruby / Rails - Livres Ruby / Rails
    Ajax facile avec Ruby on Rails, Prototype, script.aculo.us et les RJS
    Tutoriaux HTML/CSS et PHP

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 669
    Points
    66 669
    Billets dans le blog
    1
    Par défaut
    il y a une boucle quelque part dans laquelle tu puisses incrémenter une variable et en sortir un pourcentage ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  4. #4
    Membre du Club Avatar de jlassira
    Inscrit en
    Mai 2005
    Messages
    228
    Détails du profil
    Informations forums :
    Inscription : Mai 2005
    Messages : 228
    Points : 61
    Points
    61
    Par défaut
    je n'ai pas compri ta question spacefrog !!

    moi ej voudrai ajouter a mon code l'affichage de cette pop up mais:
    1- je en sais pas comment le faire
    2- je ne sais pas a quel niveau l'integrer : c'est a dire entre l'envoie de la requete http et sa reception

    Ce que l'on fait dans sa vie...

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 669
    Points
    66 669
    Billets dans le blog
    1
    Par défaut
    1) je déconseille fortement le popup et recommande l'utilisation d'un div sur la page ...

    2) pour avoir une progressbar il faut qu'a l'instant t d'affichage tu puisse savoir à quel niveau tu en es ... donc savoir la quantité totale d'operation à réaliser et pouvoir en déduire à l'instant t le pourcentage quantité_t / quantité totale ... sinon comment veux tu que la progressbar progresse rationnelement ?
    Ma question est donc comment comptes tu et (à partir de quoi) calculer ce pourcentage ...
    l'opération présente-t-elle une iotération dans la quelle tu pourrais incrémenter une variable par rapport aux nombre totales d'itérations ? (si ce dernier est connu ...)
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre du Club Avatar de jlassira
    Inscrit en
    Mai 2005
    Messages
    228
    Détails du profil
    Informations forums :
    Inscription : Mai 2005
    Messages : 228
    Points : 61
    Points
    61
    Par défaut
    pour l'instant je em contente bd'un progressbar qui ne depend d'aucune tache ou traitement particilier c'est a dire qu'il s'affiche et retarde l'affichage de la reponse http attendue ...un truc intermediaire "statique" si on peut dire qui dure disons un temps X puis il cede la main a la reponse http obtenu tu vois?

    petit a petit on va le modifier pour qu'il soit dependant d'un vrai traitement !!

    merci
    Ce que l'on fait dans sa vie...

  7. #7
    Membre du Club Avatar de jlassira
    Inscrit en
    Mai 2005
    Messages
    228
    Détails du profil
    Informations forums :
    Inscription : Mai 2005
    Messages : 228
    Points : 61
    Points
    61
    Par défaut
    et j'ai oublie de dire que si tu peux vraiement m'aider avec un bout de code faisant ca et utilisant div comme tu l'as suggéré ca sera tres gentil
    Ce que l'on fait dans sa vie...

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 669
    Points
    66 669
    Billets dans le blog
    1
    Par défaut
    en gros:
    mets deux divs sur ta page
    l'un qui sera le message d'attente (gif animé flash ou autre)
    l'autre sera un masque pour empecher un click pendant le traitement

    tous les deux en display none le masque devra être en z-index qui couvre la page entière et le div message sera juste au dessus...
    au lancement de l'ajax tu les fais apparaitre tous les deux ...
    au retour d'ajax (modifier une variable qui aura été testée sur un setInterval) les faire disparaitre ...
    je te file un lien avec un exemple ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  9. #9
    Membre du Club Avatar de jlassira
    Inscrit en
    Mai 2005
    Messages
    228
    Détails du profil
    Informations forums :
    Inscription : Mai 2005
    Messages : 228
    Points : 61
    Points
    61
    Par défaut
    merci ...

    mais pourrais tu mieux detailler cela stp c'est un peu compliqué pour moi .... un exemlpel de code me fera eclaircir les idees si tu peux
    Ce que l'on fait dans sa vie...

Discussions similaires

  1. [Struts:Layout] comment afficher une popup ?
    Par med_alpa dans le forum Struts 1
    Réponses: 1
    Dernier message: 11/04/2008, 11h10
  2. Réponses: 2
    Dernier message: 12/10/2006, 15h29
  3. Comment afficher un Bitmap contenant une couche alpha ?
    Par pwozniak dans le forum Composants VCL
    Réponses: 9
    Dernier message: 17/01/2005, 19h55
  4. [débutante] comment afficher une page asp ?
    Par boucher_emilie dans le forum ASP
    Réponses: 5
    Dernier message: 29/06/2004, 09h40
  5. comment afficher une boite de dialogue simple ?
    Par Ekimasu dans le forum Agents de placement/Fenêtres
    Réponses: 4
    Dernier message: 08/06/2004, 16h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo