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 :

affichage d'une image


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Inscrit en
    Avril 2007
    Messages
    483
    Détails du profil
    Informations personnelles :
    Âge : 37

    Informations forums :
    Inscription : Avril 2007
    Messages : 483
    Par défaut affichage d'une image
    Bonjour,

    Tout d'abors désolé si je ne poste pas au bon endroit, je ne savais pas trop dans quelle partie poster car je ne sais pas d'où vient mon problème (si c'est un pb javascript, php ou html)

    Voila en fait, j'ai une page avec 5 boutons radio : week, month, quarter, year, custom

    quand j'en sélectionne un, via javascript j'affiche une liste déroulante avec des numéros de semaine mois ... ou des listes déroulantes pour sélectionner une date de début et de fin pour custom.

    Mon problème est le suivant :

    si je sélectionne le radio week par exemple, et que je sélectionne la semaine en cours, j'ai un onchange sur la liste déroulante qui appelle une fonction js qui appelle un script php qui crée et affiche un graphique généré dynamiquement., jusque la ca marche bien.

    Le problème est si je change de semaine, ou si je veux mettre une autre période à la place, le graphique reste le même dans le naviguateur alors que l'image à afficher a bien été modifiée.

    J'ai essayé de supprimer la mise en cache mais rien.

    Je ne vois pas d'ou peu venir le fait que l'image ne se rafraichisse pas, j'utilise exactement le même code pour afficher des tableaux de la même manière (à la différence que je génère un tableau htlml a la place du graphique) donc je ne pense pas que ce soit un problème de code (d'autant que le nouveau graphique est bien enregistré dans l'image puisque j'ai vérifié)

    Je ne sais absolument pas d'où cela peut venir.

    Petite chose que j'ai remarqué, si je vérifie que l'image a bien été modifiée via le naviguateur, l'image affichée dans l'appli change pour mettre celle que j'ai vérifié (mais ne bouge plus non plus après)

    C'est comme si elle se mettait en cache (malglé le fait que j'ai interdit le cache) et que du coup il ne prends pas la peine d'aller revérifier...


    Merci d'avance pour votre aide car je ne vois pas du tout d'où cela vient

    ps : merci aux admins de me prévenir si ils déplacent le topic ^^

  2. #2
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    un petit bout de code serait le bienvenue
    montre nous comment tu affiche ton image ,

    j'ai déja été confronté a ce problème , j'ai utilisé une méthode javascript :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var img = new Image();
    img.src = "nomimage";
    puis une méthode qui vérifit le load de l'image

    , je complèterais quand j'aurais vu ton code pour éviter de partir sur une fausse piste

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    149
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : Luxembourg

    Informations forums :
    Inscription : Mai 2007
    Messages : 149
    Par défaut
    Bonjour,

    Je pense qu'il faudrait recharger l'image après qu'elle ait été changée. Peut-être que ceci fera l'affaire.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('idDeLImage').src = document.getElementById('idDeLImage').src +"?a="+ Math.random(1);

  4. #4
    Membre éclairé
    Inscrit en
    Avril 2007
    Messages
    483
    Détails du profil
    Informations personnelles :
    Âge : 37

    Informations forums :
    Inscription : Avril 2007
    Messages : 483
    Par défaut
    Voila comment je génère mon image :

    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
     
    $stats = array ('available' => 0, 'unavailable' => 0);
    while ($appstatus = oci_fetch_assoc($res['stmt']))
    {
    	foreach ($appstatus as $champ => $val)
    	{
    		$status[$champ] = $val;
    	}
    	if ($status['STATSAPPLI'] == '0')
    	{
    		$stats['unavailable'] += $status['NB_STATSAPPLI'];
    	}
    	else if ($status['STATSAPPLI'] == '1')
    	{
    		$stats['available'] += $status['NB_STATSAPPLI'];
    	}
    }
     
    //if we have no state, we print a message
    if ($stats['available'] == 0 && $stats['unavailable'] == 0)
    {
    	echo '<p>No stats availables.</p>';
    }
    //else we print the graph
    else
    {
    	//creating the graphic with the size
    	$graph = new Graph(650, 350);
     
    	//adding a shadow
    	$graph->shadow->setPosition(Shadow::RIGHT_BOTTOM);
    	$graph->shadow->setSize(4);
     
    	//background
    	$graph->setBackgroundGradient(
    		new LinearGradient(
    			new Color(240, 240, 240, 0),
    			new White,
    			0
    		)
    	);
     
    	//we create the camembert with the values of the array
    	$pie = new Pie(array_values($stats));
     
    	//percentages with a tenth precision
    	$pie->setLabelPrecision(1);
     
    	//adding the legend
    	$pie->setLegend(array_keys($stats));
     
    	//repositioning the legend
    	$pie->legend->setPosition(1.45, .25);
     
    	//moving the camembert to the bottom-left
    	$pie->setCenter(.36, .58);
     
    	//resizing the camembert
    	$pie->setSize(.65, .65);
     
    	//adding a 3D effect
    	$pie->set3D(30);
     
    	//adding a title
    	$pie->title->set('Graphic for the application '.$appname.' (project '.$projname.')');
     
    	//replacing
    	$pie->title->move(0, -60);
     
    	//designing
    	$pie->title->setFont(new TuffyBold(14));
    	$pie->title->setBackgroundColor(new White(50));
    	$pie->title->setPadding(5, 5, 2, 2);
    	$pie->title->border->setColor(new Black());
     
    	//adding the camembert to the graphic
    	$graph->add($pie);
     
    	//we draw the graphic
    	$graph->draw(DCROOT."/pictures/graph.png");
    	echo '<img src="pictures/graph.png" alt="Stats" />';
    }
    La boucle while du début traite et récupère le résultat.

    Ensuite je crée mon graphique avec la librairie artichow (pour ceux qui connaissent).

    L'avant dernière ligne enregistre le graphique généré dans l'image graph.png
    La denière ligne affiche l'image.



    Ce n'est pas tout le code de la page appelée par mon script javascript mais le reste était seulement la récup des données passées en paramètres lors de l'appel de la page, ainsi que la création de la requête à effectuer.

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    149
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : Luxembourg

    Informations forums :
    Inscription : Mai 2007
    Messages : 149
    Par défaut
    Dans le php : enlève la dernière ligne (le echo).

    Dans le html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <img id="graphique" src="pictures/graph.png" alt="stats" style="display:none"/>
    Dans le javascript :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    function refresh() {
    	//appel de la page php qui crée le .png
    	...
     
    	document.getElementById('graphique').src = document.getElementById('graphique').src+"?a="+Math.random(1);
    	if(document.getElementById('graphique').style.display == "none") {
    		document.getElementById('graphique').style.display = "inline"; //(ou block)
    	}
    }

  6. #6
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    effectivement , je te conseille de générer l'image comme tu le fais et 2 méthodes :

    force le no-cache dans le header de la page , sois faire une méthode javascript pour recharger l'image :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function loadIt(theImage,form) {
        document.images[0].src = theImage
    	verif(document.images[0]);
    }
     
    function verif(img) {
    	if(img.complete)
    		alert("chargé");
    	else
    		setTimeout(function() {verif(img);}, 500);
    }

  7. #7
    Membre éclairé
    Inscrit en
    Avril 2007
    Messages
    483
    Détails du profil
    Informations personnelles :
    Âge : 37

    Informations forums :
    Inscription : Avril 2007
    Messages : 483
    Par défaut
    keul85 j'ai essayé ta version, le rafraichissement de l'image se faisait mais pas à chaque fois (une fois sur deux/sur 3 à peu près, mais c'est toujours mieux que moi ^^ ) et puis on dirait que c'est un peu aléatoire :
    par exemple si je prends des semaines j'ai à la 1ere sélection 50 - 50, deuxième 70-30, re première 60-40, re deuxième 70-30, re première 60-40, etc...
    et le problème se répète si je change d'échelonage (si je passe à des mois ou des années etc)

    Pour être sur que j'ai mis le code ou il faut je te montre ma fonction javascript (tu reconnaitra surement le code que tu m'as proposé ^^ )
    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
     
    function graph(appname, projname, period, value){
    	var xhr = getXhr();
     
    	// On defini ce qu'on va faire quand on aura la reponse
    	xhr.onreadystatechange = function(){
    		// On ne fait quelque chose que si on a tout recu et que le serveur est ok
    		if(xhr.readyState == 4 && xhr.status == 200){
    			leselect = xhr.responseText;
    			document.getElementById('graph').innerHTML = '';
    			document.getElementById('graph').innerHTML = leselect;
    		}
    	}
     
    	// Ici on va voir comment faire du post
    	xhr.open("POST","statsGraph.php",true);
    	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    	xhr.send("appname="+appname+"&projname="+projname+"&period="+period+"&value="+value);
     
    	document.getElementById('graphique').src = document.getElementById('graphique').src+"?a="+Math.random(1);
    	if(document.getElementById('graphique').style.display == "none") {
    		document.getElementById('graphique').style.display = "inline"; //(ou block)
    	}
    }
    (je t'ai épargné la méthode getXhr(), c'est exactement la même que dans le cours developpez sur ajax)



    le_chomeur j'avais déja essayer de forcer le no-cache dans le header html mais cela n'y faisait rien.
    je vais essayer ta solution pour voir, juste une question : que sont les variables theImage et form dans l'appel de la fonction
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    function loadIt(theImage,form) {
    ?

    theImage doit pointer sur l'image j'imagine mais je ne vois pas comment faire (je débute en javascript )

  8. #8
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    hups autant pour moi :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    loadIt('http://www.paris-360.com/admin/upload/tuilerie_neige hd.jpg',this.form)"
    donc url de l'image et , le formulaire ( tu peux adapter facilement )

    et au passage j'ia vu du innerHTML dans ton code =>

Discussions similaires

  1. [Tomcat] Affichage d'une image
    Par david71 dans le forum Tomcat et TomEE
    Réponses: 8
    Dernier message: 15/02/2005, 11h37
  2. Réponses: 2
    Dernier message: 27/12/2004, 09h23
  3. Pbs d'affichage d'une image sur un panel
    Par ysr1 dans le forum C++Builder
    Réponses: 2
    Dernier message: 23/09/2004, 09h55
  4. [FLASH MX] Qualité d'affichage d'une image
    Par n_tony dans le forum Flash
    Réponses: 3
    Dernier message: 16/08/2004, 09h44
  5. Affichage d'une image sous linux
    Par Braim dans le forum x86 32-bits / 64-bits
    Réponses: 5
    Dernier message: 25/03/2003, 10h41

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