JS / jQuery Oplossing?
Aan de linker kant heb ik een tabel met daarin gegevens uit een database die ik laad met php. Als je met de muis over een rij uit die tabel heenbeweegd zou ik graag aan de rechter kant graag info willen laten tonen die aan die rij gekoppeld zit, hoe kan ik dit voor elkaar krijgen?
Alvast bedankt
Gewijzigd op 24/04/2012 16:30:29 door Bas IJzelendoorn
Als jij (of iemand anders) een manier weet hoe je dit kan doen zou ik het graag horen, ook als het geen js/jquery is.
Gewijzigd op 24/04/2012 16:35:59 door A Bal
Toon eens de code waarmee je die tabel vult (kwestie van een beetje in een gelijkaardige stijl te blijven)
In het linker div laad ik een aantal rijen uit een sql database dmv een while loopje. Laten we zeggen dat een rij uit 4 kolommen bestaat. Kolom 1 en 2 zet ik links in een tabel, en alleen waneer je over een rij heenbeweegd wil ik graag in de rechter div kolom 3 en 4 weergeven die bij die rij hoord.
index.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
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
<?php
if (!empty($_GET['id'])) {
switch ($_GET['id']) {
case 15:
$content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan feugiat lorem, nec rhoncus odio vestibulum quis. Vivamus id ante sed diam varius vehicula. Suspendisse nec ante urna. Sed eu elit vitae ante euismod dignissim quis at ante. Integer fermentum sem non justo sollicitudin dictum ac sed libero. Pellentesque malesuada bibendum laoreet. Nam vulputate nunc non risus accumsan id adipiscing purus aliquet. Integer vulputate posuere lorem ac aliquam. Aenean semper scelerisque leo, a venenatis purus dictum ac. Mauris adipiscing tempor risus. Aenean a nulla nibh. Quisque ut ipsum nisi, quis rutrum libero. Duis iaculis dui quam, id luctus nibh.';
break;
case 19:
$content = 'Vivamus a nisl nunc. Nulla a malesuada mi. Nunc et turpis sit amet est elementum congue. Nulla mauris lectus, porta id volutpat hendrerit, ultrices et velit. Morbi tempor, urna a hendrerit porttitor, eros diam sagittis sem, eu facilisis massa arcu et augue. Aliquam erat volutpat. Cras nec urna orci, egestas hendrerit neque. Maecenas rutrum lacus neque. Suspendisse consequat mi vel nibh hendrerit non semper ipsum pretium. Sed pretium condimentum blandit. Proin sit amet libero purus, at euismod metus. Vestibulum ultrices pretium turpis, eu auctor mi sollicitudin nec. In hac habitasse platea dictumst. Vestibulum semper ultrices ipsum, quis interdum sem lobortis eget.';
break;
case 25:
$content = 'Phasellus iaculis, velit quis consectetur lacinia, erat purus tempor nibh, sit amet aliquet neque sem sed augue. Suspendisse fringilla porta rutrum. Etiam ultricies dolor eu magna semper tempor malesuada mi pretium. Donec lectus odio, adipiscing et viverra a, viverra et est. Aliquam ac lacus lectus, eu tincidunt elit. Vestibulum sagittis sem in nunc pulvinar accumsan. Aenean rhoncus vehicula magna, a aliquam ligula aliquam vel. Phasellus eros massa, tempor sed tempus sit amet, pretium nec mi. Curabitur imperdiet ligula non nisl condimentum vestibulum. Vivamus interdum ullamcorper enim, sit amet consequat metus semper vitae. Fusce nec nibh dapibus velit fermentum consequat in quis mi. Vivamus consectetur blandit purus nec gravida.';
break;
case 27:
$content = 'Mauris et sapien purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque non lorem vitae nunc rutrum feugiat. Donec suscipit, lorem in lobortis aliquam, massa risus ullamcorper nisl, quis feugiat enim libero nec metus. Donec purus nisi, mattis in adipiscing eget, congue congue mi. Nunc volutpat vulputate lectus vel interdum. Nullam sodales condimentum ligula, non commodo nunc semper quis. In sed dui ac purus accumsan tincidunt. Vestibulum massa sem, pharetra vel sodales sed, facilisis eu ante. Sed et ultricies turpis.';
break;
}
echo $content;
exit;
}
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style>
#preview {
width: 400px;
height: 600px;
overflow: auto;
background-color: #eeeeee;
float: right;
padding: 10px;
}
</style>
</head>
<body>
<div id="preview" border="1"></div>
<table>
<tr><th>title</th><th> </th></tr>
<tr><td>Titel record 15</td><td><input type="button" class="preview_button" data-id="15" value="preview"/></td></tr>
<tr><td>Titel record 19</td><td><input type="button" class="preview_button" data-id="19" value="preview"/></td></tr>
<tr><td>Titel record 25</td><td><input type="button" class="preview_button" data-id="25" value="preview"/></td></tr>
<tr><td>Titel record 27</td><td><input type="button" class="preview_button" data-id="27" value="preview"/></td></tr>
</table>
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js.js"></script>
</body>
</html>
if (!empty($_GET['id'])) {
switch ($_GET['id']) {
case 15:
$content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan feugiat lorem, nec rhoncus odio vestibulum quis. Vivamus id ante sed diam varius vehicula. Suspendisse nec ante urna. Sed eu elit vitae ante euismod dignissim quis at ante. Integer fermentum sem non justo sollicitudin dictum ac sed libero. Pellentesque malesuada bibendum laoreet. Nam vulputate nunc non risus accumsan id adipiscing purus aliquet. Integer vulputate posuere lorem ac aliquam. Aenean semper scelerisque leo, a venenatis purus dictum ac. Mauris adipiscing tempor risus. Aenean a nulla nibh. Quisque ut ipsum nisi, quis rutrum libero. Duis iaculis dui quam, id luctus nibh.';
break;
case 19:
$content = 'Vivamus a nisl nunc. Nulla a malesuada mi. Nunc et turpis sit amet est elementum congue. Nulla mauris lectus, porta id volutpat hendrerit, ultrices et velit. Morbi tempor, urna a hendrerit porttitor, eros diam sagittis sem, eu facilisis massa arcu et augue. Aliquam erat volutpat. Cras nec urna orci, egestas hendrerit neque. Maecenas rutrum lacus neque. Suspendisse consequat mi vel nibh hendrerit non semper ipsum pretium. Sed pretium condimentum blandit. Proin sit amet libero purus, at euismod metus. Vestibulum ultrices pretium turpis, eu auctor mi sollicitudin nec. In hac habitasse platea dictumst. Vestibulum semper ultrices ipsum, quis interdum sem lobortis eget.';
break;
case 25:
$content = 'Phasellus iaculis, velit quis consectetur lacinia, erat purus tempor nibh, sit amet aliquet neque sem sed augue. Suspendisse fringilla porta rutrum. Etiam ultricies dolor eu magna semper tempor malesuada mi pretium. Donec lectus odio, adipiscing et viverra a, viverra et est. Aliquam ac lacus lectus, eu tincidunt elit. Vestibulum sagittis sem in nunc pulvinar accumsan. Aenean rhoncus vehicula magna, a aliquam ligula aliquam vel. Phasellus eros massa, tempor sed tempus sit amet, pretium nec mi. Curabitur imperdiet ligula non nisl condimentum vestibulum. Vivamus interdum ullamcorper enim, sit amet consequat metus semper vitae. Fusce nec nibh dapibus velit fermentum consequat in quis mi. Vivamus consectetur blandit purus nec gravida.';
break;
case 27:
$content = 'Mauris et sapien purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque non lorem vitae nunc rutrum feugiat. Donec suscipit, lorem in lobortis aliquam, massa risus ullamcorper nisl, quis feugiat enim libero nec metus. Donec purus nisi, mattis in adipiscing eget, congue congue mi. Nunc volutpat vulputate lectus vel interdum. Nullam sodales condimentum ligula, non commodo nunc semper quis. In sed dui ac purus accumsan tincidunt. Vestibulum massa sem, pharetra vel sodales sed, facilisis eu ante. Sed et ultricies turpis.';
break;
}
echo $content;
exit;
}
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style>
#preview {
width: 400px;
height: 600px;
overflow: auto;
background-color: #eeeeee;
float: right;
padding: 10px;
}
</style>
</head>
<body>
<div id="preview" border="1"></div>
<table>
<tr><th>title</th><th> </th></tr>
<tr><td>Titel record 15</td><td><input type="button" class="preview_button" data-id="15" value="preview"/></td></tr>
<tr><td>Titel record 19</td><td><input type="button" class="preview_button" data-id="19" value="preview"/></td></tr>
<tr><td>Titel record 25</td><td><input type="button" class="preview_button" data-id="25" value="preview"/></td></tr>
<tr><td>Titel record 27</td><td><input type="button" class="preview_button" data-id="27" value="preview"/></td></tr>
</table>
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js.js"></script>
</body>
</html>
js.js // aangepast
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
$(document).ready(function() {
// variables
var preview_buttons = $('.preview_button');
var preview = $('#preview');
// bind events
$('.preview_button').hover(function(e){
// id halen uit de data-id attribute van de knop
var id = $(this).data().id;
// met Ajax de preview ophalen
$.ajax({
url: 'index.php?id=' + id,
success: preview_loaded
});
});
function preview_loaded(data) {
$(preview).html(data);
}
});
// variables
var preview_buttons = $('.preview_button');
var preview = $('#preview');
// bind events
$('.preview_button').hover(function(e){
// id halen uit de data-id attribute van de knop
var id = $(this).data().id;
// met Ajax de preview ophalen
$.ajax({
url: 'index.php?id=' + id,
success: preview_loaded
});
});
function preview_loaded(data) {
$(preview).html(data);
}
});
Gewijzigd op 25/04/2012 12:14:42 door Kris Peeters
Code (php)
1
2
3
2
3
jQuery(function($) {
// code
});
// code
});
De constructie
(function($){
})(jQuery)
zal vooral interessant zijn voor plugins / jQuery .fn extensies ...
(Ik pas het aan)
Gewijzigd op 25/04/2012 12:34:14 door Kris Peeters
Toevoeging op 26/04/2012 10:45:54:
Ik heb het enigzins werkend gekregen met Peeters' code, alleen word in de preview div de hele pagina opnieuw geladen binnen de pagina, en niet alleen de $content
EDIT: Heb de code in nieuwe php pagina geplaatst en die geladen.. waarom ik daar niet direct aan dacht..
Gewijzigd op 26/04/2012 12:53:11 door A Bal