content in div zonder refreshen
Weet iemand hoe dit moet, hoop dat ik het een beetje duidelijk heb uitgelegd wat ik zoek.
toevoeging, de url van het plaatje moet uit een database komen. Na het klikken moet dus eigenlijk een script gestart worden in alleen die div.
Voorbeeld : http://www.tubalr.com/ Alleen dat het zoekvlak omhoog schuift hoeft voor mij niet. De rest is precies zoals ik het bedoel !
Gewijzigd op 05/01/2012 23:07:03 door Roy Marijnissen
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
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
<!DOCTYPE html>
<html>
<head>
<title>Lol</title>
</head>
<body>
<select id="plaatje-pulldown" name="plaatje">
<option value="">- Kies een plaatje -</option>
<option value="blueA.png">1</option>
<option value="blueB.png">2</option>
<option value="blueC.png">3</option>
</select>
<div id="plaatje-placeholder">Dit element wordt vervangen door het plaatje</div>
</body>
<script>
// het drop-down menuutje
var selector = document.getElementById('plaatje-pulldown');
// het plaatje wat momenteel wordt weergegeven
// (in eerste instantie niet echt een plaatje, maar iets om
// te markeren waar in de HTML het plaatje moet komen)
var plaatje = document.getElementById('plaatje-placeholder');
// update_plaatje vervangt het huidige plaatje met eentje
// met de waarde uit het drop-down menu.
function update_plaatje()
{
// pak welke option er geselecteerd is
var option = selector.options[selector.selectedIndex];
// Heeft deze option geen value (de 'kies een plaatje optie')
// doe dan niets.
if (!option.value)
return;
// Maak een nieuw plaatje aan, zet het src-attribuut.
var nieuw_plaatje = document.createElement('img');
nieuw_plaatje.src = 'http://google-maps-icons.googlecode.com/files/' + option.value;
// vervang het oude plaatje met het nieuwe plaatje
// in de HTML boom
plaatje.parentNode.replaceChild(nieuw_plaatje, plaatje);
// .. en onthoud dat dit het zichtbare plaatje is nu.
plaatje = nieuw_plaatje;
}
// Als de waarde van de drop-down verandert, update het plaatje.
selector.addEventListener('change', update_plaatje, false);
</script>
</html>
<html>
<head>
<title>Lol</title>
</head>
<body>
<select id="plaatje-pulldown" name="plaatje">
<option value="">- Kies een plaatje -</option>
<option value="blueA.png">1</option>
<option value="blueB.png">2</option>
<option value="blueC.png">3</option>
</select>
<div id="plaatje-placeholder">Dit element wordt vervangen door het plaatje</div>
</body>
<script>
// het drop-down menuutje
var selector = document.getElementById('plaatje-pulldown');
// het plaatje wat momenteel wordt weergegeven
// (in eerste instantie niet echt een plaatje, maar iets om
// te markeren waar in de HTML het plaatje moet komen)
var plaatje = document.getElementById('plaatje-placeholder');
// update_plaatje vervangt het huidige plaatje met eentje
// met de waarde uit het drop-down menu.
function update_plaatje()
{
// pak welke option er geselecteerd is
var option = selector.options[selector.selectedIndex];
// Heeft deze option geen value (de 'kies een plaatje optie')
// doe dan niets.
if (!option.value)
return;
// Maak een nieuw plaatje aan, zet het src-attribuut.
var nieuw_plaatje = document.createElement('img');
nieuw_plaatje.src = 'http://google-maps-icons.googlecode.com/files/' + option.value;
// vervang het oude plaatje met het nieuwe plaatje
// in de HTML boom
plaatje.parentNode.replaceChild(nieuw_plaatje, plaatje);
// .. en onthoud dat dit het zichtbare plaatje is nu.
plaatje = nieuw_plaatje;
}
// Als de waarde van de drop-down verandert, update het plaatje.
selector.addEventListener('change', update_plaatje, false);
</script>
</html>
(probeer: http://jsfiddle.net/a5G3W/1/)
Als je nieuw bent met Javascript, en het vooral wil gebruiken voor dit soort dingen kan je mooi jQuery gebruiken. Dat is voor dit soort dingen (de DOM manipuleren) heel handig. En korter:
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
<!DOCTYPE html>
<html>
<head>
<title>Lol</title>
</head>
<body>
<select id="plaatje-pulldown" name="plaatje">
<option value="">- Kies een plaatje -</option>
<option value="blueA.png">1</option>
<option value="blueB.png">2</option>
<option value="blueC.png">3</option>
</select>
<div id="plaatje">Dit element wordt vervangen door het plaatje</div>
</body>
<script>
$('#plaatje-pulldown').change(function() {
if (!$(this).val())
return;
$('<img id="plaatje">')
.attr('src', 'http://google-maps-icons.googlecode.com/files/' + $(this).val())
.replaceAll('#plaatje');
});
</script>
</html>
<html>
<head>
<title>Lol</title>
</head>
<body>
<select id="plaatje-pulldown" name="plaatje">
<option value="">- Kies een plaatje -</option>
<option value="blueA.png">1</option>
<option value="blueB.png">2</option>
<option value="blueC.png">3</option>
</select>
<div id="plaatje">Dit element wordt vervangen door het plaatje</div>
</body>
<script>
$('#plaatje-pulldown').change(function() {
if (!$(this).val())
return;
$('<img id="plaatje">')
.attr('src', 'http://google-maps-icons.googlecode.com/files/' + $(this).val())
.replaceAll('#plaatje');
});
</script>
</html>
(probeer: http://jsfiddle.net/KJCZn/)
Gewijzigd op 06/01/2012 09:58:27 door Jelmer -
Roy Marijnissen op 06/01/2012 00:15:01:
Is er nog een verschil tussen code 1 en 2 behalve dat 1 uitleg bevat ? En is dit eigenlijk jQuery of is dat weer iets anders ?
De eerste lap code is gewoon puur kale JavaScript zoals iedere browser dat ondersteunt. De tweede lap code is ongeveer dezelfde oplossing, maar dan maak ik gebruik van de functies van jQuery. Op de achtergrond gebeurt ongeveer hetzelfde, maar jQuery laat je het op een directere manier opschrijven:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$('#plaatje-pulldown') // selector = document.getElementById('plaatje-pulldown')
.change(function() { // selector.addEventListener
if (!$(this).val()) // selector.options[selector.selectedIndex].value
return;
$('<img id="plaatje">') // nieuw_plaatje = document.createElement; nieuw_plaatje.id = 'plaatje'
.attr('src', 'http://google-maps-icons.googlecode.com/files/' + $(this).val()) // plaatje.src = value
.replaceAll('#plaatje'); // document.getElementById('plaatje').parentNode.replaceChild(nieuw_plaatje)
});
.change(function() { // selector.addEventListener
if (!$(this).val()) // selector.options[selector.selectedIndex].value
return;
$('<img id="plaatje">') // nieuw_plaatje = document.createElement; nieuw_plaatje.id = 'plaatje'
.attr('src', 'http://google-maps-icons.googlecode.com/files/' + $(this).val()) // plaatje.src = value
.replaceAll('#plaatje'); // document.getElementById('plaatje').parentNode.replaceChild(nieuw_plaatje)
});
- SanThe - op 06/01/2012 00:16:50:
@Jelmer: Bij die eerste link zie ik geen plaatje en er verandert ook niks. Die tweede link werkt wel.
Ik zie het al. addEventListener moet eigenlijk 3 argumenten meekrijgen, maar nieuwere browsers (nieuwste versie van Firefox, Chrome) vinden 2 ook genoeg. zo werkt hij ook in Opera.
Ik heb het aangepast in m'n eerdere post.
Gewijzigd op 06/01/2012 09:58:53 door Jelmer -
Gewijzigd op 07/01/2012 00:15:14 door Roy Marijnissen