[DOM] [php] innerhtml et image

Version imprimable

06/02/2009, 14h56
noussa_nouha

[DOM] [php] innerhtml et image

bonjour,
j'ai un code php qui me genere une image, je veux integer cette image à ma page html, j'ai fait une fonction qui via ajax fait appel à mon code php et j'arrive pas à mettre l'image dans la page.
normalement ça devrai être dans un src de la balise image mais le souci c'est que le nom de l'image est généré automatiquement via un random dans le php.
alors comment faire pour integere l'image?
Merci d'avance
06/02/2009, 15h39
le_chomeur

tu fais un echo du nom de l'image + la source dans ton fichier php
ton retour ajax aura donc l'url de l'image sous forme du'une string :

"monchemin/nomimage.jpg" que tu associeras a la source d'ne image déja dans al page ( ou ajouter en dom )
06/02/2009, 15h59
noussa_nouha

le problème avec l'echo (que j'ai déjà testé) c'est que lors du premier load de ma page il marche correctement mais pas la suite il ne marche plus.
en fait l'image que je crée est cliquable et je fait d'autres requete avec le même code php pour en creer des nouvelles images (niveau de zoom de la première) et avec l'echo ça marche pas trop.
PS:je met l'image dans un formulaire
06/02/2009, 16h53
le_chomeur

tu fais un écho de la source du fichier ou echo <img src=".." /> ???
06/02/2009, 17h12
noussa_nouha

j'ai testé les deux cas echo du path de l'image et echo de <img...>
06/02/2009, 19h35
le_chomeur

quel est le retour ajax ???
donne nous le code html :)

bonjour,
merci pour ton aide mais je crois qu'il me manque des notions de base pour pouvoir faire ce que je veux car je suis novice dans ce domaine avant je travaillais dans un seul fichier .php où je met mes traitements et mon formulaire mais actuellement je dois séparer tout ça donc je pense qu'il faudra que je modifie mon formulaire aussi et remplacer les input hidden dans lesquel je mettais mes variables php par autre chose mais je sais pas quoi exactement. de toute façon voilà mon code html avec les echo dans les hidden et mon code javascript pour la fonction ajax si quelqu'un pourrais m'éclairer un peu j'en serais reconnaissante.
page.html:

Code:

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
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Gîtes et découvertes</title>
        <style type="text/css">
        <!-- .Style1 {
            font-weight: bold
        }
        -->
        </style>
        <link href="css/common.css" rel="stylesheet" type="text/css" />
        <script language="javascript" src="jscripts/common.js"></script>
		<script language="javascript" src="jscripts/fonction-ajax.js"></script>
		<script language="javascript">
		function reinialiser(){
 
		window.location.href ='france.php';
		}
		function dezoomer(){
		document.map.niveau.value = Number(document.map.niveau.value) - 2;
 
		document.map.dezoom.value = true;
		//window.location.href ='france.php';
		document.map.submit();
 
		}
 
        </script>
    </head>
<body  onload="javascript:makeRequest2();">
 
 
 
	<form method=post action="javascript:makeRequest2();" name ="map">
	<div id="UI_content_map">
 
		<div id="image_map"> 
 
		</div>
		<div id="mapZoom">
            <img src="images/map_utilities.png" width="135" height="60" border="0" usemap="#Map" />
            <map name="Map" id="Map">
                <area shape="rect" coords="8,3,59,52" href="javascript:dezoomer();" /><area shape="rect" coords="64,12,105,53" href="javascript:reinialiser();" />
            </map>
 
		</div>
		</div>
		<!--<input type="submit" value="Ok" />-->
		<input type="hidden" name="niveau" value="<?php echo $niveau;?>"/>
		<input type="hidden" name="dezoom" value=""/>
		<input type="hidden" name="dept" value="<?php echo $codedept;?>"/>
		<input type="hidden" name="region" value="<?php echo $coderegion;?>"/>
		<input type="hidden" name="x" value="<?php echo $xpoint;?>"/>
		<input type="hidden" name="y" value="<?php echo $ypoint;?>"/>
		<input type="hidden" name="extent0" value="<?php echo $extent[0];?>"/>
		<input type="hidden" name="extent1" value="<?php echo $extent[1];?>"/>
		<input type="hidden" name="extent2" value="<?php echo $extent[2];?>"/>
		<input type="hidden" name="extent3" value="<?php echo $extent[3];?>"/>
	</form>
 
</body>
</html>

fonction-ajax.js

Code:

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
function makeRequest2(){
    /*var xmlDom = "";
    xmlDom = "<requete><action>Add</action><type>aaaa</type><region>aaaa</region></requete>";
    */
 
    var req = null;
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
 
    }
    else 
        if (window.ActiveXObject) {
            try {
                req = new ActiveXObject("Msxml2.XMLHTTP");
            } 
            catch (e) {
                try {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                } 
                catch (e) {
                }
            }
        }
 
    req.onreadystatechange = function(){
        //document.ajax.dyn.value="Wait server...";  **** icone de connexion
        if (req.readyState == 4) {
            if (req.status == 200) {
                document.getElementById('map').src = req.responseText;
				document.getElementById('niveau').value = Number(document.map.niveau.value) +1;
                /*document.getElementById('apercu').style.visibility='collapse';
                 document.getElementById('AddBloc').style.visibility="visible";*/
            }
            else {
                alert("Error: returned status code " + req.status + " " + req.statusText);
            }
        }
    };
    req.open("POST", "france.php", true);
	obj = document.getElementById('niveau');
    data = "niveau=" + obj.value;
	/*obj = document.getElementById('dezoom');
    data += "&dezoom=" + obj.value;
	obj = document.getElementById('dept');
    data += "&dept=" + obj.value;
	obj = document.getElementById('region');
    data += "&region=" + obj.value;
	obj = document.getElementById('x');
    data += "&x=" + obj.value;
	obj = document.getElementById('y');
    data += "&y=" + obj.value;
	obj = document.getElementById('extent0');
    data += "&extent0=" + obj.value;
	obj = document.getElementById('extent1');
    data += "&extent1=" + obj.value;
	obj = document.getElementById('extent2');
    data += "&extent2=" + obj.value;
	obj = document.getElementById('extent3');
    data += "&extent3=" + obj.value;*/
    req.send(data);
}

09/02/2009, 10h31
le_chomeur

c'est ce que je te disais :

Code:

document.getElementById('map').src = req.responseText;

en général on n'utilise ceci que lorsque l'image est généré dynamiquement ...

sinon le retour req.responseText doit être l'url de l'image , as tu essayé de faire un alert ?
09/02/2009, 10h43
noussa_nouha

effectivement l'image est generé automatiquement à chaque fois que j'appel france.php mais mon souci actuel c'est qu'il me genere l'image mais qui n'est pas correcte le problème proviens du passage des parametres normalement je dois passer le niveau qui est important à ma page php pour qu'elle sache sur quel niveau de zoom je dois mettre l'image, et actuellement il ne fait pas ça correctement.
09/02/2009, 10h53
le_chomeur

quel est le retour ajax ????
09/02/2009, 11h20
noussa_nouha

j'ai fait alert(req.responseTex);
et ça m'affiche undefined!!!!
puis l'image s'affiche dans la page html!!!!
09/02/2009, 11h23
le_chomeur

8O heu la il doit il y avoir un problème ............
tant qu'on a pas le code de retour ... appel uniquement ton script php , tu auras le code que tu as ... sans passer par ajax
09/02/2009, 11h27
noussa_nouha

quand je tape localhost/france_ajax.php j'obtiens : /tmp/france788452.png
09/02/2009, 11h30
le_chomeur

8O donc l'erreur vient d'ailleur, post le code html complet ( celui que tu m'as mp )

l'alert fonctionne maintenant c'étais une erreur de ma part j'ai l'url de l'image qui s'affiche.
pour la page html :

Code:

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
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Gîtes et découvertes</title>
        <style type="text/css">
        <!-- .Style1 {
            font-weight: bold
        }
        -->
        </style>
        <link href="css/common.css" rel="stylesheet" type="text/css" />
        <script language="javascript" src="jscripts/common.js"></script>
		<script language="javascript" src="jscripts/fonction-ajax.js"></script>
		<script language="javascript">
		function reinialiser(){
 
		window.location.href ='france_ajax.php';
		}
		function dezoomer(){
		document.map.niveau.value = Number(document.map.niveau.value) - 2;
 
		document.map.dezoom.value = true;
		document.map.submit();
 
		}
        </script>
    </head>
<body  onload="javascript:makeRequest2();">
 
 
 
	<form method=post name ="map">
	<div id="UI_content_map">
 
		<div id="image_map"> 
		<a href="javascript:makeRequest2();"><img id="map" width="362" height="361" border="0"></img></a>
		</div>
		<div id="mapZoom">
            <img src="images/map_utilities.png" width="135" height="60" border="0" usemap="#Map" />
            <map name="Map" id="Map">
                <area shape="rect" coords="8,3,59,52" href="javascript:dezoomer();" /><area shape="rect" coords="64,12,105,53" href="javascript:reinialiser();" />
            </map>
 
		</div>
		</div>
		<!--<input type="submit" value="Ok" />-->
		<input type="hidden" id="niveau" name="niveau" value="0"/>
		<input type="hidden" name="dezoom" id="dezoom" value=""/>
		<input type="hidden" name="dept" id="dept" value=""/>
		<input type="hidden" name="region" id="region" value=""/>
		<input type="hidden" name="x" id="x" value=""/>
		<input type="hidden" name="y" id="y" value=""/>
		<input type="hidden" name="extent0" id="extent0" value=""/>
		<input type="hidden" name="extent1" id="extent1" value=""/>
		<input type="hidden" name="extent2" id="extent2" value=""/>
		<input type="hidden" name="extent3" id="extent3" value=""/>
	</form>
 
</body>
</html>

09/02/2009, 11h45
le_chomeur

essaye de remplacer :

Code:

<area shape="rect" coords="8,3,59,52" href="javascript:dezoomer();" />

par

Code:

<area shape="rect" coords="8,3,59,52" onclick="dezoomer();" />

pareil aucune différence. pour le dezoom c'est une icone à part mon problème consiste dans le fait que le zoom qui normalement se fait sur clique de l'image map ne fonctionne pas
sous firebug au départ j'ai ça :

Code:

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
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>Gîtes et découvertes</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="css/common.css">
</link>
<script src="jscripts/common.js" language="javascript">
</script>
<script src="jscripts/fonction-ajax.js" language="javascript">
</script>
<script language="javascript">
</script>
</head>
<div id="_firebugConsole" style="display: none;" FirebugVersion="1.3.2"/>
<body onload="javascript:makeRequest2();">
<form name="map" method="post">
<div id="UI_content_map">
<div id="image_map">
<a href="javascript:makeRequest2();">
<img id="map" height="361" border="0" width="362" src="/tmp/france557952.png"/>
</a>
</div>
<div id="mapZoom">
<img height="60" border="0" width="135" usemap="#Map" src="images/map_utilities.png"/>
<map id="Map" name="Map">
<area href="javascript:dezoomer();" coords="8,3,59,52" shape="rect"/>
<area href="javascript:reinialiser();" coords="64,12,105,53" shape="rect"/>
</map>
</div>
</div>
<input id="niveau" type="hidden" value="1" name="niveau"/>
<input id="dezoom" type="hidden" value="" name="dezoom"/>
<input id="dept" type="hidden" value="" name="dept"/>
<input id="region" type="hidden" value="" name="region"/>
<input id="x" type="hidden" value="" name="x"/>
<input id="y" type="hidden" value="" name="y"/>
<input id="extent0" type="hidden" value="" name="extent0"/>
<input id="extent1" type="hidden" value="" name="extent1"/>
<input id="extent2" type="hidden" value="" name="extent2"/>
<input id="extent3" type="hidden" value="" name="extent3"/>
</form>
</body>
</html>

une fois je clique sur l'image le code au niveau de firabug deviens :

Code:

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
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>Gîtes et découvertes</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="css/common.css">
</link>
<script src="jscripts/common.js" language="javascript">
</script>
<script src="jscripts/fonction-ajax.js" language="javascript">
</script>
<script language="javascript">
</script>
</head>
<div id="_firebugConsole" style="display: none;" FirebugVersion="1.3.2"/>
<body onload="javascript:makeRequest2();">
<form name="map" method="post">
<div id="UI_content_map">
<div id="image_map">
<a href="javascript:makeRequest2();">
<img id="map" height="361" border="0" width="362" src="/tmp/france79132.png"/>
</a>
</div>
<div id="mapZoom">
<img height="60" border="0" width="135" usemap="#Map" src="images/map_utilities.png"/>
<map id="Map" name="Map">
<area href="javascript:dezoomer();" coords="8,3,59,52" shape="rect"/>
<area href="javascript:reinialiser();" coords="64,12,105,53" shape="rect"/>
</map>
</div>
</div>
<input id="niveau" type="hidden" value="2" name="niveau"/>
<input id="dezoom" type="hidden" value="" name="dezoom"/>
<input id="dept" type="hidden" value="" name="dept"/>
<input id="region" type="hidden" value="" name="region"/>
<input id="x" type="hidden" value="" name="x"/>
<input id="y" type="hidden" value="" name="y"/>
<input id="extent0" type="hidden" value="" name="extent0"/>
<input id="extent1" type="hidden" value="" name="extent1"/>
<input id="extent2" type="hidden" value="" name="extent2"/>
<input id="extent3" type="hidden" value="" name="extent3"/>
</form>
</body>
</html>