variabelen doorgeven aan een popup
Code (php)
1
2
3
4
5
6
7
8
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>
message
</a>
<div id="test">
<p>Lorem ipsum dolor sit amet.</p>
<a class="modal_close" href="#"></a>
</div>
1) GET, De var in de URL meegeven
2) SESSION, De var in je sessie stoppen
Het javacript onderdeel ziet er als volgt uit:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script type="text/javascript">
$(function()
{
$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });
}
);
</script>
$(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)
1
<a rel="leanModal" name="test" href="#test?idfield=$id"> message </a>
en dan de div als volgt: $_GET["name"];
Code (php)
1
2
3
4
5
2
3
4
5
<div id="test">
$id = $_GET["idfield"];
<p>Lorem ipsum dolor sit amet.</p>
<a class="modal_close" href="#"></a>
</div>
$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
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.
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
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
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>
<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
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)
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)
1
2
3
4
5
6
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>
<? $id = $_GET["idfield"]; ?>
<p>Lorem ipsum dolor sit amet.</p>
<a class="modal_close" href="#"></a>
</div>
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)
1
2
3
4
5
6
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>
<? $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.
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'> ).
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'> ).
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
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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>
<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
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)
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
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>
<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>
Het is wel de bedoeling dat je zelf ook nadenkt, het is niet de bedoeling dat je kant-en-klare scripts voorgeschoteld krijgt.
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?
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)
1
<div id="test" style="display:none;"><div>
b)
Daarna ga je anchors maken vanuit je php:
Code (php)
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