Hoe krijg ik deze functie actief?
Op jqueryui.com heb ik onderstaande functie gevonden die ik graag zou gebruiken:
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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>
Nu wil ik dat deze functie wordt aangeroepen door de volgende code:
Code (php)
1
2
3
2
3
<form action="shop_samenvatting.php" method="POST">
<p class="midden"><input name="bestelling" type="submit" value="<?php echo $cKnoptekst2c ; ?>" /></p>
</form>
<p class="midden"><input name="bestelling" type="submit" value="<?php echo $cKnoptekst2c ; ?>" /></p>
</form>
Ik heb delen van de code in de head van mijn html gezet. Helaas krijg ik het (nog) niet werkend.
Wie heeft een suggestie?
George
$( "#opener" )
vervangt door
$( :input[type=submit] )
Werkt het, maar dan trigger je nog steeds een submit en zul je doorgaan naar 'shop_samenvatting.php'
Om dit te voorkomen kun je de volgende regel in je click function opnemen
(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
voorbeeld
Gewijzigd op 17/03/2014 15:18:21 door Michael -
Helaas krijg ik met jouw suggesties de functie niet werkend. Zijn er wellicht andere zaken die mogelijk moeten worden aangepast?
Heb je het voorbeeld bekeken? De enige aanpassing die je moet maken #opener vervangen door je input, óf je input submit het id opener geven.
Code (php)
1
2
3
2
3
<form action="shop_samenvatting.php" method="POST">
<p class="midden"><input name="bestelling" type="submit" value="<?php echo $cKnoptekst2c ; ?>" id="opener" /></p>
</form>
<p class="midden"><input name="bestelling" type="submit" value="<?php echo $cKnoptekst2c ; ?>" id="opener" /></p>
</form>