result weergeven in een popup
Ik wil de resultaten van een query weergeven in een popup.
Vanwege het script kan dit denk ik niet via een <a href>
Dit is het script wat ik tot nu toe heb.
Ik hoop dat iemand mij kan helpen met een script.
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
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
$main .= "
Hier kun je de producten toevoegen.<br/>
<form action='' id='new_message' method='post'>
<span class='formInput'>zoek:</span>
<input type='text' name='zoekproduct' />
<input id='popup' type='submit' name='searchBtn' value='zoek!' /></p>
</form>";
// Als een zoekwoord wordt ingegeven:
if(isset($_POST['searchBtn']))
{
// Zoekfunctie:
$statement = $db->prepare("
SELECT
producten.productlink,
prod_omschrijving.producttitel
FROM
producten
INNER JOIN
prod_omschrijving
ON
producten.idproduct=prod_omschrijving.idproduct
WHERE
producten.productlink LIKE '%?%'
OR
prod_omschrijving.producttitel like '%?%'
");
$statement->execute(array($_POST['zoekproduct'], $_POST['zoekproduct']));
if (mysql_num_rows($lijstsql)>1)
{
$resultaten .= 'Er zijn '.mysql_num_rows($lijstsql).' producten gevonden.';
while ($result = $statement->fetchObject())
{
$resultaten.= $result->producttitel;
$resultaten.='<br/>';
}
}
else
{
$resultaten .='Er zijn geen resultaten gevonden';
}
}
echo $resultaten;
Hier kun je de producten toevoegen.<br/>
<form action='' id='new_message' method='post'>
<span class='formInput'>zoek:</span>
<input type='text' name='zoekproduct' />
<input id='popup' type='submit' name='searchBtn' value='zoek!' /></p>
</form>";
// Als een zoekwoord wordt ingegeven:
if(isset($_POST['searchBtn']))
{
// Zoekfunctie:
$statement = $db->prepare("
SELECT
producten.productlink,
prod_omschrijving.producttitel
FROM
producten
INNER JOIN
prod_omschrijving
ON
producten.idproduct=prod_omschrijving.idproduct
WHERE
producten.productlink LIKE '%?%'
OR
prod_omschrijving.producttitel like '%?%'
");
$statement->execute(array($_POST['zoekproduct'], $_POST['zoekproduct']));
if (mysql_num_rows($lijstsql)>1)
{
$resultaten .= 'Er zijn '.mysql_num_rows($lijstsql).' producten gevonden.';
while ($result = $statement->fetchObject())
{
$resultaten.= $result->producttitel;
$resultaten.='<br/>';
}
}
else
{
$resultaten .='Er zijn geen resultaten gevonden';
}
}
echo $resultaten;
Je kunt met jquery en javascript wel bijvoorbeeld een popup openen door ergens op te klikken. Wat het dan ook is, een button, table, tr, td.
De uitkomst van de querie wil ik weergeven in een popup.
De gebruiker kiest 1 van de resultaten in de popup door er op te klikken.
De popup sluit dan en de gebruiker ziet het gekozen resultaat in een overzicht.
Mijn vraag is nu, kan ik de gegevens uit een form via een submit button weergeven in een popup?
@ Obelix, ik heb het oude plan laten varen, het was te moeilijk, vandaar dat ik wil kijken of een simpeler systeem beter werkt.
Gewijzigd op 04/06/2014 19:58:48 door J C
Met een popup bedoel ik een Jquery popup.
Die popup is gewoon een element dat zichtbaar wordt als je hem wil laten zien met javascript, de data staat er dan dus al in.
Even een snel voorbeeld:
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
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
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$("#select-button").click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
<button id="select-button">Selecteer</button>
<div id="dialog" title="Resultaten selecteren" style="display: none">
<?
// ...
if (mysql_num_rows($lijstsql)>1) {
$resultaten .= 'Er zijn '.mysql_num_rows($lijstsql).' producten gevonden.';
while ($result = $statement->fetchObject()) {
$resultaten.= $result->producttitel;
$resultaten.='<br/>';
}
} else {
$resultaten .= 'Er zijn geen resultaten gevonden';
}
?>
</div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$("#select-button").click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
<button id="select-button">Selecteer</button>
<div id="dialog" title="Resultaten selecteren" style="display: none">
<?
// ...
if (mysql_num_rows($lijstsql)>1) {
$resultaten .= 'Er zijn '.mysql_num_rows($lijstsql).' producten gevonden.';
while ($result = $statement->fetchObject()) {
$resultaten.= $result->producttitel;
$resultaten.='<br/>';
}
} else {
$resultaten .= 'Er zijn geen resultaten gevonden';
}
?>
</div>
Gewijzigd op 04/06/2014 20:26:27 door Mark Hogeveen
Probeer het opnieuw.
een pagina heeft een zoekveld, met een submit button.
De gebruiker geeft een productnaam of een deel van een product naam op en drukt op submit.
Er verschijnt dan een popup met alle mogelijke producten. De gebruiker kiest een product en deze verschijnt dan op de pagina met het zoekveld.
De gebruiker blijft deze stappen herhalen totdat alle producten gekozen zijn.
En er dus een lijst ontstaat met alle benodigde producten.
Wat werkt er niet aan bovenstaande voorgestelde oplossingen?
Wat is de achterliggende gedachte/meerwaarde om het via popup te doen?
Ik zal even een plaatje uploaden van mijn idee.
Daarbij vonden veel mensen popups eritant, en worden soms popup blockers gebruikt etc.
Hier is de foto van mijn idee, alleen het zoekbalke staat dan op de achterliggende pagina.
http://www.podiumverhuurhaaglanden.nl/prive/Naamloos.png
Mijn idee is absoluut niet heilig en ik sta helemaal open voor alle andere (betere) suggesties.
Ik werk liever niet met sessies, maar het idee van Harry is natuurlijk ook uit te voeren door de producten meteen op te slaan in de database.
Gewijzigd op 04/06/2014 21:22:15 door J C
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
Dit is de basis voor een dialog.
Als je dan kijkt naar hoe ze hem openen: http://jqueryui.com/dialog/#animated
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
Je ziet hier dat als er op #opener geklikt wordt dat dan de dialog geopend wordt. Je zou dit zelf kunnen doen d.m.v. een klik op b.v. een submit button of wat dan ook. Je kunt ook gewoon checken of er bijvoorbeeld iets ingetypt wordt in het zoekveld. Om daarna gelijk de dialog te openen waar men verder zou kunnen zoeken.
In de dialog zelf maak je gewoon een tabel met je data en indien gewenst een a href er achter. Als er op geklikt wordt zal de pagina geladen worden met het desbetreffende product. Als je nog verder wilt gaan kun je ook dit stuk compleet met javascript opvangen.