showMondialDialog() dans un tableau créé par JS [Résolu]

[darkterreur]

Bonjour a Tous,

Je vous écris car je rencontre un problème.
Comment ? Rien d'étonnant me direz vous?
Oui effectivement.

Donc j'ai une page qui me permet de créer un tableau en fonction de filtre date (année et mois). Donc après sélection d'un ou plusieurs filtre, un petit coup d'ajax, je récupère mes valeurs de BDD, et je créer un tableau avec les élément dedans.

Jusque la tout fonctionne. Je tiens a précisé que je N'utilise PAS Jquery, je fais tout avec mes petites mains histoire de m'amuser un peu.

Allons bon je m'égare, mon probleme maintenant, et bien comme vous avez pu le voir dans le titre je désire quand je click sur le nom de l'un de mes candidats ( oui mon tableau me sort les candidat du test par année grace au filtre), je voudrai donc ouvrire une fenetre fille qui enleve le focus de la mere et qui m'affiche des information plus complete sur mon candidat.

J'utilise donc la fonction showMondialDialog() , patience je vais copier mon code, et mon pour se faire j'ai besoin de mettre un onclick dans le <td> qui contiens le nom, mais je n'y arrive pas pour cause mon <td> est généré par JS

Voici ma fonction que je veux appeler

Code :

1
2
3
4
5
6
 
function infoCandidat(theId)
		{
			var ret;
			ret = showMondialDialog("info_can.php","","status=no; center=yes; dialogWidth=400px; dialogHeight=410px; help:no; scroll:yes;");
		}

Ici je vous met ma fonction qui creer mon tableau n'oublier pas mon tableau est bien creer et je recoit bien mon xml :

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
 
function readData(oData) 
		{
			$("tableau").innerHTML = "";
			var nodes   = oData.getElementsByTagName("noeud");
 
			for (var i=0; i<nodes.length;i++) {
				leId = nodes[i].getElementsByTagName("id")[0].firstChild.nodeValue;
				leNom = nodes[i].getElementsByTagName("Nom")[0].firstChild.nodeValue;
				lePrenom = nodes[i].getElementsByTagName("prenom")[0].firstChild.nodeValue;
				laSpecialite = nodes[i].getElementsByTagName("specialite")[0].firstChild.nodeValue;
				leScore = nodes[i].getElementsByTagName("score")[0].firstChild.nodeValue;
				leSeuil = nodes[i].getElementsByTagName("seuil")[0].firstChild.nodeValue;
 
 
				td1 = document.createElement("td");
				td2 = document.createElement("td");
				td3 = document.createElement("td");
				td4 = document.createElement("td");
				td5 = document.createElement("td");
 
				td1.id= leId;
				td1.onclick="infoCandidat();";//j'essaye d’insérer le js au td ici
 
				td1.appendChild(document.createTextNode(leNom));
				td2.appendChild(document.createTextNode(lePrenom));
				td3.appendChild(document.createTextNode(laSpecialite));
				td4.appendChild(document.createTextNode(leScore));
						if(leScore >= leSeuil)
						{ laDecision = "Reçu"; }
						else
						{ laDecision = "Recalé"; }
				td5.appendChild(document.createTextNode(laDecision));
 
				monTr = document.createElement("tr");// on creer une balise
 
 
				monTr.appendChild(td1);
				monTr.appendChild(td2);
				monTr.appendChild(td3);
				monTr.appendChild(td4);
				monTr.appendChild(td5);
 
				$("tableau").appendChild(monTr);
			}
		}

certain d'entre vous la reconnaîtrons peut être vous m'avez aider a la faire fonctionner maintenant juste au cas ou mon code html :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<table >
				<thead>
					<tr id="titre"  style="border:1px solid black">
						<th style="border:1px solid black;width:100px;">Nom</th>
						<th style="border:1px solid black;width:100px;">prenom</th>
						<th style="border:1px solid black;width:100px;">specialite</th>
						<th style="border:1px solid black;width:100px;">Score</th>
						<th style="border:1px solid black;width:100px;">Decision</th>
					</tr>
				</thead>
				<tbody id="tableau" >
				</tbody>
 
			</table>

Voila Merci d'avance pour l'aide que vous pourrez m'apporter
Je reste a votre disposition pour de plus amples informations..

[mekal]

pas sur d'avoir bien suivi mais si je me trompe pas c'est de cette endroit dont il est question

Code :

1
2
 
td1.onclick="infoCandidat();"

sa doit se faire de cette facon

Code :

1
2
 
td1.onclick=infoCandidat;

par contre si tu a besoin d'une reference a l'element la solution est de passer par une fonction anonyme et utilise le mot this

Code :

1
2
 
td1.onclick=function(){infoCandidat(this)};

[Loceka]

La méthode c'est showModalDialog, ça ne peut pas être mondial vu que c'est connu uniquement de Internet Explorer (ton script ne marchera donc pas sur Opera, Firefox, Chrome, Safari, ... même avec la fonction correcte).

[darkterreur]

Merci pour vos reponse
Effectivement je me suis rendu compte du modal au lieu du mondial, visiblement firefox a l'air de le faire fonctionner.

cela fonctionne effectivement avec

Code :

td1.onclick=infoCandidat;

cependant comme je désire lui passer ceci comme paramètre

Code :

leId = nodes[i].getElementsByTagName("id")[0].firstChild.nodeValue;

Dois je faire comme vous avez dis en passant par une fonction temporaire?

merci d'avance pour vos précieuse réponse

[javatwister]

Code :

var nodes   = oData.getElementsByTagName("noeud");

j'addooore

Code :

là je tombe de ma chaise

[darkterreur]

Je sent un certain sarcasme !
qui a t'il de si drôle?

[mekal]

si l'element a modifier est celui ou on clic

Code :

1
2
 
td1.onclick=function(){infoCandidat(this)};

Code :

1
2
3
4
5
6
function infoCandidat(theId){

 leId = theId.firstChild.nodeValue;

}

[darkterreur]

Bon trêve de plaisanterie :
J'ai donc une belle fenêtre popup, mais qui malgré le code n'est pas centré
je suppose que cela a avoir avec le navigateur utilisé, je suis sous firefox

Code :

ret = showMondialDialog("info_can.php","","status=no; center=yes; dialogWidth=400px; dialogHeight=410px; help:no; scroll:yes;");

Pour le moment je ne trouve pas la parade, si jamais vous avez une idée je suis preneur
Merci d'avance

[darkterreur]

Intéressant Mekal

J'ai fait autre chose :

Code :

td1.onclick=function(){return infoCandidat(this.id)};

et donc:

Code :

1
2
3
4
5
function infoCandidat(theId)
		{
			var ret;
			ret = showMondialDialog("info_can.php?monId="+theId,"","status=no; center=yes; dialogWidth=400px; dialogHeight=410px; help:no; scroll:yes;");
		}

cela fonctionne chez moi, nos deux code donne t'il la même chose?

merci d'avance

[mekal]

si c'est l'id de l'element qui t'interesse c'est bon en passant juste par this sa pointe vers l'element directement

[darkterreur]

Merci pour ces informations, reste plus que le centrage de la popup et je verrouille ce post;

[nadox]

Envoyé par darkterreur

Bon trêve de plaisanterie :
J'ai donc une belle fenêtre popup, mais qui malgré le code n'est pas centré
je suppose que cela a avoir avec le navigateur utilisé, je suis sous firefox

Code :

ret = showMondialDialog("info_can.php","","status=no; center=yes; dialogWidth=400px; dialogHeight=410px; help:no; scroll:yes;");

Pour le moment je ne trouve pas la parade, si jamais vous avez une idée je suis preneur
Merci d'avance

En fait, la fonction 'showMondialDialog' n'existe toujours pas ! c'est 'showModalDialog' !
Afin d'être cross-browser, il faudrait utiliser window.open qui ne gère pas l'attribut de configuration center. (et d'ailleurs si firefox interprète quand même 'showModalDialog' il doit simplement utiliser window.open à la place, donc pas de 'center')

EDIT : firefox gère normalement bien 'showModalDialog' depuis sa version 3, et possède bien un attribut 'center' --> https://developer.mozilla.org/fr/DOM...howModalDialog

[darkterreur]

Oui oui effectivement honte a moi j'ai fait un vulgaire copier /coller de ma propre faute

merci pour le liens je regarde de suite

[darkterreur]

Bon je suis un peu embêté car j'ai tester toutes les valeurs et syntaxe possible et finalement pas de centrage..

Pourtant c'est bien censé être compatible et j'ai bien la dernière version de Firefox, des fois que l'on me le demande.

Merci d'avance si quelqu'un a une autre idée.

[nadox]

Peut-être une piste : http://cdmckay.org/blog/2009/07/07/h...owmodaldialog/

[darkterreur]

Bon cela cela ne serai pas compatible

j'ai donc broder ceci pour ruser mais cela ne fonctionne toujours pas ai je fait une erreur?

Code :

1
2
3
4
5
6
7
8
9
10
11
function infoCandidat(theId)
		{
			var ret;
 
			hauteur = "450px";
			largeur = "450px";
			positionX = "("+document.body.clientWidth+"-"+largeur+")/ 2 ";
			positionY = "("+document.body.clientHeight+"-"+largeur+")/ 2 ";
 
			ret = showModalDialog("info_can.php?monId="+theId,"","status=no; dialogLeft="+positionX+"; dialogTop="+positionY+"; dialogWidth="+largeur+"; dialogHeight="+hauteur+"; help:no; scroll:yes;");
		}

Merci d'avance pour votre précieuse aide .

[nadox]

Les attributs de configuration sont en notation 'camelCase' pour le showModalDialog de ie. Elle sont en minuscules pour celui de firefox...

Il va surement falloir gérer le navigateur du client pour avoir un rendu identique...

tiens, voici une méthode qui semble fonctionner(bien centrée sur mon firefox) : http://www.nigraphic.com/blog/java-s...-center-screen

[mekal]

le souci dans le code que tu a mis c'est que tout est entre guillemet

Code :

1
2
3
 
positionX = document.body.clientWidth-(largeur/ 2) ;
positionY =document.body.clientHeight-(largeur/ 2) ;

[darkterreur]

Bonjour,

Merci a vous pour votre aide, je pose ici ma solution un code qui fonctionne et centre la fenêtre au milieux d'un écran.

Code :

1
2
3
4
5
6
7
8
9
10
11
function infoCandidat(theId)
		{
			var ret;
 
			hauteur = 450;
			largeur = 1000;
			X = Number(screen.width - largeur)/2;
			Y = Number(screen.height- hauteur)/2;
 
			ret = window.showModalDialog("info_can.php?monId="+theId,window,"status:no; dialogLeft:"+X+"px; dialogTop:"+Y+"px; dialogWidth:"+largeur+"px; dialogHeight:"+hauteur +"px; resizable:no; help:no;");
		}