[AJAX] Charger une photo dans un div

Version imprimable

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:

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%> </td><td><img src=Photo/".$row["photo_name"]."></td></tr></table>')\">".$row["pseudo"]."</a>"; echo "</td></font><td> </td><td> </td><td> </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

23/10/2007, 13h58
E.Bzz

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+

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:

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:

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:

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:

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

Voilà à peu prés tout...

Merci

23/10/2007, 15h05
E.Bzz

Citation:

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+
23/10/2007, 15h48
E.Bzz

Avec Firefox => erreur helpOver is not defined

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

JS est sensible à la casse ...

A+
23/10/2007, 15h56
chelguera

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
23/10/2007, 16h07
E.Bzz

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+
23/10/2007, 16h21
chelguera

WOAWWW

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

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

Merci

Citation:

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:

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+

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:

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.

23/10/2007, 17h39
E.Bzz
Tu as essayé
Code:

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+

... il faudra aussi modifier

Code:

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

A+

23/10/2007, 17h55
chelguera
Citation:
Envoyé par E.Bzz

... il faudra aussi modifier

Code:

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
23/10/2007, 18h18
chelguera
en cherchant bien, ce code est pout ie ou netscape et null pour les autres...
:arf:
Code:

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