Jquery popup sluit te vroeg
ik loop vast met een stukje jquery. als je op een link klikt dan open zich een popup div waarin ik een formulier include, tot hier geen problemen. alleen wanneer ik het formulier verzend dan sluit hij de popup div. Het formulier geeft een melding van verzonden of niet verzonden en deze zie je wanneer je weer op de link klikt om de popup te openen.
Mijn vraag is dus als volgt:
Hoe kan ik zorgen dat de popup alleen maar sluit wanneer ik op het kruisje klik en niet wanneer het formulier is verzonden?
hier de code:
Code (php)
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
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
//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();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
//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();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
Er moet meer zijn. Geef je formulier eens en het liefst een online voorbeeld.
ik wilde niet te veel code hier plaatsen omdat het meeste niet relevant is voor de vraag.
Ik wil eigenlijk deze popup blijven gebruiken als de fout eruit gaat
Open je website, druk op CTRL + U.
En dan zie je dit:
<php
?>
<!DOCTYPE html>
<html>
<head>
Lijkt me niet de bedoeling ;).
Maar... de oorzaak is eigenlijk heel simpel:
Dit is je formulier:
Code (php)
1
<form action="" ........
Dus bij 'verzenden' gaat hij naar dezelfde pagina (en ververst hij dus).
Wat jij wilt is dat Javascript de verzendknop uitschakeld (return false;) en dan via AJAX toch verstuurd oid.
Gewijzigd op 31/07/2012 12:42:28 door Eddy E
Daar al eens wat mee 'getest'?
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//Post return php in popupscreen
jQuery('#popupContact').submit(function() {
jQuery.ajax({
type: "POST",
url: "contact.php",
success: function() {loadPopup();}
});
});
jQuery('#popupContact').submit(function() {
jQuery.ajax({
type: "POST",
url: "contact.php",
success: function() {loadPopup();}
});
});
ik heb nu dit toegevoegd aan mijn js bestand maar helaas werkt dit niet
iemand een idee hoe ik de respons van het phpformulier opvang?
Mijn developer tools zeggen me dat je jQuery bestand corrupt is.
Kan je dit:
http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js
vervangen door dit:
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
en eens zien of dit iets verandert?
Hoe 'nieuwer' hoe beter. Wellicht zat .ajax() nog niet in 1.2.6
ik heb nu de code veranderd en deze werkt in IE en in Chrome maar niet in firefox. Dit vind ik raar om dat jquery in alle browsers hetzelfde moet werken
ik hoop dat jullie kunnen kijken waar de fout zit voor firefox.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
//Post return php in popupscreen
$('#contactForm').submit(function() {
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "contact.php",
success: function(data){
$("#popupContact").html(data);
popupStatus = 1;
}
});
return false;
});
$('#contactForm').submit(function() {
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "contact.php",
success: function(data){
$("#popupContact").html(data);
popupStatus = 1;
}
});
return false;
});
Code (php)
1
2
3
2
3
$("#popupContactClose").click(function(){
disablePopup();
});
disablePopup();
});
door
Code (php)
1
$("#popupContact").on('click', '#popupContactClose', disablePopup);
Op deze manier koppel je een click event listener aan #popupContact (deze div blijft altijd bestaan), die wacht op een klik van de gebruiker op #popupContactClose. Op dit moment wordt de inhoud van je #popupContact geleegd door de ajax call, waarna #popupContactClose opnieuw wordt aangemaakt. De eerdere event listener ziet dit echter niet als dezelfde link en werkt dan niet meer.
Gewijzigd op 03/08/2012 20:12:40 door Jurgen B
het probleem met firefox is ook opgelost. Zonder iets aan de code te hebben veranderd.
hopelijk de laatste vraag.
de popup blijft na de eerste keer submit gewoon open en hij geeft de respons
maar een tweede keer dan sluit de popup alsnog.
dit kun je testen door gelijk op submit te drukken en dan nog eens een keer
<form>
//bla
//bla
<input type="submit" value="Blablablahh" onclick="window.close()">
</form>
Geheid dat wel werkt.
Gewijzigd op 05/08/2012 04:39:21 door Yoop Overmaat
Dus in eerste geval iets als (niet getest, maar dit zou moeten werken...)
Code (php)
1
2
3
2
3
$("#popupContact").on('submit', function() {
//De rest van je code
});
//De rest van je code
});
Gewijzigd op 05/08/2012 12:57:22 door Jurgen B
maar tot nu toe heel erg bedankt voor je hulp
Het zit hem in 'data: $(this).serialize()' omdat $(this) nu naar #popupContact verwijst in plaats van het formulier. Je moet $(this) naar $('#contactForm') wijzigen, dan lijkt het hier te werken.
Gewijzigd op 05/08/2012 15:08:33 door Jurgen B