Popup scherm waar ik dingen kan opzoeken en terugkomt in origineel window ?
ik zou in mijn PHP tool graag een popup window willen krijgen waar ik d.m.v. 4 dropdown lists een bepaald product kan kiezen. Als dit product gekozen is, zou ik de ID er van willen terugkrijgen in de originele form van waaruit ik de knop drukte om de popup te krijgen.
Kan ik dit met PHP ? Of moet ik beginnen te denken aan Javascript en/of Ajax ? Ken van beide veel te weinig om er aan te beginnen dus hoop een beetje dat het met PHP kan.
Groetjes,
Davy
Onthoud goed: PHP draait op de server (denk aan andere kant van de wereld) en javascript draait in de browser van de gebruiker.
van de div uitgaande krijg je dus gewoon 1 HTML pagina met een verborgen div met daarin een formulier met 4 selects. als er op submit gedrukt wordt kun je op de achtergrond met AJAX informatie halen uit een PHP script en aan de hand van die info je pagina bijwerken.
Gewijzigd op 04/09/2013 20:58:17 door Frank Nietbelangrijk
een heel duidelijk antwoord, waarvoor mijn diepste dank...
Enig idee of ik daar ergens een duidelijk voorbeeld van kan vinden ?
Groetjes,
Davy
Toevoeging op 04/09/2013 21:13:46:
zonder jQuery: http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp
met jQuery: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajax
popup div met jquery: http://forum.jquery.com/topic/a-very-simple-popup-box-div
popup div zonder jquery: http://www.javascripttoolbox.com/lib/popup/example.php
Gewijzigd op 04/09/2013 21:26:31 door Frank Nietbelangrijk
Het is me ondertussen gelukt om een DIV boven de rest te krijgen. Weliswaar nog niet helemaal netjes zoals ik wil, maar goed...
Wat ik nog niet weet te doen is nu een veld terug te krijgen naar een veld in het onderliggende document...
Groetjes,
Davy
Gewijzigd op 04/09/2013 21:33:16 door Davy Carmans
Davy Carmans op 04/09/2013 21:30:57:
Wat ik nog niet weet te doen is nu een veld terug te krijgen naar een veld in het onderliggende document...
Er is geen onderliggend document. Het is gewoon één document.
Maak eerst het formulier in die div.
Gewijzigd op 04/09/2013 21:33:38 door Frank Nietbelangrijk
Frank Nietbelangrijk op 04/09/2013 21:33:01:
Er is geen onderliggend document. Het is gewoon één document.
Maak eerst het formulier in die div.
Maak eerst het formulier in die div.
Misschien dat ik iets meer moet uitleggen.
Laat het me even het onderste en bovenste document noemen...
Op het onderste document heb ik nu een listbox. Maar dit wil ik beter maken, omdat ik via 4 selectie boxen wil komen tot 1 product en de ID daarvan (uit de tabel) dan copieren in het onderste document (dan moet de listbox wel een ander veld worden.
Groetjes,
Davy
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#hidden-div {
display:none;
border:1px solid #666;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
$('#mybutton').click(function(e) {
$('#hidden-div').toggle();
});
$('#hidden-div select').change(function(e) {
var a = $('#select1').val();
var b = $('#select2').val();
var c = $('#select3').val();
var d = $('#select4').val();
$.ajax({
url: 'test.php?a=' + a + '&b=' + b + '&c=' + c + '&d=' + d,
}).done(function(data) {
$('#text-field').val(data);
});
});
});
</script>
</head>
<body>
<div id="hidden-div">
<select id="select1"><option>a</option><option>b</option></select>
<select id="select2"><option>c</option><option>d</option></select>
<select id="select3"><option>e</option><option>f</option></select>
<select id="select4"><option>g</option><option>h</option></select>
</div>
<input type="text" id="text-field" />
<button id="mybutton">show/hide div</button>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#hidden-div {
display:none;
border:1px solid #666;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
$('#mybutton').click(function(e) {
$('#hidden-div').toggle();
});
$('#hidden-div select').change(function(e) {
var a = $('#select1').val();
var b = $('#select2').val();
var c = $('#select3').val();
var d = $('#select4').val();
$.ajax({
url: 'test.php?a=' + a + '&b=' + b + '&c=' + c + '&d=' + d,
}).done(function(data) {
$('#text-field').val(data);
});
});
});
</script>
</head>
<body>
<div id="hidden-div">
<select id="select1"><option>a</option><option>b</option></select>
<select id="select2"><option>c</option><option>d</option></select>
<select id="select3"><option>e</option><option>f</option></select>
<select id="select4"><option>g</option><option>h</option></select>
</div>
<input type="text" id="text-field" />
<button id="mybutton">show/hide div</button>
</body>
</html>
en test.php:
in één woord : WOW...
Je hebt me geweldig verder geholpen. Ik heb de code wat aangepast maar je hebt me gewoon de goede richting uitgewezen. Het lukt me om de waardes over te halen in het onderliggende document... Netjes... Vind het fantastisch.
Ik bied je alvast een virtuele pint aan... :-)
Groetjes,
Davy
Waarschijnlijk omdat ik nog "iets" mis, weet ik niet direct hoe dit aan te pakken.
Eigenlijk heb ik een pagina waar ik in 10 lijnen bepaalde onderdelen ga kiezen. Voor elk onderdeel moet ik een soort materiaal kiezen die dan voor dat onderdeel moet getoond worden.
Ik heb nu mijn hidden div gemaakt die netjes opspringt en waar ik dmv 3 selectie velden kom tot een "materiaal". Deze komt dan in het vak voor het onderdeel.
Ik roep de DIV op met een knop.
Maar, een ander onderdeel kan een ander materiaal nodig hebben. Aangezien ik maar 1 div heb nu, hoe krijgt deze DIV te weten over welk onderdeel het gaat ? En hoe krijg ik het terug in het juiste veld?
Het antwoord op jouw vragen is: javascript (met of zonder JQuery).
Wat je moet doen is de 3 <select>'s een click event geven. zodra er een (ander) item geselecteerd wordt in de div moet javascript zorgen dat het vak onderdeel de juiste waarde krijgt.
Andersom kan ook: zodra de waarde van het onderdeel-vak verandert kan javascript zorgen dat de inhoud van -welk element dan ook- mee verandert.
na een tijdje niks meer te kunnen doen aan de code, ben ik er nu terug aan begonnen.
Ik heb gemerkt dat we het veld materiaal_type een vaste ID willen geven, gebaseerd op de knop die gedrukt wordt.
Ik dacht het zo op te kunnen lossen, maar ik doe iets mis. Ik begrijp dat het zou kunnen komen doordat de PHP natuurlijk niet wordt gesubmit en we de waarde van het veld dus op dit moment niet kunnen lezen.
Mijn button heb ik een "name" meegegeven :
Quote:
<input type="button" id="openscherm" name="3" value="Kies materiaal">
In mijn openscherm functie doe ik dit :
Quote:
$(document).ready(function(){
$('#openscherm').click(function () {
$("#overlay").show();
$("#modal").show("slow");
$("#mat_type").val($(this).attr("name"));
});
$('#openscherm').click(function () {
$("#overlay").show();
$("#modal").show("slow");
$("#mat_type").val($(this).attr("name"));
});
Ik zet dus in het veld "mat_type" de naam die ik meegeef in de knop. In het bovenstaande voorbeeld komt er ook netjes 1 te staan in dat veld.
In mijn functie om mijn eerste selectie box in te vullen, wil ik nu de waarde van het veld mat_type gaan gebruiken. Ik hoopte dat ik het veld zou kunnen oprakelen, maar dat is niet het geval. Daarom dacht ik er een JS functie tussen te kunnen gooien.
Allereerst heb ik deze functie gemaakt :
Quote:
<script type="text/javascript">
function getmateriaaltype() {
var mt = document.getElementById("mat_type");
return mt.value
}
</script>
function getmateriaaltype() {
var mt = document.getElementById("mat_type");
return mt.value
}
</script>
In mijn functie creatoptions dacht ik dan gebruik te kunnen maken als volgt :
Quote:
function createoptions($table , $id , $field, $db)
{
$mtsql = "SELECT * FROM " . $table . " WHERE Type = " . getmateriaaltype();
$mtres = $db->query($mtsql);
while ($mtrow = $mtres->fetch()) echo "<option value=\"{$mtrow[$id]}\">$mtrow[$field]</option>";
}
?>
{
$mtsql = "SELECT * FROM " . $table . " WHERE Type = " . getmateriaaltype();
$mtres = $db->query($mtsql);
while ($mtrow = $mtres->fetch()) echo "<option value=\"{$mtrow[$id]}\">$mtrow[$field]</option>";
}
?>
Maar natuurlijk lijkt dit niet te werken.
Enige suggestie ?
Groetjes en alvast bedankt,
Davy
De basis van het probleem, is de volgende:
php is een computerprogramma dat draait op de server.
Je doet een verzoek naar de server; de server "doet zijn ding" en een paar microseconden later krijg je een pagina teruggestuurd.
Javascript is dan weer een proces, dat draait op de webbrowser van de gebruiker.
Dat is dus goed voor user events, zoals onMouseOver; of onClick; ... waarbij je dus reageert op het gedrag van de gebruiker.
Je kan niet zomaar verwachten dat je de functies of variabelen van de ene taal kan gebruiken in de andere taal.
-----
Er bestaat wel een oplossing; dat is via Ajax.
Wat Ajax doet: javascript neemt contact op met de server (zonder dar de pagina wordt ververst.)
Zo kan je dus alles wat je wil communiceren tussen server en gebruiker.
Interesse?
Gewijzigd op 24/09/2013 15:50:07 door Kris Peeters
zeker interesse ! Alleen ken ik nog bitter weinig (buiten de goede tips van Frank voordien) van Ajax...
Zoals je bovenaan ziet is het een modale div die getoond wordt. Tot nog toe koos de gebruiker in de eerste selectiebox een waarde. Maar nu wil ik die waarde meegeven in de button zodat ik de eerste selectie box kan verwijderen.
Dus als je me kan helpen, dan graag.
Groetjes,
Davy
eigenlijk meer toevallig, na wat zoeken naar de jQuery mogelijkheid, heb ik eigenlijk de functie die ik al had, nu gewoon in de knop onClick gezet. En dat doet het ! :-)
Quote:
$('#openscherm').click(function () {
$("#overlay").show();
$("#modal").show("slow");
$("#mat_type").val($(this).attr("name"));
$.getJSON("select.php",{mat_type: $(this).attr("name")}, function(data){
var options = '';
var len = data.length;
options = "<option value='0'>Maak uw keuze...</option>";
for (var i = 0; i < len; i++) {
options += '<option value=\'' + data.Benaming + '\'>' + data.Benaming + '</option>';
}
$("#mat_naam").html(options);
});
});
[/quote]
Vriendelijke groeten,
Davy
$("#overlay").show();
$("#modal").show("slow");
$("#mat_type").val($(this).attr("name"));
$.getJSON("select.php",{mat_type: $(this).attr("name")}, function(data){
var options = '';
var len = data.length;
options = "<option value='0'>Maak uw keuze...</option>";
for (var i = 0; i < len; i++) {
options += '<option value=\'' + data.Benaming + '\'>' + data.Benaming + '</option>';
}
$("#mat_naam").html(options);
});
});
[/quote]
Vriendelijke groeten,
Davy
Ja, dat is een goed systeem.