Dialog van jQuery gebruiken op meerdere posities in script
Ik zit met het volgende probleem:
op de pagina http://www.podiumspektakel.eu/x.php wordt een tabel met inhoud getoond. De inhoud wordt uit een tabel opgebouwd.
Nu wil ik dat als men op een datum met * klikt, er een dialoogbox wordt geopend.
Dat lukt mij wel op de eerste regel maar op de volgende regels wordt er geen dialog geopend.
Verder wil ik de tekst laten afhangen van het item waarop geklikt wordt.
Ik heb de routine afgehaald van de pagina http://jqueryui.com/dialog/#animated.
Wie kan wil mij verder helpen?
Code in de head
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- Open een nieuw venster -->
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/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>
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/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>
Code in html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<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>
<tr>
<td style="color: black;"><?php echo nederlandse_datum($rowRooster['datum']) ; ?></td>
<td class="midden" title="<?php echo $rowRooster['opm1'] ; ?>" onclick= "<?php echo $cLink1 ; ?>" style="<?php echo $cStyle1 ; ?> color: white; background-color: <?php echo $rowRooster['kleur1'] ; ?>;"><?php echo $rowRooster['tijd1'] ; ?></td>
<td class="midden" title="<?php echo $rowRooster['opm2'] ; ?>" onclick= "<?php echo $cLink2 ; ?>" style="<?php echo $cStyle2 ; ?> color: white; background-color: <?php echo $rowRooster['kleur2'] ; ?>;"><?php echo $rowRooster['tijd2'] ; ?></td>
<td class="midden" title="<?php echo $rowRooster['opm3'] ; ?>" style="<?php echo $cStyle3 ; ?> color: white; background-color: <?php echo $rowRooster['kleur3'] ; ?>;"><div id="opener"><?php echo $rowRooster['tijd3'] ; ?></div></td>
<td class="midden" title="<?php echo $rowRooster['opm4'] ; ?>" onclick= "<?php echo $cLink4 ; ?>" style="<?php echo $cStyle4 ; ?> color: white; background-color: <?php echo $rowRooster['kleur4'] ; ?>;"><?php echo $rowRooster['tijd4'] ; ?></td>
</tr>
<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>
<tr>
<td style="color: black;"><?php echo nederlandse_datum($rowRooster['datum']) ; ?></td>
<td class="midden" title="<?php echo $rowRooster['opm1'] ; ?>" onclick= "<?php echo $cLink1 ; ?>" style="<?php echo $cStyle1 ; ?> color: white; background-color: <?php echo $rowRooster['kleur1'] ; ?>;"><?php echo $rowRooster['tijd1'] ; ?></td>
<td class="midden" title="<?php echo $rowRooster['opm2'] ; ?>" onclick= "<?php echo $cLink2 ; ?>" style="<?php echo $cStyle2 ; ?> color: white; background-color: <?php echo $rowRooster['kleur2'] ; ?>;"><?php echo $rowRooster['tijd2'] ; ?></td>
<td class="midden" title="<?php echo $rowRooster['opm3'] ; ?>" style="<?php echo $cStyle3 ; ?> color: white; background-color: <?php echo $rowRooster['kleur3'] ; ?>;"><div id="opener"><?php echo $rowRooster['tijd3'] ; ?></div></td>
<td class="midden" title="<?php echo $rowRooster['opm4'] ; ?>" onclick= "<?php echo $cLink4 ; ?>" style="<?php echo $cStyle4 ; ?> color: white; background-color: <?php echo $rowRooster['kleur4'] ; ?>;"><?php echo $rowRooster['tijd4'] ; ?></td>
</tr>
Voor het gemak en het onderzoek heb ik alleen de derde kolom (die van de Cast) gebruikt
George
Gewijzigd op 28/10/2014 17:25:12 door George van Baasbank
Opener29 zou dialog29 moeten openen. Helaas is er nergens op de pagina een div te bekennen met id="dialog29".
Toevoeging op 29/10/2014 16:37:29:
Daarnaast kun je dat scriptje niet in je header gooien. Omdat de rest van je HTML nog niet is gegenereerd kan JS/jQuery die objecten niet vinden. Dit kun je ondervangen door het scriptje in de volgende functie te zetten:
$(document).ready(function(){
});