content in div zonder refreshen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Roy Marijnissen

Roy Marijnissen

05/01/2012 22:44:38
Quote Anchor link
Ik zit met het volgende. Ik heb een pull-down lijst met b.v. 1,2,3. Als iemand op 1 klikt en dan submit moet daaronder het plaatje komen te staan wat bij 1 hoort etc. Wat ik nu wil is dat zodra er op submit wordt geklikt onder het pull-down menu het plaatje tevoorschijn komt zonder dat de site refreshed. Alleen wat in die div staat moet kunnen veranderen na een klik op submit.

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
 
PHP hulp

PHP hulp

29/03/2024 05:43:48
 
Jelmer -

Jelmer -

05/01/2012 23:45:49
Quote Anchor link
Stel je hebt de pagina:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>

(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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>

(probeer: http://jsfiddle.net/KJCZn/)
Gewijzigd op 06/01/2012 09:58:27 door Jelmer -
 
Roy Marijnissen

Roy Marijnissen

06/01/2012 00:15:01
Quote Anchor link
Thanks ! Precies wat ik zoek ! Ik ga het morgen uitproberen, 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 ?
 
- SanThe -

- SanThe -

06/01/2012 00:16:50
Quote Anchor link
@Jelmer: Bij die eerste link zie ik geen plaatje en er verandert ook niks. Die tweede link werkt wel.
 
Jelmer -

Jelmer -

06/01/2012 09:57:57
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
1
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)
        });


- 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 -
 
Roy Marijnissen

Roy Marijnissen

06/01/2012 21:01:30
Quote Anchor link
Thanks voor de hulp !
Gewijzigd op 07/01/2012 00:15:14 door Roy Marijnissen
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.