Vaag probleem met openen van Jquery Dialog
Ik gebruik de jquery Dialog functie voor het openen van een popup waarin een formulier wordt geladen. Dit ziet er als volgt uit:
bedrijvenlogin.php
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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<?php
echo "<a href='#' class='showpopup' data-id='11' data-cartid='22'>BEWERKEN</a>";
//dialog popup new order:
echo "<div id='dialog' class='dialog'>";
echo "<div id='message'></div>";
echo "</div>";
?>
</body>
</html>
<script>
$("a.showpopup").on("click", function(e) {
e.preventDefault;
$.ajax({
url: 'edit-bedrijf.php',
type: 'get',
data: {id: $(this).data('id')},
dataType: 'html'
})
.done(function(d) {
$("#message").html(d);
$("#dialog").dialog({
height: 600,
width: 750,
modal: true,
close: function(event, ui) { $('#wrap').show(); },
title: 'Nieuwe vermelding keuren'
});
})
.fail(function(){
alert('Oops');
}); // let op method chaining!!
return false;
});
jQuery('body')
.bind(
'click',
function(e){
if(
jQuery('#dialog').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
jQuery('#dialog').dialog('close');
}
}
);
</script>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<?php
echo "<a href='#' class='showpopup' data-id='11' data-cartid='22'>BEWERKEN</a>";
//dialog popup new order:
echo "<div id='dialog' class='dialog'>";
echo "<div id='message'></div>";
echo "</div>";
?>
</body>
</html>
<script>
$("a.showpopup").on("click", function(e) {
e.preventDefault;
$.ajax({
url: 'edit-bedrijf.php',
type: 'get',
data: {id: $(this).data('id')},
dataType: 'html'
})
.done(function(d) {
$("#message").html(d);
$("#dialog").dialog({
height: 600,
width: 750,
modal: true,
close: function(event, ui) { $('#wrap').show(); },
title: 'Nieuwe vermelding keuren'
});
})
.fail(function(){
alert('Oops');
}); // let op method chaining!!
return false;
});
jQuery('body')
.bind(
'click',
function(e){
if(
jQuery('#dialog').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
jQuery('#dialog').dialog('close');
}
}
);
</script>
Als ik dit script/file gewoon direct aanroep via de adresbalk dan werkt de popup gebeuren wel. Maar dan wordt de eigenlijke website er dus niet omheen geladen. Wanneer ik op de pagina binnen de website kom waar dit script staat werkt de popup functie niet.
Ik krijg dan de volgende foutmelding:
Oops... voorkom dat deze pagina extra dialoogvensters weergeeft
Ik kom hier echt niet meer uit. Wie heeft hier een verklaring voor...?
Gewijzigd op 21/10/2015 16:43:12 door Johnny Cash
Code (php)
1
2
3
4
5
2
3
4
5
<script>
$( document ).ready(function() {
// Hier de rest van je javascript
});
</script>
$( document ).ready(function() {
// Hier de rest van je javascript
});
</script>
En verder moet je script of onder in de body of in de head met:
$( document ).ready(function() (zie bij Frank)
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
... je pagina hiero ...
<script type="text/javascript">
$().ready(function() {
// je inline JavaScript code hiero...
})
</script>
</body>
</html>
<script type="text/javascript">
$().ready(function() {
// je inline JavaScript code hiero...
})
</script>
</body>
</html>
Gewijzigd op 21/10/2015 21:42:04 door Thomas van den Heuvel
Zie documentatie over jQuery.bind: http://api.jquery.com/bind/