Un probleme avec une popup

**SpaceFrog** · 03/02/2006, 10h11

heu tu sais pas juste faire une page html ???
mon idée était d'avoir une page html dans le repertoire et tu appelles cette page modèle dans le popup en modifiant juste l'innerHTML du div ...

**snoups58** · 03/02/2006, 10h20

oui mais comment tu fait pour appeler cette page html ?? et comment tu peut généré du code dedans a partir de la page principal

**SpaceFrog** · 03/02/2006, 10h24

ben ????

Code :

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

var dow = window.open('mapagemodele.htm', 'popup', 'resizable=no, toolbar=no');

**snoups58** · 03/02/2006, 10h28

sa c pour l'ouvrir ??

POur mettre du code c pareil k'avec la popup simple ?

Code :

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

dow.document.write("<TITLE>Aperçu Devis</TITLE.....

NON ???

**SpaceFrog** · 03/02/2006, 10h37

ben non la tu n'as plus besoin d'ecrire le titre puisqu'il sera déja dans la page ????
tu modifies juste l'innerHTML.....

ou alors si tu veux aussi modifier le titre tu le fais aussi avec

Code :

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

getElementsBuyTagName('title').innerHTML

**snoups58** · 03/02/2006, 10h41

en fait je fait toute ma page HTML stantard et ensuite je met mon document.getElementById('text4').innerHTML !!

Mais comment je le met dans ma pag HTML annexe !!

( dsl d'etre ossi chiant mais c super important )

**SpaceFrog** · 03/02/2006, 11h09

à mon avis c'est juste un détail qui t'echappe ...

la page principale:

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type='text/javascript'>
function popup(){
var dow = window.open("modele.htm","modele", "resizable=no, toolbar=no, scrollbars=no, location=no, width=200, height=200, top=100, left=100");
setTimeout(function(){dow.document.open();
						 dow.document.getElementById('conteneur').innerHTML=document.getElementById('text4').value
						 dow.document.close();
						 },3000)
}
</script>
 
</head>
 
<body>
<input name='apercu' id='apercu' class='bouton' value='Aperçu du DEVIS pour impression' type='button' onClick='javascript:popup();'>
<input type='text' id='text4' />
 
</body>
</html>

la page modele.htm :

Code :

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

1
2
3
4
5
6
7
8
9
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mon Popup</title>
</head>
<body style='background-color:silver;margin:5px;'>
	<div id="conteneur" style="border:solid 1px gray;height:100%;width:100%;"></div>
</body>
</html>

**snoups58** · 03/02/2006, 11h20

je v tester sa !! mici de ta patience !!

**SpaceFrog** · 03/02/2006, 11h24

mais en fonction de la vitesse de connection il peut y avoir un problème d'order d'instanciation des objets ...
que je te propose de résoudre comme suit :

la page principale ne fait qu'ouvrir la page modèle ...

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type='text/javascript'>
function popup(){
var dow = window.open("modele.htm","modele", "resizable=no, toolbar=no, scrollbars=no, location=no, width=200, height=200, top=100, left=100");
}
</script>
 
</head>
 
<body>
<input name='apercu' id='apercu' class='bouton' value='Aperçu du DEVIS pour impression' type='button' onClick='javascript:popup();'>
<input type='text' id='text4' />
 
</body>
</html>

la page modèle se remplit toute seule sur le onload :

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mon Popup</title>
<script type='text/javascript'>
function populate(){
document.getElementById('conteneur').innerHTML=window.opener.document.getElementById('text4').value;
}
</script>
 
</head>
<body style='background-color:silver;margin:5px;' onload="populate()">
	<div id="conteneur" style="border:solid 1px gray;height:100%;width:100%;"></div>
</body>
</html>

**snoups58** · 03/02/2006, 11h32

voila ce que le deboggeur me dit : dow.document.getElementById('conteneur') has no properties

**SpaceFrog** · 03/02/2006, 11h45

je pense que nos posts se sont croisés ...
c'est justement ce que je disais à propos de la rapidité d'ouverture si tu conserve le code dans la page mère ...
il tente de remplir un div qui n'est pas encore créé !!!

Si parcontre comme dans mon précédent post le script est basculé dans la popup ou appelé depuis le onload de la page dans le popup tu n'auras plus ce souci quelleque soit la lenteur de connection puisque l'objet sera toujours instancié au moment de son appel ...

**snoups58** · 03/02/2006, 13h02

g essayer les deux marche po

pas d'erreur debogeur juste rien qui s'affiche

je vais te faire voir tout le script correspondant pour ke tu comprenne mieux!!

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
<div id="text3" class="invisibletext">
<div align="left"> 
			<p class="texte">Dans cette étape veuillez saisir une date désignant le jour où la manifestation aura lieu ainsi que le lieu !</p><br>
          <p class="texte">ATTENTION la date doit etre impérativement noter sous la forme JJ/MM/AAAA c'est à dire que pour le 4 Février il faudra noter 04/02/AAAA !!!!</p><br>
         <p align="center"><br>
            Date de la manifestation *: 
            <input id="datemanif" type="text" class="champ" value="jj/mm/aaaa" size="10" maxlength="10">
            <br>
            Lieu de la manifestation : 
            <input id="lieu" type="text" class="champ" size="30" maxlength="200">
			<br>
			Titre de la manifestation :
			<input id="titreanim" type="text" class="champ" size="30" maxlength="200">
          </p><br>
		  <p class="texte">La prochaine étape est un aperçu de votre devis que vous pouvez imprimer pas le lien qui se trouvera tout en bas !</p>
        </div>
</div>
 
<div id="text4" class="invisibletext">
<img src="images/logoanim.GIF">
<span id="partie1"></span>
<span id="partie2"></span>
<span id="partie3"></span>
<span id="partie4"></span>
<span id="partie5"></span>
<input type"button" class="bouton" onClick="popup()">
</div>
 
<div id="text5" class="invisibletext">

sa c ma page principale !! je gere 5 div afficher au fur et à mesure par des fonctions

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
function prece()
{
	document.getElementById("text" + noetape ).className='invisibletext';
	noetape-=1;
	document.getElementById("text" + noetape ).className='visibletext';
	document.getElementById("imgetape").src="/images/etape/etape" + noetape + ".bmp";
	precedent.className='boutonvisible';
	if ( noetape == 4 ) 
	{
		suivant.className='boutonvisible';
		confirmation.className='boutoninvisible';
	}
	if ( noetape == 0 )
	{
		precedent.className='boutoninvisible';
	}
}

Mon code java pour un clicke sur précédent !!
c pas tres joli comme code mais il marche

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
function suiv()
{
	var pastype=0 , pasnom=0 , pastel=0 , pasadr=0 , pascp=0 , pasville=0, pasmail=0;
 
	if (noetape==0)
	{
		document.getElementById("text" + noetape ).className='invisibletext';
		noetape+=1;
		document.getElementById("text" + noetape ).className='visibletext';
		document.getElementById("imgetape").src="/images/etape/etape" + noetape + ".bmp";
		precedent.className='boutonvisible';
	}
	else if (noetape==1)
	{
.......
/// mes test entre chaque passage 
.......
 
else if ( noetape == 3 )
	{if ((document.getElementById("datemanif").value=="")||(document.getElementById("datemanif").value=="jj/mm/aaaa"))
		{
			alert("Merci de saisir une date valide !!");
		}
		else if ((document.getElementById("datemanif").value.charAt(2)!="/")&&(document.getElementById("datemanif").value.charAt(5)!="/"))
		{
			alert("Merci de saisir une date valide !!");
		}
		else if (document.getElementById("lieu").value=="")
		{
			alert("Merci de saisir un lieu de manifestation !");
		}
		else
		{
			document.getElementById("partie1").innerHTML = 
			'<p align="right">' + document.getElementById("name22").value 
			+ "<p align='right'>" + document.getElementById("phone22").value
			+ "<p align='right'>" + document.getElementById("mail223").value
			+ "<p align='right'>&nbsp;"
			+ "<p align='right'>Tel:&nbsp;" + document.getElementById("mail22").value;
			if ( document.getElementById("mail24").value != "" )
			{
				document.getElementById("partie2").innerHTML = 
				"<p align='right'>Fax:&nbsp;" + document.getElementById("mail24").value;
			}
 
 
			document.getElementById("partie3").innerHTML = 
			"<p align='right'>" + customDateSpring()
			+ "<p align='center'>&nbsp;</p>"
			+ "<p align='center' class='Style1'>DEVIS</p>"
			+ "<p align='center' class='Style1'>" + document.getElementById("titreanim").value
			+ "<p align='center' class='Style1'>&agrave; &nbsp;" + document.getElementById("lieu").value
			+ "<p align='center' class='Style1'>&nbsp;</p>"
			+ "<p class='Style2'>Animation</p>"
			+ "<p align='right' class='Style2'>Prix Hors Taxes</p>";
 
			for (j=1;j<13;j++)
			{
 				if ( document.getElementById("choix" + j ).checked == true )
				{
					chaine += "<p>" + tabchoixtitre[j-1] + "<p align='right'>" + tabchoixprixht[j] ;
					totalprixHT += tabchoixprixht[j] ;
				}
			}
			totalprixTTC=(Math.round((totalprixHT*1.196)*1000))/1000;
			totalprixTTC=totalprixTTC.toFixed(3);
			totalprixHT=totalprixHT.toFixed(3);
 
			document.getElementById("partie4").innerHTML = chaine ;
			document.getElementById("partie5").innerHTML =
			  "<p align='right' class='Style2'>Prix Total HT =  " + totalprixHT
			+ "<p align='right' class='Style2'>Prix Total TTC =  " + totalprixTTC
			+ "<p>&nbsp;</p>"
			+ "<p align='center'><strong>Ces tarifs ne peuvent tenir lieu d&prime;engagement que sous reserve de disponibilit&eacute;</strong></p>"
			+ "<p align='center'>( Restant &agrave; votre disposition pour tout renseignement par Email à contact@topanimation.com ou par téléphone au 03 86 21 53 39 )</p>"
			+ "<p align='center'>&nbsp;</p>"
			+ "<p align='center'>Ce document n&prime;a aucune valeur et n&prime;engage qu&prime;un contact avec notre soci&egrave;t&eacute;. </p>"
			+ "<p align='right'>&nbsp;</p>"
			+ "<p align='right'>&nbsp; </p>"
			+ "<p align='left' class='Style2'>&nbsp;</p>"; 
			alert(" Une fénètre va s'ouvrir si toute fois votre système bloque celle-ci il faut autoriser son ouverture si vous voulez imprimer !!");
			popup();
			document.getElementById("text" + noetape ).className='invisibletext';
			noetape+=1;
			document.getElementById("text" + noetape ).className='visibletext';
			document.getElementById("imgetape").src="/images/etape/etape" + noetape + ".bmp";
 
 
		}
	}
	else if ( noetape == 4 )

noetape correspond a savoir sur kel Div je suis !!
kan c'est a 3 j'inserre mon HTML dan le div 4 pour avoir l'affichage aprèsd'une présentation du DEVIS et ensuite un bouton s'ajoute en bas pour l'aperçu par la popup !
et tout sa est dans une page PHP voila le lien pour comprendre
www.topanimation.com/index.php?p=devis

**SpaceFrog** · 03/02/2006, 13h07

la seconde focntionne sous IE et firefox ... testé et approuvé ...

copie texto le code que je t'ai filé ... il focntionne !

**snoups58** · 03/02/2006, 13h17

je veux pas te manker de respect mais sa marche pas !!

regarde au desuus g editer mon post

le pire c ke je veux en plsu intergrer un bouton dans la popup pour envoyer une impression et de ce fait fermer la popup

**SpaceFrog** · 03/02/2006, 13h20

as tu essayé de faire un simple copier coller des deux code que je t'ai filé ...
j'ai testé et retesté sous IE et Firefox et ça tourne ...

Maintenant je n'ai pas le temps de décortiquer ton usine à gaz ...
alors part des codes que je t'ai donnés et QUI FONCTIONNENT !

tu dois avoir une page principale et un modèle (modele.htm) dans le même repertoire.

**snoups58** · 03/02/2006, 13h33

c bon sa marche nikel

juste un truc ke j'avais oublier d'enlever !!

merci bocoup un derniere chose pour fermer la popup je fais juste
window.close(); dans la page popup c sa ?

**SpaceFrog** · 03/02/2006, 13h35

heu non pour fermer la popup il faut le faire depuis la page mère ...
je fais un test ...

**SpaceFrog** · 03/02/2006, 13h40

dans la page principale:

Code :

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

1
2
3
4
5
6
7
8
9
<script type='text/javascript'>
var dow
function popup(){
dow = window.open("modele.htm","modele", "resizable=no, toolbar=no, scrollbars=no, location=no, width=200, height=200, top=100, left=100");
}
function closepopup(){
dow.close()
}
</script>

dans le modèle

Code :

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

<input type="button" onclick='window.opener.closepopup()' value="fermer" />

Un probleme avec une popup

JavaScript

Discussions similaires

Partager

Partager