[AJAX] Charger une photo dans un div

**chelguera** · 23/10/2007, 12h25

bonjour

Avant de poster, j'ai cherché toutes les solutions mais je ne comprens plus...
Voilà suite à une requête, je construit une table qui contient le nom de l'utilisateur et d'autres infos à venir. Quand on passe avec la souris sur le nom, un div s'affiche avec son nom et sa photo... mais la photo n'apparait pas dans le div ?

Construction de la table

Code :

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

1
2
3
4
5
6
7
8
9
 
echo "<table border=\"1\" width=\"100%\">";
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) 
{
	echo "<tr><td><font color=\"#000080\">"	;
	echo "<a onMouseOver=\"affiche_infos(event,'<table width=100% border=1><tr><td colspan=2>Fiche de ".$row["pseudo"]."</td></tr><tr><td width=80%>&nbsp;</td><td><img src=Photo/".$row["photo_name"]."></td></tr></table>')\">".$row["pseudo"]."</a>";
	echo "</td></font><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>";	 	 
}
echo "</table>";

Je peux constater qu'il charge la photo car la div s'affiche suivant la grandeur des photos. J'affiche aussi dans la div le nom de l'utilisateur et celui-ci apparait bien.Il n'y a pas le dessin de photo non trouvée et en plus, je vois les photos dans le temporary internet files donc il les trouve mais ne les affiche pas par contre, si je remplace le nom de l'utilisateur par la photo dans la table ca marche

Qui à une idée ?

Merci

**E.Bzz** · 23/10/2007, 13h58

Bonjour,
peux-tu poster le code généré (en faisant un copié/collé de la source renvoyée par l'url appelée par Ajax, lorsque tu entres cette url directement dans la barre d'adresse du nav) ?

A+

**chelguera** · 23/10/2007, 14h46

Bonjour,

J'ai peur de ne pas avoir bien saisi la question. Donc voici l'appel ajax.
(fichier search.js)

**** _SEARCH_CRITERIA est une requête sql

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
 
function ajax()
{
	var temp = _SEARCH_CRITERIA_;
	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; 
		}
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr);};
    //on appelle le fichier de reponse
			xhr.open("GET", "./ajax/reponses_ajax.php?value="+ _SEARCH_CRITERIA_, true);
    xhr.send(null);
 
}
 
function alert_ajax(xhr)
{
//		var reponse = xhr.responseText;
		var a=0;
		var fin=0;
		document.getElementById('description3').innerHTML="";
    if (xhr.readyState==4) 
    {
			fin =xhr.responseText.indexOf('<');
			a= xhr.responseText.substring(0,fin);
			nbr_membres= xhr.responseText.substring(fin,xhr.responseText.length);
			document.getElementById('description').innerHTML = a + " Membres correspondent à votre recherche";
			document.getElementById('description3').innerHTML = nbr_membres;
    }
}

et voici le fichier reponse_ajax.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
 
$query = "SELECT t_users.*, t_photos.photo_name FROM t_users INNER JOIN t_photos ON t_users.user_id = t_photos.user_id ";
 
$value= $HTTP_GET_VARS['value']; 
if ($value != "")
{
	$query .= " where( ";
	$query .= $value;
	$query .= " ) ORDER BY t_users.pseudo";
}
else
	$query .= " ORDER BY t_users.pseudo";
 
$result = mysql_query($query,$dblink);
if (!$result) {
    $message  = 'Requête invalide : ' . mysql_error() . "\n";
    $message .= 'Requête complète : ' . $query;
    die($message);
}
 
 
$rows = mysql_num_rows($result);
//On boucle sur le resultat
echo $rows;
echo "<table border=\"1\" width=\"100%\">";
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) 
{
	echo "<tr><td><font color=\"#000080\">"	;
	echo "<a onMouseOver=\"affiche_infos(event,'<table width=100% border=1><tr><td colspan=2>Fiche de ".$row["pseudo"]."</td></tr><tr><td width=80%>&nbsp;</td><td><img src=Photo/".$row["photo_name"]."></td></tr></table>')\">".$row["pseudo"]."</a>";
	echo "</td></font><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>";	 	 
}
echo "</table>";

et pour finir ma fonction javascript.

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
 
<script LANGUAGE="Javascript">
IE4 = (document.all) ? 1 : 0;
NS4 = (document.layers) ? 1 : 0;
VERSION4 = (IE4 | NS4) ? 1 : 0;
 
if (!VERSION4) event = null;
 
function helpGetOffset(obj, coord) {
    var val = obj["offset"+coord] ;
    if (coord == "Top") val += obj.offsetHeight;
    while ((obj = obj.offsetParent )!=null) {
        val += obj["offset"+coord];
        if (obj.border && obj.border != 0) val++;
    }
    return val;
 
}
 
function helpDown () {
    if (IE4) document.all.helpBox.style.visibility = "hidden";
    if (NS4) document.helpBox.visibility = "hidden";
}
 
function helpOver (event,texte) {
    if (!VERSION4) return;
 
    var ptrObj, ptrLayer;
    if (IE4) {
        ptrObj = event.srcElement;
        ptrLayer = document.all.helpBox;
    }
    if (NS4) {
        ptrObj = event.target;
        ptrLayer = document.helpBox;
    }
 
    if (!ptrObj.onmouseout) ptrObj.onmouseout = helpDown;
 
    var str = '<DIV CLASS="helpBoxDIV">'+texte+'</DIV>';
    if (IE4) {
        ptrLayer.innerHTML = str;
        ptrLayer.style.top = helpGetOffset (ptrObj,"Top") + -40;
        ptrLayer.style.left = helpGetOffset (ptrObj,"Left")+150;
        ptrLayer.style.visibility = "visible";
    }
    if (NS4) {
        ptrLayer.document.write (str);
        ptrLayer.document.close ();
        ptrLayer.document.bgColor = "yellow";
        ptrLayer.top = ptrObj.y + 20;
        ptrLayer.left = ptrObj.x;
        ptrLayer.visibility = "show";
    }
}
// -->
</script>

j'ai donc un fichier avec des cases à cocher qui elles remplissent la requête.
exemple :

Code :

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

1
2
 
<input type="checkbox" name="r_employe" value="(type =1 )" click= "nlb_Criteria(this); ajax()">

Voilà à peu prés tout...

Merci

**E.Bzz** · 23/10/2007, 15h05

Envoyé par chelguera

J'ai peur de ne pas avoir bien saisi la question.

La question était :
quel code source récupères-tu dans ton navigateur si tu tappes l'adresse
"./ajax/reponses_ajax.php?value="+ _SEARCH_CRITERIA_

directement dans la barre d'adresse de ton navigateur ?
(en remplaçant _SEARCH_CRITERIA_ par une de ses valeurs possible, bien sûr)

A+

**E.Bzz** · 23/10/2007, 15h48

Avec Firefox => erreur helpOver is not defined

Essaye d'utiliser onmouseover et non onMouseOver (pour IE)

JS est sensible à la casse ...

A+

**chelguera** · 23/10/2007, 15h56

J'ai fait le changement en onmouseover mais le résultat reste le même.

Je viens de tester avec firefox et effectivement il ne trouve pas.. as-tu une idée ?

Merci

**E.Bzz** · 23/10/2007, 16h07

Où (dans ta page) as-tu placé le passage <script> qui contient la déclaration de helpOver() ?
Ca m'étonne qu'il ne soit pas dans la même bloc que ajax(), par exemple ...

A+

**chelguera** · 23/10/2007, 16h21

Bon, j'ai mis le script appelé par onmouseover dans le module ajax.
et les styles dans la feuilles de style.

j'ai aussi retiré include(header.php) il y avait repetition de balises head /head body /body... etc etc...

Maintenant, j'ai un résultat avec ie mais pas firefox ?
Bon, je dois à présent vérifier la feuille de style et autres mais au moins ça fonctionne...

Juste firefox à vérifier... je viens à peine d'installer firefox comment voit-on les erreurs ?

Merci

**E.Bzz** · 23/10/2007, 16h42

Envoyé par chelguera

Juste firefox à vérifier... je viens à peine d'installer firefox comment voit-on les erreurs ?

Il faut que tu télécharges le module Firebug

Sinon, essaye

Code :

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

1
2
3
4
5
6
7
8
    if (NS4) {
        ptrLayer.document.write (str);
        ptrLayer.document.close();
        ptrLayer.document.bgColor = "yellow";
        ptrLayer.top = (ptrObj.y + 20) + "px";
        ptrLayer.left = ptrObj.x + "px";
        ptrLayer.visibility = "visible";
    }

Cette fonction nécessiterait un "toilettage" : les test de nav sont en trop, il suffirait d'utiliser des fonctions compatibles (ex : accès par ID et document.getElementById() )

A+

**chelguera** · 23/10/2007, 17h33

Cela fonctionne super avec Ie mais pas firefox et je ne trouve pas l'erreur..

Voici une simple page page html qui pourra mieux aider à comprendre ou est ce satané bug.

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
 
<html>
<head>
 
<!--DEBUT DU CODE ROLLOVER 1-->
<script LANGUAGE="Javascript">
IE4 = (document.all) ? 1 : 0;
NS4 = (document.layers) ? 1 : 0;
VERSION4 = (IE4 | NS4) ? 1 : 0;
 
if (!VERSION4) event = null;
 
function helpGetOffset(obj, coord) {
    var val = obj["offset"+coord] ;
    if (coord == "Top") val += obj.offsetHeight;
    while ((obj = obj.offsetParent )!=null) {
        val += obj["offset"+coord];
        if (obj.border && obj.border != 0) val++;
    }
    return val;
 
}
 
function helpDown () {
    if (IE4) document.all.helpBox.style.visibility = "hidden";
    if (NS4) document.helpBox.visibility = "hidden";
}
 
function helpOver (event,texte) {
    if (!VERSION4) return;
 
    var ptrObj, ptrLayer;
    if (IE4) {
        ptrObj = event.srcElement;
        ptrLayer = document.all.helpBox;
    }
    if (NS4) {
        ptrObj = event.target;
        ptrLayer = document.helpBox;
    }
 
    if (!ptrObj.onmouseout) ptrObj.onmouseout = helpDown;
 
    var str = '<DIV CLASS="helpBoxDIV">'+texte+'</DIV>';
    if (IE4) {
        ptrLayer.innerHTML = str;
        ptrLayer.style.top = helpGetOffset (ptrObj,"Top") + +50;
        ptrLayer.style.left = helpGetOffset (ptrObj,"Left")+150;
        ptrLayer.style.visibility = "visible";
    }
    if (NS4) {
				ptrLayer.document.write (str);
        ptrLayer.document.close();
        ptrLayer.document.bgColor = "yellow";
        ptrLayer.top = (ptrObj.y + 20) + "px";
        ptrLayer.left = ptrObj.x + "px";
        ptrLayer.visibility = "visible";
    }
}
// -->
</script>
 
<style TYPE="text/css">
<!--
#helpBox {
    position: absolute;
    z-index: 1000;
    top: 0px;
    left: 0px;
		width:250px;
 
}
DIV.helpBoxDIV {
 
    padding: 2px;
    background: white;
    border: 1px solid black;
 
    color: black;
    font-family: Arial,Helvetica;
    font-style: Normal;
    font-weight: Normal;
    font-size: 10px;
    line-height: 14px;
}
-->
</style>
<!--FIN DU CODE ROLLOVER 1-->
 
</head>
<body>
<br>
<table width=40% border=1 >		
	<tr>
		<td><a onMouseOver="helpOver(event,'Calque affiché')">Passez la souris pour afficher le calque</a></td>
	</tr>
</table>
<div ID="helpBox"></div>
</body>
</html>

Pourquoi ?

Merci et surtout pour déjà m'avoir aidé sur le premier bug.

**E.Bzz** · 23/10/2007, 17h39

Tu as essayé

Code :

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

1
2
3
4
    if (NS4) {
        ptrObj = event.target;
        ptrLayer = document.getElementById('helpBox');
    }

Ca devrait d'ailleurs fonctionner pour tous les nav (cf. ma remarque précédente sur cette fonction)

A+

**E.Bzz** · 23/10/2007, 17h40

... il faudra aussi modifier

Code :

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

1
2
3
        ptrLayer.style.top = (ptrObj.y + 20) + "px";
        ptrLayer.style.left = ptrObj.x + "px";
        ptrLayer.style.visibility = "visible";

A+

**chelguera** · 23/10/2007, 17h55

Envoyé par E.Bzz

... il faudra aussi modifier

Code :

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

1
2
3
        ptrLayer.style.top = (ptrObj.y + 20) + "px";
        ptrLayer.style.left = ptrObj.x + "px";
        ptrLayer.style.visibility = "visible";

A+

et aussi avec document.getElementById('helpBox') mais rien de rien.

Carlos

**chelguera** · 23/10/2007, 18h18

en cherchant bien, ce code est pout ie ou netscape et null pour les autres...

Code :

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

1
2
3
4
IE4 = (document.all) ? 1 : 0;
NS4 = (document.layers) ? 1 : 0;
VERSION4 = (IE4 | NS4) ? 1 : 0;
if (!VERSION4) event = null;

Bien plus qu'a nettoyer cela

Carlos

[AJAX] Charger une photo dans un div

JavaScript

Discussions similaires

Partager

Partager