[AJAX] Fermeture d'une popup jquery après execution script php appelé via fonction ajax
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:
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:
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:
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 :ccool:
