JQuery Dialog combineren
het lukt me wel om verschillende JQuery functies op een pagina te verwerken. Indien ik echter de 'Dialog'-functie wil toevoegen, gaat het mis.
Ik maak alles zoals het hoort, test het op een andere pagina en het lukt. Indien ik dit echter samenvoeg met andere functies gaat het niet. Ik krijg steevast mijn div met informatie te zien.
Het is geen optie deze op invisible te zetten, want dan is deze onzichtbaar in het eigenlijke Dialog-venster...
Mijn 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
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
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>Inschrijvingsfunctionaliteiten</title>
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" href="css.css" /> <<-- Hierin staat een Meyer-reset + enkele styles voor de div's
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://code.jquery.com/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/resources/demos/style.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script>
*** Eventjes geknipt, maar hier staan dus verschillende functies (die wel werken) ***
</script>
</head>
<body>
<div class="ui-widget">
** Deeltje geknipt **
<span class="stap3" style="float: left">
<label for="stap3">Stap 3: Geef je opmerkingen en stuur je inschrijving in!</label><br />
<span id="stap3" /><textarea name="opmerkingen"></textarea><br />
<button class="Versturen">Stuur in!</button>
</span>
<div id="dialog-message" title="Inschrijving ontvangen">
<p>
<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 10px 10px 0;"></span>
Jouw inschrijvingen werden goed onvangen!<br />
Wij houden ons eraan om jullie zo snel mogelijk als mogelijk te informeren.
</p>
</div>
<script>
$('.Versturen').click(function() {
var proeven= $(".proeven").text();
var aflossingen = $(".aflossingen").text();
var gegevens = $(".gegevens").text();
$.post("verstuur-gegevens.php", { proeven : proeven, aflossingen : aflossingen, gegevens : gegevens }, function(data) {
// alert('Inschrijving oke ;-)');
$( "#dialog-message" ).dialog({
height: 250,
width: 400,
modal: true,
buttons: {
Ok: function() {
$( this ).dialog("close");
},
Gimme: function() {
$( this ).dialog( "close" );
window.location='http://www.zwat.be';
}
}
});
});
});
</script>
</div>
</body>
</html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>Inschrijvingsfunctionaliteiten</title>
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" href="css.css" /> <<-- Hierin staat een Meyer-reset + enkele styles voor de div's
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://code.jquery.com/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/resources/demos/style.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script>
*** Eventjes geknipt, maar hier staan dus verschillende functies (die wel werken) ***
</script>
</head>
<body>
<div class="ui-widget">
** Deeltje geknipt **
<span class="stap3" style="float: left">
<label for="stap3">Stap 3: Geef je opmerkingen en stuur je inschrijving in!</label><br />
<span id="stap3" /><textarea name="opmerkingen"></textarea><br />
<button class="Versturen">Stuur in!</button>
</span>
<div id="dialog-message" title="Inschrijving ontvangen">
<p>
<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 10px 10px 0;"></span>
Jouw inschrijvingen werden goed onvangen!<br />
Wij houden ons eraan om jullie zo snel mogelijk als mogelijk te informeren.
</p>
</div>
<script>
$('.Versturen').click(function() {
var proeven= $(".proeven").text();
var aflossingen = $(".aflossingen").text();
var gegevens = $(".gegevens").text();
$.post("verstuur-gegevens.php", { proeven : proeven, aflossingen : aflossingen, gegevens : gegevens }, function(data) {
// alert('Inschrijving oke ;-)');
$( "#dialog-message" ).dialog({
height: 250,
width: 400,
modal: true,
buttons: {
Ok: function() {
$( this ).dialog("close");
},
Gimme: function() {
$( this ).dialog( "close" );
window.location='http://www.zwat.be';
}
}
});
});
});
</script>
</div>
</body>
</html>
Wat doe ik mis opdat deze wel correct werkt (dus de DIV wel verborgen wordt?)...
Toevoeging op 06/12/2012 23:13:37:
Hallo allen,
op het internet nog wat verder gezocht en volgende truc doet het wel:
<div style="display:none;">
<div id="dialog-message" title="Inschrijving ontvangen">
<p>
<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 10px 10px 0;"></span>
Jouw inschrijvingen werden goed onvangen!<br />
Wij houden ons eraan om jullie zo snel mogelijk als mogelijk te informeren.
</p>
</div>
</div>
Ik geef toe, het is niet echt propertjes, dus als er echte oplossingen zijn, graag!
Als ik eerlijk moet zijn; mij lijkt alles te werken; ik ga er dus van uit dat ik niet precies weet wat je precies wil oplossen.
zoals aangegeven in post 2 is het probleem opgelost...