Discussion :

[Will Fou]

Bonjour,

J'ai un petit souci avec un script qui est un mélange de plusieurs scripts trouvés par ci par là. Le script d'origine fonctionne parfaitement sur mon site. C'est un script en PHP mais la partie qui me fait tout disfonctionner est la partie AJAX que j'ai rajoutée.

Voici mes fichiers :

test_histo.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<script src="mesfonc.js" type="text/javascript"></script>
<form name="form_histo" id="form_histo" style="width:500px">
 
<select name="histo" id="histo" onchange="gohisto1(this.value)" style="width:250px" class="defaut">
					<option value="-1">Choisissez une région</option>
					<option value="attaque">Attaque</option>
					<option value="defense">Défense</option>
					</select>
 
					<div id="div_histo">
					</div>
				</form>

Ensuite intervient un fichier Javascript/Ajax :

mesfonc.js

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
 
// Creation de l'objet XMLHttpRequest
function getXhr()
{
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject)  // Internet Explorer 
	{
		try
		{
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (e)
		{
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else 		// XMLHttpRequest non supporté par le navigateur 
	{
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
	return xhr;
}
 
function gohisto1(histo)
{
 
	$idobjet('div_histo').innerHTML = '';	
 
	var xhrmule = getXhr();
	xhrmule.onreadystatechange = function()
	{
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhrmule.readyState == 4 && xhrmule.status == 200)
		{
			leselect = xhrmule.responseText;
			// Ajoute les options
			$idobjet('div_histo').innerHTML = leselect;
		}
	}
 
	// Ici on va voir comment faire du post
	xhrmule.open("POST","image.php",true);
	// ne pas oublier ça pour le post
	xhrmule.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Poste les arguments ici le compte via l'id du select
	var selcpte = $idobjet('histo');
	var cptesel = selcpte.options[selcpte.selectedIndex].value;
	var data = "histo="+cptesel;
	xhrmule.send(data);
}

Puis enfin un fichier PHP qui génère un histogramme (ou devrait le faire )


image.php

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
 
<?php require_once('connexion.inc.php'); ?>
<?php mysql_select_db("............"); ?>
<?php
        header("Content-Type: text/html; charset=iso-8859-15");
        header ("Content-type: image/png");
        $histo = $_POST['histo'];
$moyenne1 = mysql_query("SELECT AVG(".$histo.") FROM condition1"); 
$moyenne = mysql_result($moyenne1,0); 
$joueur = 89;
 
$moyenne = round($moyenne);
 
    $stats = array($joueur, $moyenne); 
 
      
        
        
    $largeurImage = 150; 
    $hauteurImage = 120; 
    $im = ImageCreate ($largeurImage, $hauteurImage)  
            or die ("Erreur lors de la création de l'image");          
    $blanc = ImageColorAllocate ($im, 255, 255, 255);  
    $noir = ImageColorAllocate ($im, 0, 0, 0);   
    $bleu = ImageColorAllocate ($im, 0, 0, 255);         
         // on dessine un trait vertical pour représenter l'axe du temps     
    
 
    // le nombre maximum de visites 
    $statsMax = 100; 
     
    // tracé des batons 
    for ($i=1; $i<=2; $i++) { 
        $hauteurImageRectangle = round(($stats[$i-1]*$hauteurImage)/$statsMax); 
        ImageFilledRectangle ($im, $i*30-7, $hauteurImage-$hauteurImageRectangle, $i*30+7, $hauteurImage-10, $bleu); 
        ImageString ($im, 0, $i*30-7, $hauteurImage-$hauteurImageRectangle-10, $stats[$i-1], $noir); 
    } 
     
    // et c'est fini... 
    ImagePng ($im);
        ?>

La création marche bien, si je ne passe pas par le fichier .js mais l'image ne s'affiche pas si je passe par Ajax.

Merci de votre aide

[roro06]

Bonjour

AJAX, c'est fait pour recevoir du texte (sous format texte ou XML, mais ça reste du texte) .Or je vois :

header ("Content-type: image/png");

Je suppose que tu veux faire passer un objet Image ? Si tel est le cas, c'est pas fait pour.(d'ailleurs, tu utilises bien responseText). Pourquoi ne pas jouer sur l'attribut src d'une image ? Ou utiliser un iframe ?

[Will Fou]

A vrai dire je n'y connais en Ajax, j'ai repris le code exact dont je me sers sur cette page. L'idée est de générer un histogramme suivant la compétence voulue donc un select qui envoie la variable post à un script PHP qui, lui, génère l'histogramme. Donc l'image n'existe nulle part, elle est "fabriquée" puis affichée. Ajax ne me sert qu'à rafraichir la partie où l'histogramme s'affiche et à passer la valeur du select au fichier PHP, je ne passe aucune info relative à l'image dans Ajax.

[Will Fou]

Bien vu ! J'ai essayé l'iframe et ça marche. Bon je n'ai toujours pas compris pourquoi ça ne s'affiche pas autrement mais ça marche.

Merci beaucoup