Jquery dialog en div refresh
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
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
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
$('#monitorpolitie').fadeOut("slow").load('monitor/politie.php').fadeIn("slow");
$('#monitorp2000').fadeOut("slow").load('monitor/p2000.php').fadeIn("slow");
}, 45000); // refresh every 30000 milliseconds
</script>
<?php
echo '<section class="monitoralarm" id="monitorp2000">';
echo '<ul>';
$sqlm = "SELECT * FROM meldingen ORDER by datetime DESC LIMIT 10";
if(!$resm = mysql_query($sqlm))
{
trigger_error(mysql_error().'<br />In query: '.$sqlm);
}
elseif(mysql_num_rows($resm) == 0)
{
// Niets gevonden.
}
else
{
while($rowm = mysql_fetch_assoc($resm))
{
echo '<li><strong>'. date('H:i:s d-m-Y', strtotime($rowm['datetime'])).'</strong> '.$rowm['titel'].'<br /><a class="diatoe" href="dialog.php?handeling=bewerk&wat=bericht&id='.$rowp['id'].'" title="Plaats of bewerk het bericht">'.$rowp['titel'].'</a></li>';
}
}
echo '</ul>';
echo '</section>';
?>
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
$('#monitorpolitie').fadeOut("slow").load('monitor/politie.php').fadeIn("slow");
$('#monitorp2000').fadeOut("slow").load('monitor/p2000.php').fadeIn("slow");
}, 45000); // refresh every 30000 milliseconds
</script>
<?php
echo '<section class="monitoralarm" id="monitorp2000">';
echo '<ul>';
$sqlm = "SELECT * FROM meldingen ORDER by datetime DESC LIMIT 10";
if(!$resm = mysql_query($sqlm))
{
trigger_error(mysql_error().'<br />In query: '.$sqlm);
}
elseif(mysql_num_rows($resm) == 0)
{
// Niets gevonden.
}
else
{
while($rowm = mysql_fetch_assoc($resm))
{
echo '<li><strong>'. date('H:i:s d-m-Y', strtotime($rowm['datetime'])).'</strong> '.$rowm['titel'].'<br /><a class="diatoe" href="dialog.php?handeling=bewerk&wat=bericht&id='.$rowp['id'].'" title="Plaats of bewerk het bericht">'.$rowp['titel'].'</a></li>';
}
}
echo '</ul>';
echo '</section>';
?>
monitior/p2000.php die wordt opgehaald.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
echo '<ul>';
$sqlm = "SELECT * FROM meldingen ORDER by datetime DESC LIMIT 10";
if(!$resm = mysql_query($sqlm))
{
trigger_error(mysql_error().'<br />In query: '.$sqlm);
}
elseif(mysql_num_rows($resm) == 0)
{
// Niets gevonden.
}
else
{
while($rowm = mysql_fetch_assoc($resm))
{
echo '<li><strong>'. date('H:i:s d-m-Y', strtotime($rowm['datetime'])).'</strong> '.$rowm['titel'].'<br /><a class="diatoe" href="dialog.php?handeling=bewerk&wat=bericht&id='.$rowp['id'].'" title="Plaats of bewerk het bericht">'.$rowp['titel'].'</a></li>';
}
}
echo '</ul>';
?>
echo '<ul>';
$sqlm = "SELECT * FROM meldingen ORDER by datetime DESC LIMIT 10";
if(!$resm = mysql_query($sqlm))
{
trigger_error(mysql_error().'<br />In query: '.$sqlm);
}
elseif(mysql_num_rows($resm) == 0)
{
// Niets gevonden.
}
else
{
while($rowm = mysql_fetch_assoc($resm))
{
echo '<li><strong>'. date('H:i:s d-m-Y', strtotime($rowm['datetime'])).'</strong> '.$rowm['titel'].'<br /><a class="diatoe" href="dialog.php?handeling=bewerk&wat=bericht&id='.$rowp['id'].'" title="Plaats of bewerk het bericht">'.$rowp['titel'].'</a></li>';
}
}
echo '</ul>';
?>
Het refreshen werkt super, bij het openen van de pagina wordt de inhoud van de section (div) getoond en na een refresh de inhoud van monitor/p2000.php
Nu heb ik de link/a tag een class gegeven class="diatoe" om een dialog venster te openen. Dat doe ik met:
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
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
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function() {
//prepare the dialog
$( "#dialog" ).dialog({
height: 300,
width: 650,
modal: true,
resizable: true,
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "blind",
duration: 500
},
modal: true
});
//respond to click event on anything with 'overlay' class
$(".diatoe").click(function(event){
event.preventDefault();
$('#contentWrap').load($(this).attr("href")); //load content from href of link
$('#dialog').dialog('option', 'title', $(this).attr("title")); //make dialog title that of link
$('#dialog').dialog('open'); //open the dialog
});
});
</script>
<div id="dialog" title="Basic dialog">
<div id="contentWrap"></div>
</div>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function() {
//prepare the dialog
$( "#dialog" ).dialog({
height: 300,
width: 650,
modal: true,
resizable: true,
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "blind",
duration: 500
},
modal: true
});
//respond to click event on anything with 'overlay' class
$(".diatoe").click(function(event){
event.preventDefault();
$('#contentWrap').load($(this).attr("href")); //load content from href of link
$('#dialog').dialog('option', 'title', $(this).attr("title")); //make dialog title that of link
$('#dialog').dialog('open'); //open the dialog
});
});
</script>
<div id="dialog" title="Basic dialog">
<div id="contentWrap"></div>
</div>
Het probleem is nu dat als ik de pagina open en op de link klik voor dat de section (div) is gerefresht de dialog venster gewoon werkt, dialog.php wordt in een popup/dialog geopend, maar als de section/(div) een keer is gerefresht dan opend dialog.php in een nieuw window/venster en niet in een popup/dialog venster.
Gewijzigd op 08/12/2014 20:07:21 door Ferdi R
Toevoeging op 10/12/2014 22:22:46:
Ik heb even een test pagina gemaakt waardoor het makkelijker te begrijpen is.
Je kan de code overnemen en testen, 1 link wordt gerefreshd, voor de refresh kan je erop klikken en dan opend de dialog venster, na de refresh kan je geen dialog venster meer openen.
Wat zou ik hier aan kunnen doen of misschien weet iemand hoe ik het anders zou kunnen doen waardoor het wel zou werken. Misschien op een andere manier refreshen?
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
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
<!DOCTYPE html>
<html>
<head>
<title>Monitor</title>
<meta charset="UTF-8" />
<!--<link rel="stylesheet" href="style.css" type="text/css" />-->
<!-- Standaard JQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- JQuery DIV refresh -->
<script type="text/javascript">
$(document).ready(function () {
setInterval(
function () {
$('#monitor').fadeOut("slow").html('<a id="btnok" href="#" title="Plaats of bewerk het bericht">Refresh link</a>').fadeIn("slow");
}, 20000); // refresh every 30000 milliseconds
$.ajaxSetup({ cache: false });
});
</script>
<!-- JQuery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#btnok" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<div id="monitor"><a id="btnok" href="#" title="Plaats of bewerk het bericht">Refresh link</a></div>
<a id="btnok" href="#" title="Plaats of bewerk het bericht">Vaste link</a>
</body>
</html>
<html>
<head>
<title>Monitor</title>
<meta charset="UTF-8" />
<!--<link rel="stylesheet" href="style.css" type="text/css" />-->
<!-- Standaard JQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- JQuery DIV refresh -->
<script type="text/javascript">
$(document).ready(function () {
setInterval(
function () {
$('#monitor').fadeOut("slow").html('<a id="btnok" href="#" title="Plaats of bewerk het bericht">Refresh link</a>').fadeIn("slow");
}, 20000); // refresh every 30000 milliseconds
$.ajaxSetup({ cache: false });
});
</script>
<!-- JQuery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#btnok" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<div id="monitor"><a id="btnok" href="#" title="Plaats of bewerk het bericht">Refresh link</a></div>
<a id="btnok" href="#" title="Plaats of bewerk het bericht">Vaste link</a>
</body>
</html>