Rafraichir page php quand on ferme la popup

**than24** · 01/10/2012, 12h50

Bonjour,
je vous expose mon probleme en espérant que quelqu'un saura me répondre :
j'ai un formulaire dans une page php et dans une liste déroulante j'ai des valeurs afficher à partir de la base dans cette liste j'ai la valeur "autre":si la valeur que je veux insérer n'est pas dans la liste alors on sélectionne autre qui ouvre une fenêtre pop up qui contient un formulaire d'ajout et quand je ferme la fenêtre je souhaite que la page php "mère" se mette a jour.
j'arrive à ajouter à partir du popup "jquery" mais je suis obliger d'actualiser la page php a chaque fois . et l'autre problème c'est que j'arrive pas à ouvrir le popup à partir de la liste mais je dois mettre le lien en dehors de la balise "<option></option>".
si quelqu'un peux m'aider je serai très reconnaissante.
voici mon code:

Code html :

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
 
     <title>Fancy Sliding Form with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Fancy Sliding Form with jQuery" />
        <meta name="keywords" content="jquery, form, sliding, usability, css3, validation, javascript"/>
        <link rel="stylesheet" href="../../css/style.css" type="text/css" media="screen"/>
		  <link rel="stylesheet" type="text/css" media="all" href="fancybox/jquery.fancybox.css">
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="C:/Program Files (x86)/EasyPHP-5.3.9/www/gestion/JS/sliding.form.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.0.6"></script>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 
        <style type="text/css">
            body{
                margin: 0px;
                text-align:center;
                background-color:#ebe9d7;
                font-family:Arial, Sans-Serif;
                font-size:0.75em;
            }
            .box 
            {
                margin: 0px auto;
                width:960px;
                background-color:#ffffff;
                text-align:left;
                position: relative;
            }
            .header
            {
                height:100px;
            }
            .header h1
            {
                margin:0px;
                padding:30px;
            }
            h2 {color: #99723b; font-size: 16px; font-family: "Lucida Fax", Georgia, Times, "Times New Roman", Helvetica, Verdana; margin:0; padding:0; font-weight:normal;}
            .menu
            {
                height:30px;
                border-top:solid 1px #dccfbb;
                border-bottom:solid 1px #dccfbb;
                background-color:#4d3a24;
            }
            .menu div
            {
                padding:10px 30px;
            }
            .menu a
            {
                margin:0px 10px;
                color:#fecd28;
                text-decoration: none;
            }
            .content
            {
                padding:10px 30px;
            }
            #contactFormContainer
            {
        position: absolute;
        left: 308px;
        float: right;
        top: 297px;
            }
            #contactForm
            {
                height:277px;
                width:351px;
                background-image: url(../bkg.jpg);
                display:none;
            }
            #contactForm fieldset
            {
                padding:30px;
                border:none;
            }      
            #contactForm label
            {
                display:block;
                color:#ffc400;
            }      
            #contactForm input[type=text]
            {
                display:block;
                border:solid 1px #4d3a24;
                width:100%;
                margin-bottom:10px;
                height:24px;
            }  
            #contactForm textarea
            {
                display:block;
                border:solid 1px #4d3a24;
                width:100%;
                margin-bottom:10px;
            }  
            #contactForm input[type=submit]
            {
                background-color:#4d3a24;
                border:solid 1px #23150c;
                color:#fecd28;
                padding:5px;
            }                
            #contactLink
            {
                height:40px;
                width:351px;
                background-image: url(../slidein_button.png);
                display:block;
                cursor:pointer;
            }
            #messageSent
            {
                color:#ff9933;
                display:none;
            }
            a {color: #62791d; text-decoration:none;}
.grey {color: #999999; text-decoration:none;}
a:hover {text-decoration: none; text-decoration:underline;}
a.img:hover {background-color: #ffffff;}
.Style3 {
        font-size: 16px;
        color: #000000;
        font-weight: bold;
}
        .Style4 {color: #FFFFFF}
        .Style5 {font-weight: bold}
.Style9 {
        font-size: 24px;
        font-weight: bold;
        color: #000000;
}
     
        .Style6 {font-size: 16px; color: #FFFFFF; font-weight: bold; }
.Style8 {       font-size: 16px;
        font-weight: bold;
}
a { color: #3a51b2; text-decoration: none; }
a:hover { text-decoration: underline; }
 
h2 { font-size: 1.8em; line-height: 1.9em; margin-bottom: 15px;  }
 
p { color: #656565; font-size: 1.2em; margin-bottom: 10px; }
 
#wrapper { width: 50px; margin: 0 auto; background-color:#4d3a24;}
 
#inline { display: none; width: 600px; }
 
label { margin-right: 12px; margin-bottom: 9px; font-family: Georgia, serif; color: #646464; font-size: 1.2em; }
 
.txt { 
display: inline-block; 
color: #676767;
width: 420px; 
font-family: Arial, Tahoma, sans-serif; 
margin-bottom: 10px; 
border: 1px dotted #ccc; 
padding: 5px 9px;
font-size: 1.2em;
line-height: 1.4em;
}
 
        </style>
          <if lte IE 7]>
<script type="text/javascript" src="../../JS/menu.js"></script> 
<!-- le  script qui affiche le pop up et envoie vers la page de traitement du formulaire pop up     -->
<script type="text/javascript">
        
 
        $(document).ready(function() {
                $(".modalbox").fancybox();
                $("#contact").submit(function() { return false; });
        $("#send").on("click", function(){
                        $.ajax({
                                        type: 'POST',
                                        url: 'sendmessage.php',
                                        data: $("#contact").serialize(),
                                        success: function(data) {
                                                if(data == "true") {
                                                        $("#contact").fadeOut("fast", function(){
                                                                $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
                                                                
                                                                
                                                        });
                                                }
                                        }
                                });
                                
                });
}
 
        );
 
</script>
 
 
 
    </head>
<body >
<div class="box">
  <div class="header">
            <table width="958" height="101">
              <tr>
                <th width="128" scope="col"><img src="../../images/cour%20des%20comptes.jpg"" width="130" height="100" /></th>
                <th width="687" scope="col"> <p><img src="../../images/imagesCAQNJTFB.jpg" width="657" height="100" /></p></th>
                <th width="127" scope="col"><img src="../../images/imagesCAW3N2NJ.jpg" width="129" height="100" /></th>
              </tr>
            </table>
  </div>
  <div id="menu1">
	  <ul class="niveau1">
	    <li>
	      <a href="#">Fichier</a>
	      <ul class="niveau2">
	        <li><a href="personnelle.php">Personnelle</a></li>
      <li><a href="lieu.php">Lieux</a></li>
      <li><a href="langue.php">Langues</a></li>
        <li><a href="diplome.php">Diplomes</a></li>
      <li><a href="nationalite.php">Nationalit?s</a></li>
      <li><a href="ss.php">Caisse SS</a></li>
       <li><a href="mutuelle.php">Mutuelles</a></li>
        <li><a href="affectation.php">Affectations</a></li>
      <li><a href="voie.php">Voie</a></li>
      <li><a href="">Type</a>
	          <ul class="niveau3">
	           <li><a href="typeabscence.php">Type Abscences</a>
               <li><a href="typeconge.php">Type Cong?</a></li>
               <li><a href="typesanction.php">Type Sanctions</a></li>
               <li><a href="typecorp.php">Type Corp</a></li>
	          </ul>
	        </li>
	         <li><a href="#">Detail</a>
              <ul class="niveau3">
	          <li><a href="detailcop.php">Corp</a></li>
       <li><a href="detailgrade.php">Grade</a></li>
	          </ul>
 
 
             </li>
	      </ul>
	    </li>
	    <li>
	      <a href="">Traitement</a>
	      <ul class="niveau2">
	        <li><a href="../traitement/carriere.php">Carrieres</a></li>
             <li><a href="../traitement/grade.php">Grades</a></li>
             <li><a href="../traitement/structure.php">Structure(Affectation)</a></li>
             <li><a href="../traitement/conge.php">Cong?s</a></li>
             <li><a href="../traitement/absence.php">Absences</a></li>
             <li><a href="../traitement/sanction.php">Sanctions</a></li>
 
 
	      </ul>
	    </li>
	    <li>
	      <a href="#">Generateur de decisions</a>
	      <ul class="niveau2">
	        <li><a href="../generateur/conception.php">conception</a></li>       
	        <li><a href="../generateur/edition.php">edition</a></li>
	      </ul>
	    </li>
          <ul class="niveau1">
	    <li>
	      <a href="#">Les Etats</a>
	      <ul class="niveau2">
      <li><a href="#">Etat</a>
	          <ul class="niveau3">
	           <li><a href="../etat/etatindiv.php">Etat individuelle</a>
               <li><a href="../etat/etatcollect.php">Etat Collectif</a></li>
               <li><a href="../etat/etattable.php">Etat Table</a></li>
               <li><a href="../etat/etatreliquat.php">Etat Reliquat</a></li>
                 <li><a href="../etat/etatnominatifg.php">Etat nominatif global</a></li>
               <li><a href="../etat/etatstatistique.php">Etat Statistique</a></li>
	          </ul>
	        </li>
	    <li><a href="#">Tableau</a>
              <ul class="niveau3">
	          <li><a href="../etat/tabavance.php">Tableau avancement</a></li>
       <li><a href="../etat/tabconfirm.php">Tableau confirmation</a></li>
	        </ul>
	        </li>
               <li><a href="../etat/effectifbudge.php">Effectif budgetaire</a></li>
               <li><a href="../etat/decompteposte.php">Decompte poste</a></li>
 
          </ul>
 
 
            </li>
	      </ul>
	    </li>
 
  </ul>
  </div>
 
          <div class="content">
                <div id="lipsum">
                    <h2>&nbsp;</h2>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <form name="form1" id="form1" method="post" action="../traitement/fichier/tcorp.php">
                      <table width="714" height="103" border="0" align="center"  bgcolor="#4D3A24">
                        <tr>
                          <td height="51" colspan="2"><span class="Style6">Code
                                <input name="code" type="text" id="code" />
                          </span></td>
                          <td width="388"><span class="Style8">Type de corp
                            <select name="select">
 
							<?php 
        
  include('../../connexion.php'); 
 $sql="SELECT libelle FROM lieu "; 
      
 $req=mysql_query($sql); 
  
while($res=mysql_fetch_array($req)){ 
 echo"  <option>$res[0]  <option>";
} 
 
   mysql_close($connection); 
  ?>
 
                         </select>
 
							<!-- voici le lien     autre -->
 
                          </span>
                            <div id="wrapper">
                              <span class="Style8"><a class="modalbox" href="#inline">Autre</a></span>
                          </div>
 
						  <!-- voici la fin du  lien     autre -->
 
 
 
						  </td>
                        </tr>
                        <input name="code_encien" type="hidden" id="code_encien"  />
                        <input name="libelle_encien" type="hidden" id="libelle_encien"   />
                        <input name="libelleA_encien" type="hidden" id="libelleA_encien"   />
                        <tr>
                          <td width="100" height="46"><input type="submit" name="Submit2" value="Modifier" /></td>
                          <td width="212" ><input type="reset" name="Submit3" value="Annuller" /></td>
                          <td>&nbsp;</td>
                        </tr>
                      </table>
                  </form>
 
 
	<!--                             le formulaire du pop up                              -->	  
      <div id="inline">
	             <h2>Send us a Message</h2>
 
	<form id="contact" name="contact" action="#" method="post">
		<label for="email">Your E-mail</label>
		<input type="text" id="email" name="email" class="txt">
		<br>
		<label for="msg">Enter a Message</label>
		<input type="text"  id="msg" name="msg" class="txt">
 
		<button id="send" onClick="window.opener.location.reload();">Send E-mail</button>
 
	</form>
      </div>
	 <!--                       voila fin du formulaire du pop up                                            -->
                    <p class="Style9">&nbsp;</p>
                    <p class="Style9"><a href="../../modification/type%20corp/modifier_tcorp.php">Modifier un corp </a></p>
                    <p class="Style5">&nbsp;</p>
                    <p class="Style5">&nbsp;</p>
                    <p class="Style5">&nbsp;</p>
                    <p class="Style5">&nbsp;</p>
                    <p class="Style5">&nbsp;</p>
                    <p class="Style5">&nbsp;</p>
                    <p class="Style5">&nbsp;</p>
                    <p class="Style5">&nbsp;</p>
                    <p class="Style5">&nbsp;</p>
                    <p class="Style5">&nbsp;</p>
                    <p class="Style5">&nbsp;</p>
                    <p class="Style5">&nbsp;</p>
                    <p class="Style5">&nbsp;</p>
                    <p class="Style5">&nbsp;</p>
                    <p class="Style5">&nbsp;</p>
  </div>
  </div>
</div>
</body>
</html>

j'espere que quelqu'un pourra m'aider.
merci d'avance

**headmax** · 01/10/2012, 21h03

Salut than24, tout d'abord :

quand je ferme la fenetre je souhaite que la page php"mere" se mette a jour.

Tu met dans ta balise body un évènement qui va savoir que la page va se fermer:

Code :

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

1
2
3
4
5
6
7
8
9
 
<script>
function myFunctionReresh(){
  parent.document.location.reload(true);
};
</script>
<body onbeforeunload="myFunctionReresh();">
 
</body>

NB: onbeforeunload ne marche pas sous Chrome et opéra.
Alternative

Code :

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

1
2
3
4
5
6
 
if(window.onpagehide || window.onpagehide === null){
   window.addEventListener('pagehide', myFunctionReresh, false);
} else {
   window.addEventListener('unload', myFunctionReresh, false);
}

J'ai pas vraiment testé mais l'idée est là, bonne soriée

.

**than24** · 02/10/2012, 11h41

Merci de m'avoir répondu, ça m'a beaucoup aidé !!! J'ai essayé de faire comme vous avez dit mais ça n'a pas marché. Alors j'ai inséré le contenu de votre script de rafraichissement dans le script de traitement du popup. Et ça a fonctionné. Le code du script que j'ai modifié est le suivant si ça peut aider d'autres personnes :

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
 
<script type="text/javascript">
 
 
	$(document).ready(function() {
		$(".modalbox").fancybox();
		$("#contact").submit(function() { return false; });
        $("#send").on("click", function(){
			$.ajax({
					type: 'POST',
					url: 'sendmessage.php',
 
					data: $("#contact").serialize(),
					success: function(data) {
 
						window.parent.document.location.reload ();
  if(window.onpagehide || window.onpagehide === null){
   window.addEventListener('pagehide', myFunctionReresh, false);
} else {
   window.addEventListener('unload', myFunctionReresh, false);
}
 
					}
				});
 
		});
}
 
	);
 
</script>

Voila, il me reste maintenant le problème du lien dans liste déroulante. Quelqu'un a une idée ? En tout cas je vous remercie infiniment pour votre aide.

**devyan** · 02/10/2012, 14h05

Salut,

Envoyé par than24

Voila, il me reste maintenant le problème du lien dans liste déroulante. Quelqu'un a une idée ? En tout cas je vous remercie infiniment pour votre aide.

Tu devrais peut-être faire un sujet à part...

Quelque chose comme ceci devrait fonctionner

Code html :

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

1
2
3
4
5
<select onchange="ouvrirLien(this.value);">
 ...
<option value="http...">mon lien</option>
 ...
</select>

onchange est déclenché lorsque tu sélectionnes à la souris après le clic, lorsque tu sélectionne au clavier sur ENTREE ou lors de la perte du focus.

devyan

**than24** · 02/10/2012, 14h19

merci de m'avoir répondu mais votre solution n'a pas marché car le lien en question doit ouvrir un popUp pas une page htm ou php.
merci quand même

**devyan** · 02/10/2012, 17h38

Le principe devrait rester le même...

Dans la valeur il faut avoir les information qui t'intéressent pour pouvoir ouvrir ton pop-up dans la fonction (appelons la "ouvrirPopup(this.value)" au lieu de "ouvrirLioen(this.value)")

Rafraichir page php quand on ferme la popup

JavaScript

Vue hybride

Discussions similaires

Partager

Partager