[DOM] [php] innerhtml et image

**noussa_nouha** · 06/02/2009, 14h56

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

**le_chomeur** · 06/02/2009, 15h39

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 )

**noussa_nouha** · 06/02/2009, 15h59

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

**le_chomeur** · 06/02/2009, 16h53

tu fais un écho de la source du fichier ou echo <img src=".." /> ???

**noussa_nouha** · 06/02/2009, 17h12

j'ai testé les deux cas echo du path de l'image et echo de <img...>

**le_chomeur** · 06/02/2009, 19h35

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

**noussa_nouha** · 09/02/2009, 10h22

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 :

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
<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 :

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
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);
}

**le_chomeur** · 09/02/2009, 10h31

c'est ce que je te disais :

Code :

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

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 ?

**noussa_nouha** · 09/02/2009, 10h43

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.

**le_chomeur** · 09/02/2009, 10h53

quel est le retour ajax ????

**noussa_nouha** · 09/02/2009, 11h20

j'ai fait alert(req.responseTex);
et ça m'affiche undefined!!!!
puis l'image s'affiche dans la page html!!!!

**le_chomeur** · 09/02/2009, 11h23

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

**noussa_nouha** · 09/02/2009, 11h27

quand je tape localhost/france_ajax.php j'obtiens : /tmp/france788452.png

**le_chomeur** · 09/02/2009, 11h30

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

**noussa_nouha** · 09/02/2009, 11h35

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 :

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
<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>

**le_chomeur** · 09/02/2009, 11h45

essaye de remplacer :

Code :

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

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

par

Code :

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

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

**noussa_nouha** · 09/02/2009, 11h52

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 :

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
<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 :

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
<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>

[DOM] [php] innerhtml et image

JavaScript

Discussions similaires

Partager

Partager