[AJAX] Fermeture d'une popup jquery après execution script php appelé via fonction ajax

Invité · 08/04/2010, 11h50

Bonjour,

Je suis actuellement en train de développer une popup en jquery dans laquelle il y a un formulaire de saisie d'un contact, lors de l'appui sur le bouton enregistrer je fait appel a une fonction ajax qui va envoyer en GET les données à un script php qui va ensuite enregistrer en base ces données.

Jusque la pas de problème !

Pour fermer ma popup manuellement j'ai une fonction jquery (disablePopup();)qui se charge de la fermer en fonction de l'appui sur "echap" ou sur la "croix" de la popup.

Et en faite j'aimerai que lorsque le script php (qui est appelé via ajax) à finit de s'éxécuter, sa ferme cette popup. J'ai essayé de faire divers appels à la fonction disablePopup(); mais rien n'y fait.

Voici mes différents sources :

index.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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
	<title>SNBD</title>
	<link rel="stylesheet" href="general.css" type="text/css" media="screen" />
	<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="popup.js" type="text/javascript"></script>
 
	<script language="javascript" type="text/javascript">
	function ajaxFunction(){
		var ajaxRequest; 
 
		try{
			ajaxRequest = new XMLHttpRequest();
		} catch (e){
			try{
				ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try{
					ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e){
					alert("Your browser broke!");
					return false;
				}
			}
		}
		ajaxRequest.onreadystatechange = function(){
			if(ajaxRequest.readyState == 4){
				document.myForm.time.value = ajaxRequest.responseText;
				disablePopup();
			}
		}
		var name = document.getElementById('name').value;
		var firstname = document.getElementById('firstname').value;
		var role = document.getElementById('role').value;
		var mail = document.getElementById('mail').value;
		var phone = document.getElementById('phone').value;
		var mobile = document.getElementById('mobile').value;
 
		var queryString = "?name=" + name + "&firstname=" + firstname + "&role=" + role + "&mail=" + mail + "&phone=" + phone + "&mobile=" + mobile;
 
		ajaxRequest.open("GET", "ajax.php" + queryString, true);
		ajaxRequest.send(null);
	}
	</script>
 
</head>
<body>
	<center>
		<div id="button"><input type="image" src="users_two_add_48.png" /></div>
	</center>
 
	<div id="popupContact">
		<a id="popupContactClose"><img src="x.png" alt="x"/></a>
		<h1>Création d'un nouveau contact</h1>
		<form name='myForm'>
			<div>
				<div class="label">
					<label for="civ">Civilité</label>
				</div>
 
				<div class="field">
					<select id="civ"></select>
				</div>
				<div class="clear"></div>
 
				<div class="label">
					<label for="name">Nom</label>
				</div>
 
				<div class="field">
					<input type="text" id='name' maxlength='30'>
				</div>
				<div class="clear"></div>
 
				<div class="label">
					<label for="firstname">Prénom</label>
				</div>
 
				<div class="field">
					<input type="text" id='firstname' maxlength='20'> 
				</div>
				<div class="clear"></div>
 
				<div class="label">
					<label for="role">Fonction</label>
				</div>
 
				<div class="field">
					<input type="text" id="role" maxlength='50'>
				</div>
				<div class="clear"></div>
 
				<div class="label">
					<label for="mail">E-mail</label>
				</div>
 
				<div class="field">
					<input type="text" id="mail" maxlength='50'>
				</div>
				<div class="clear"></div>
 
				<div class="label">
					<label for="phone">Tél</label>
				</div>
 
				<div class="field">
					<input type="text" id="phone" maxlength='14'>
				</div>
 
				<div class="clear"></div>
 
				<div class="label">
					<label for="mobile">Tél mobile</label>
				</div>
 
				<div class="field">
					<input type="text" id="mobile" maxlength='14'>
				</div>
 
				<div class="clear"></div>
 
				<div class="label">
					<label for="contact_type">Type contact</label>
				</div>
 
				<div class="field">
					<select id="contact_type"></select>
				</div>
 
				<div class="clear"></div>
			</div>
			<div class="text-align-center">
				<input type="reset" value="Effacer">
				<input type='button' onclick='ajaxFunction()' value='Enregistrer' />
			</div>
		</form>
	</div>
	<div id="backgroundPopup"></div>
</body>
</html>

script jquery popup.js

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
 
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!					
/***************************/
 
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
 
//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}
 
//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}
 
//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6
 
	$("#backgroundPopup").css({
		"height": windowHeight
	});
 
}
 
 
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
 
	//LOADING POPUP
	//Click the button event!
	$("#button").click(function(){
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});
 
	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});
 
});

et le script php appelé par ajax :

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
 
 <?php 
 
	$dbhost = "";
	$dbuser = "";
	$dbpass = "";
	$dbname = "";
 
	mysql_connect($dbhost, $dbuser, $dbpass);
	mysql_select_db($dbname) or die(mysql_error());
 
	$name = $_GET['name'];
	$firstname = $_GET['firstname'];
	$role = $_GET['role'];
	$mail = $_GET['mail'];
	$phone = $_GET['phone'];
	$mobile = $_GET['mobile'];
 
	$name = mysql_real_escape_string($name);
	$firstname = mysql_real_escape_string($firstname);
	$role = mysql_real_escape_string($role);
	$mail = mysql_real_escape_string($mail);
	$phone = mysql_real_escape_string($phone);
	$mobile = mysql_real_escape_string($mobile);
 
	$query = "INSERT INTO t_contacts (`civility`,`name` ,`firstname`,`function`,`mail`,`phone`,`mobile`,`id_role`,`id_enterprise`)VALUES ('M.','$name', '$firstname','$role','$mail','$phone','$mobile',0,0)";
 
	$qry_result = mysql_query($query) or die(mysql_error());
?>

J'avoue etre un peu dans le brouillard la, ci quelqun pouvait m'éclairer se serait sympa

**tidus_6_9_2** · 08/04/2010, 15h27

Salut à toi camarade,

sans vouloir te dire de bêtises, ton ajaxRequest.readyState == 4 signifie que la requête est terminée.

normalement si tu ferme ta fenêtre lorsqu'il est égal à 4 c'est bon.

Invité · 08/04/2010, 15h48

Merci, mais comment faire maintenant pour faire appel a la fonction qui ferme la popup ^^

**tidus_6_9_2** · 08/04/2010, 15h51

disablePopup()

Si je me trompe pas ^^

**E.Bzz** · 08/04/2010, 15h53

Bonjour,

Envoyé par tidus_6_9_2

normalement si tu ferme ta fenêtre lorsqu'il est égal à 4 c'est bon.

Ben oui, mais ça marche pas

Code :

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

document.myForm.time.value = ajaxRequest.responseText;

Il est où dans ta page l'objet ayant un name="time" ?

A+

Invité · 08/04/2010, 15h58

C'est ce que je faisait, mais en faite je sais pas si c'est que je dev en local sur wamp, mais la ligne document.myForm.time.value = ajaxRequest.responseText; retournait une erreure et du coup sa ne prennait pas en compte mon disablePopup();

Code :

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

1
2
3
4
5
6
 
ajaxRequest.onreadystatechange = function(){
			if(ajaxRequest.readyState == 4){
				document.myForm.time.value = ajaxRequest.responseText;
				disablePopup();
			}

Mais sa marche a présent, merci à toi en tout cas

**E.Bzz** · 08/04/2010, 16h07

Essaye d'utiliser plutôt la syntaxe

Code :

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

document.forms['myForm'].elements['time'].value

Elle pose moins de problèmes de compatibilité, et devient indispensable dès qu'il s'agit de données gérées dynamiquement (pour gérer des names avec un compteur - comme champ1, champ2, champ3 ... - dans une boucle, par exemple).

A+

Invité · 08/04/2010, 16h10

Envoyé par E.Bzz

Essaye d'utiliser plutôt la syntaxe

Code :

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

document.forms['myForm'].elements['time'].value

Elle pose moins de problèmes de compatibilité, et devient indispensable dès qu'il s'agit de données gérées dynamiquement (pour gérer des names avec un compteur - comme champ1, champ2, champ3 ... - dans une boucle, par exemple).

A+

Merci pour ton info, ce que je souhaitai faire fonctionne, il ne me reste plus qu'a coder un ptit message en Jquery lorsque mon script return true ou false et sa sera perfect

[AJAX] Fermeture d'une popup jquery après execution script php appelé via fonction ajax

AJAX

Discussions similaires

Partager

Partager