variabelen doorgeven aan een popup

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Michel Koonen

Michel Koonen

22/01/2014 00:33:59
Quote Anchor link
ik maak gebruik van het script Leanmodal - http://leanmodal.finelysliced.com.au/# en via een link "message" wordt de div "test" getoond. Dit werkt prima maar nu wil ik graag een variable meegeven naar die div "test". Wat is een gangbare methode. Binnen PHP weet ik hoe ik variabelen tussen PHP pagina's kan laten uitwisselen, maar voor 't onderstaande ben weet ik 't niet.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<a rel="leanModal" name="test" href="#test">
    message
</a>                

<div id="test">
    <p>Lorem ipsum dolor sit amet.</p>
    <a class="modal_close" href="#"></a>
</div>
 
PHP hulp

PHP hulp

27/11/2021 00:52:55
 
Koen Hollander

Koen Hollander

22/01/2014 13:40:11
Quote Anchor link
Ik zie 2 methodes die je kunnen helpen.

1) GET, De var in de URL meegeven
2) SESSION, De var in je sessie stoppen
 
Michel Koonen

Michel Koonen

22/01/2014 14:10:44
Quote Anchor link
Koen,

Het javacript onderdeel ziet er als volgt uit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<script type="text/javascript">
$(function()
    {
    $('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });        
    }
    );
</script>


Ik begrijp uit jouw feedback dat ik het aanroepen dan als volgt gaat:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<a rel="leanModal" name="test" href="#test?idfield=$id"> message </a>


en dan de div als volgt: $_GET["name"];
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<div id="test">
    $id = $_GET["idfield"];
    <p>Lorem ipsum dolor sit amet.</p>
    <a class="modal_close" href="#"></a>
</div>


Hoe moet ik 't javascript gedeelte aanpassen zodat de variable via 't script doorgegeven wordt.
Gewijzigd op 22/01/2014 14:11:26 door Michel Koonen
 
Ivo P

Ivo P

22/01/2014 14:19:51
Quote Anchor link
volgens mij doet dat stuk javascript niet meer dan een hidden div op die pagina tonen.

Er wordt in het voorbeeld op die site helemaal geen extra content geladen op het moment van tonen van de popup.

Je kunt het natuurlijk wel uitbreiden, door bij de klik niet alleen de div in kwestie te tonen, maar ook direct een ajax call te doen om in php iets te regelen.

Maar misschien is het handig als je eerst even zegt wat je met de doorgegeven waarden wilt gaan doen.
 
Michel Koonen

Michel Koonen

22/01/2014 14:51:35
Quote Anchor link
De content van die div wil ik dynamisch maken afhankelijk van de link die je aanklikt. Dus bij 't aanklikken van een link geef ik een variable door aan de Popup (die div dus) waarbij ik die weer in de db de juiste gegevens op laat zoeken en echo'en. Ik ben niet bekend met Javascript en zoek daarom hulp hierbij.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

22/01/2014 17:38:40
Quote Anchor link
hier een werkend voorbeeld zonder die rare leanmodel :-)

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<html>
<head>
<meta charset="iso-8859-2">
<title>Popup Window</title>
<style>
#blanket {
    display: none;
    background-color: #666;
    opacity: 0.65;
    filter: alpha(opacity=45);
    position: absolute;
    z-index: 9001;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#popUpDiv {
    display: none;
    position:fixed;
    top: 50%;
    left: 50%;
    width:300px;
    height:200px;
    margin-left: -155px; /* zet deze waarde negatief op de helft van de width + border dikte */
    margin-top: -105px; /* zet deze waarde negatief op de helft van de height + border dikte */
    padding: 10px;
    border: 10px solid orange;
    background-color: white;
    z-index:9002;
    overflow: auto;
}

#popUpDiv img {
    float:right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
function popup(text) {
    $('p.popup').html(text);
    $('#blanket').show();
    $('#popUpDiv').show();
}

function popupClose() {
    $('#blanket').hide();
    $('#popUpDiv').hide();
}

$(function() {
    $('.popup').click(function(e) {
        popup($(this).attr('href'));
        return false;
    });
    $('#popUpDiv img').click(function(e) {
        popupClose();
        return false;
    });
});

</script>
</head>

<body>
<a class="popup" href="dronken droppie">
    message
</a>
<a class="popup" href="nuchtere nico">
    message
</a>
<!-- popup window -->
<div style="display: none;" id="blanket"></div>
<div id="popUpDiv">
    <img src="close.jpg" />
    <p class="popup"></p>
</div>

</body>
</html>
Gewijzigd op 22/01/2014 22:23:08 door Frank Nietbelangrijk
 
Michel Koonen

Michel Koonen

22/01/2014 19:02:12
Quote Anchor link
Frank,

Dit is niet wat ik bedoel, los van 't feit dat jouw popup werkt met verschillende meldingen die je in je javascript hebt vermeld.
Ik wil simpelweg bij 't aanroepen van die popup een variable kunnen meegeven die ik vervolgens kan gebruiken in de popup...

Hiermee roep ik de popup aan.. Waarbij ?idfield="$id" wordt toegevoegd aan de url
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<a rel="leanModal" name="test" href="#test?idfield=$id"> message </a>


De popup hieronder, krijgt via javascript die variable en grijpt uit de database de juiste data:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<div id="test">
    <? $id = $_GET["idfield"]; ?>

    <p>Lorem ipsum dolor sit amet.</p>
    <a class="modal_close" href="#"></a>
</div>
 
Obelix Idefix

Obelix Idefix

22/01/2014 20:05:14
Quote Anchor link
Michel Koonen op 22/01/2014 19:02:12:
De popup hieronder, krijgt via javascript die variable en grijpt uit de database de juiste data:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<div id="test">
    <? $id = $_GET["idfield"]; ?>

    <p>Lorem ipsum dolor sit amet.</p>
    <a class="modal_close" href="#"></a>
</div>

Daar zit geen enkele javascript in en ook helemaal niets met een database.
Het enige wat je doet is een variabele aanmaken ($id) met de waarde uit $_GET["idfield"]. Je controleert niet eens of die $_GET waarde wel bestaat/geldige waarde bevat.

Alles staat in 1 bestand? Wat Koen voorstelt werkt alleen als de pagina opnieuw wordt opgevraagd: dan wordt immers pas de URL aangepast/SESSION gevuld.
 
Michel Koonen

Michel Koonen

22/01/2014 21:35:09
Quote Anchor link
obelix,

Je hebt helemaal gelijk.. dat onderdeel staat nog niet opgenomen in de div. Maar hoe krijg ik nu de variable die ik met de link meegeef, beschikbaar in de popup (<div id='test'> ).
 
- SanThe -

- SanThe -

22/01/2014 21:36:56
Quote Anchor link
Met Ajax.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

22/01/2014 22:16:10
Quote Anchor link
Michel Koonen op 22/01/2014 21:35:09:
obelix,

Je hebt helemaal gelijk.. dat onderdeel staat nog niet opgenomen in de div. Maar hoe krijg ik nu de variable die ik met de link meegeef, beschikbaar in de popup (<div id='test'> ).


wat bedoel je met beschikbaar? Immers een div/popup is HTML en variabelen bestaan niet in HTML. Variabelen bestaan in javascript.

Ik heb hem nog wat aangepast. Is dit dan wat je bedoelt?
Gewijzigd op 22/01/2014 22:24:16 door Frank Nietbelangrijk
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

22/01/2014 22:46:59
Quote Anchor link
Ik denk dat TS bedoelt de variabelen met PHP op te halen, en dan kan dat via AJAX:
Code (js)
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
<a href="#" class="clickable" data-id="something">Bericht</a>
<
script>
    $(".clickable").on('click', function(e){
        e.preventDefault;
        $.ajax({
            url: '/message.php',
            type: 'POST',
            dataType: 'html',
            data: {'id': $(this).data('id')},
            success: function(d){
                $('#test').html(d);
                $('#test').show();
            }
        });
    });
</
script>

En dan in samenwerking met Franks css en id's, want die modal die je nu gebruikt wordt is wel heel erg simpel.
Gewijzigd op 22/01/2014 22:47:48 door Ger van Steenderen
 
Michel Koonen

Michel Koonen

25/01/2014 21:20:42
Quote Anchor link
Frank, ger,

Dit komt voor 90% in de buurt van wat ik bedoel, echter wanneer ik href="nuchtere nico" verander in $id en $id vooraf een waarde geef, dan wordt er direct $1 geplaatst terwijl ik $id eerst in die div wil opvragen en vervolgens een query wil doen in de database (WHERE id = '$id')

Wat moet ik veranderen aan 't script om de variabele niet direct geplaatst te krijgen in de popup maar 'm als variable kan opvragen?

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<html>
<head>
<meta charset="iso-8859-2">
<title>Popup Window</title>
<style>
#blanket {
    display: none;
    background-color: #666;
    opacity: 0.65;
    filter: alpha(opacity=45);
    position: absolute;
    z-index: 9001;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#popUpDiv {
    display: none;
    position:fixed;
    top: 50%;
    left: 50%;
    width:300px;
    height:200px;
    margin-left: -155px; /* zet deze waarde negatief op de helft van de width + border dikte */
    margin-top: -105px; /* zet deze waarde negatief op de helft van de height + border dikte */
    padding: 10px;
    border: 10px solid orange;
    background-color: white;
    z-index:9002;
    overflow: auto;
}

#popUpDiv img {
    float:right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
function popup(text) {
    $('p.popup').html(text);
    $('#blanket').show();
    $('#popUpDiv').show();
}

function popupClose() {
    $('#blanket').hide();
    $('#popUpDiv').hide();
}

$(function() {
    $('.popup').click(function(e) {
        popup($(this).attr('href'));
        return false;
    });
    $('#popUpDiv img').click(function(e) {
        popupClose();
        return false;
    });
});

</script>
</head>

<body>

<? $id = '1'; ?>

<a class="popup" href="$id"> show me my info</a>

<!-- popup window plaatsen, id ophalen en memberinfo tonen-->
<div style="display: none;" id="blanket"></div>
<div id="popUpDiv">
      
    <img src="graphics/close.png" />
    <p class="popup"></p>
</div>
</body>
</html>
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

25/01/2014 21:40:10
Quote Anchor link
Michel,

Het is wel de bedoeling dat je zelf ook nadenkt, het is niet de bedoeling dat je kant-en-klare scripts voorgeschoteld krijgt.
 
Michel Koonen

Michel Koonen

25/01/2014 21:53:17
Quote Anchor link
Ger,

Tuurlijk wil ik nadenken :-) maar snap 't process niet waarlangs een variable bekend gemaakt kan worden in die popup zodat ik er binnen die popup mee kan gaan werken.
Uit 't script van Frank blijkt dat de variable die via de url doorgegeven wordt binnen 't script wordt getoond middels popup($(this).attr('href'))?
Maar hoe zorg ik binnen die popup div de variabele beschikbaar krijg?
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

25/01/2014 22:26:20
Quote Anchor link
Door de logica in te zien, ik proberen die uit te leggen:
a)
Je hebt div waarin je bepaalde informatie afhankelijk van waarop geklikt wordt wilt tonen, heel simpel en zonder opmaak kan je dit doen:
Code (html)
PHP script in nieuw venster Selecteer het PHP script
1
<div id="test" style="display:none;"><div>

b)
Daarna ga je anchors maken vanuit je php:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
while ($row = mysqli_fetch_assoc($result)) {
    echo '<a href="#" class="clickable" data-id="' . $row['id'] . '">' . $row['name'] . '</a>';
}

?>
c)
En dan met mijn eerder voorbeeld wordt aan elke <a> met de class clickable een onclick gegenereerd die de waarden ophaalt van wat in het data attribuut id staat.
Gewijzigd op 25/01/2014 22:30:59 door Ger van Steenderen
 



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.