PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
M

variabelen doorgeven aan een popup

Door Michel Koonen op 22-01-2014 00:33
4.322 views
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. 


<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>
Koen Hollander
22-01-2014 13:40
Ik zie 2 methodes die je kunnen helpen.

1) GET, De var in de URL meegeven
2) SESSION, De var in je sessie stoppen
M
Michel Koonen
22-01-2014 14:10 gewijzigd op 22-01-2014 14:11
Koen,

Het javacript onderdeel ziet er als volgt uit:

<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:
<a rel="leanModal" name="test" href="#test?idfield=$id"> message </a>


en dan de div als volgt: $_GET["name"];

<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.
Ivo P
22-01-2014 14:19
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.
M
Michel Koonen
22-01-2014 14:51
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
22-01-2014 17:38 gewijzigd op 22-01-2014 22:23
hier een werkend voorbeeld zonder die rare leanmodel :-)


<!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>
M
Michel Koonen
22-01-2014 19:02
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

<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:

<div id="test">
    <? $id = $_GET["idfield"]; ?>

    <p>Lorem ipsum dolor sit amet.</p>
    <a class="modal_close" href="#"></a>
</div>
O
Obelix Idefix
22-01-2014 20:05
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:

<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.
M
Michel Koonen
22-01-2014 21:35
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 -
22-01-2014 21:36
Met Ajax.
Frank Nietbelangrijk
22-01-2014 22:16 gewijzigd op 22-01-2014 22:24
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?

Reageren

Inloggen om te reageren