Extra info onder elk item laten verschijnen met een button.
Heb een scriptje gemaakt om alle aanbiedingen weer te geven.
Onder elk item wil ik extra informatie laten zien na het klikken van de meer info button.
Als ik bij product 1 op meer info klik komt eronder meer info.
Als ik bij product 2 op meer info klik komt onder product 1 meer info over product 1.
Dit is uiteraard niet de bedoeling, ik denk dat de oplossing ligt in het product id die als hidden veld in het formulier zit.
Kan iemand mij op weg helpen? Hieronder een deel van het scriptje die alle informatie uit een mysql database haalt.
Bij voorbaat dank voor uw hulp.
[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
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
<?php
$current_url = urlencode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$sql = ("SELECT * FROM producten WHERE aanbieding = 1");
if (!$result = $mysqli->query($sql))
{
trigger_error('Fout in query: '.$mysqli->error);
}
else
{
if ($mysqli->affected_rows > 0)
{
while ($row = $result->fetch_assoc())
{
echo '<div id="actionblok-item">';
echo '<form name="actionblok_form" method="POST" action="cart_update.php">';
echo '<table>';
echo '<input type="hidden" name="id" value="'.$row['id'].'" />';
echo '<input type="hidden" name="type" value="add"/>';
echo '<input type="hidden" name="return_url" value="{$current_url}"/>';
echo '<tr><td><img src="../'.$row['image'].'"/></td>';
echo '<td class="product-title">'.$row['name'].' </td>';
echo '<td class="new-img"><img src="../images/new.jpg"/></td></tr>';
echo '<tr><td class="product-price">'.$row['price'].'Euro</td>';
echo '<td class="product-aantal"><input type="text" size="2" maxlength="2" name="qty" value="1"/></td>';
echo '<td class="product-order"><button class="submit-order" name="submit"></button></td></tr>';
echo '<tr><td><input type="button" onclick="document.getElementById(\'productInfoPopup\').style.display=\'block\'" value="Meer info"></button></td></tr>';
echo '<tr><td><div id="productInfoPopup"><h4>Product Informatie</h4><p>'.$row['description'].'</p></div></td></tr>';
echo '</div></div></table></form></div>';
}
else
{
echo "Er zijn geen aanbiedingen vandaag.";
}
}
?>
$current_url = urlencode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$sql = ("SELECT * FROM producten WHERE aanbieding = 1");
if (!$result = $mysqli->query($sql))
{
trigger_error('Fout in query: '.$mysqli->error);
}
else
{
if ($mysqli->affected_rows > 0)
{
while ($row = $result->fetch_assoc())
{
echo '<div id="actionblok-item">';
echo '<form name="actionblok_form" method="POST" action="cart_update.php">';
echo '<table>';
echo '<input type="hidden" name="id" value="'.$row['id'].'" />';
echo '<input type="hidden" name="type" value="add"/>';
echo '<input type="hidden" name="return_url" value="{$current_url}"/>';
echo '<tr><td><img src="../'.$row['image'].'"/></td>';
echo '<td class="product-title">'.$row['name'].' </td>';
echo '<td class="new-img"><img src="../images/new.jpg"/></td></tr>';
echo '<tr><td class="product-price">'.$row['price'].'Euro</td>';
echo '<td class="product-aantal"><input type="text" size="2" maxlength="2" name="qty" value="1"/></td>';
echo '<td class="product-order"><button class="submit-order" name="submit"></button></td></tr>';
echo '<tr><td><input type="button" onclick="document.getElementById(\'productInfoPopup\').style.display=\'block\'" value="Meer info"></button></td></tr>';
echo '<tr><td><div id="productInfoPopup"><h4>Product Informatie</h4><p>'.$row['description'].'</p></div></td></tr>';
echo '</div></div></table></form></div>';
}
else
{
echo "Er zijn geen aanbiedingen vandaag.";
}
}
?>
je zou zowiezo ipv ID productInfoPopup CLASS productIbfoPopup gebruiken aangezien je er meerdere hebt :)
bekijk eens hoe 'closest()' werkt :)
this.closest('.productInfoPopup').css.......
Hier kom je vast en zeker wel uit :)
Nou nee, want hij heeft JUIST een unieke identifier nodig.
@Jos
Try this (niet getest):
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
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
<?php
$current_url = urlencode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$sql = ("SELECT * FROM producten WHERE aanbieding = 1");
if (!$result = $mysqli->query($sql))
{
trigger_error('Fout in query: '.$mysqli->error);
}
else
{
if ($mysqli->affected_rows > 0)
{
$i = 0;
while ($row = $result->fetch_assoc())
{
$i++;
echo '<div id="actionblok-item">';
echo '<form name="actionblok_form" method="POST" action="cart_update.php">';
echo '<table>';
echo '<input type="hidden" name="id" value="'.$row['id'].'" />';
echo '<input type="hidden" name="type" value="add"/>';
echo '<input type="hidden" name="return_url" value="{$current_url}"/>';
echo '<tr><td><img src="../'.$row['image'].'"/></td>';
echo '<td class="product-title">'.$row['name'].' </td>';
echo '<td class="new-img"><img src="../images/new.jpg"/></td></tr>';
echo '<tr><td class="product-price">'.$row['price'].'Euro</td>';
echo '<td class="product-aantal"><input type="text" size="2" maxlength="2" name="qty" value="1"/></td>';
echo '<td class="product-order"><button class="submit-order" name="submit"></button></td></tr>';
echo '<tr><td><input type="button" onclick="document.getElementById("productInfoPopup' . $i . '").style.display="block" value="Meer info"></button></td></tr>';
echo '<tr><td><div id="productInfoPopup' . $i . '"><h4>Product Informatie</h4><p>'.$row['description'].'</p></div></td></tr>';
echo '</div></div></table></form></div>';
}
else
{
echo "Er zijn geen aanbiedingen vandaag.";
}
}
?>
$current_url = urlencode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$sql = ("SELECT * FROM producten WHERE aanbieding = 1");
if (!$result = $mysqli->query($sql))
{
trigger_error('Fout in query: '.$mysqli->error);
}
else
{
if ($mysqli->affected_rows > 0)
{
$i = 0;
while ($row = $result->fetch_assoc())
{
$i++;
echo '<div id="actionblok-item">';
echo '<form name="actionblok_form" method="POST" action="cart_update.php">';
echo '<table>';
echo '<input type="hidden" name="id" value="'.$row['id'].'" />';
echo '<input type="hidden" name="type" value="add"/>';
echo '<input type="hidden" name="return_url" value="{$current_url}"/>';
echo '<tr><td><img src="../'.$row['image'].'"/></td>';
echo '<td class="product-title">'.$row['name'].' </td>';
echo '<td class="new-img"><img src="../images/new.jpg"/></td></tr>';
echo '<tr><td class="product-price">'.$row['price'].'Euro</td>';
echo '<td class="product-aantal"><input type="text" size="2" maxlength="2" name="qty" value="1"/></td>';
echo '<td class="product-order"><button class="submit-order" name="submit"></button></td></tr>';
echo '<tr><td><input type="button" onclick="document.getElementById("productInfoPopup' . $i . '").style.display="block" value="Meer info"></button></td></tr>';
echo '<tr><td><div id="productInfoPopup' . $i . '"><h4>Product Informatie</h4><p>'.$row['description'].'</p></div></td></tr>';
echo '</div></div></table></form></div>';
}
else
{
echo "Er zijn geen aanbiedingen vandaag.";
}
}
?>
overigens zie je dat ook aan de code ;)
Oplossen met een counter kan idd, als je liever wegloopt voor t probleem
Dus nou ga je oneindig aantal css objects aanmaken om ze standaard te verbergen?
persoonlijk vind ik de .closest() een betere oplossing
Hij zal trouwens ook de andere popups willen sluiten neem ik aan, los je die ook gelijk op voor hem? :)
>> @ozzie, uit zn verhaal begrijp ik dat ie meerdere '#productInfoPopup' heeft, dus is het niet slim om het als ID te gebruiken
Jawel dus. Hij wil die popups PER PRODUCT kunnen openen, en dus heb je sowieso een unieke ID nodig en niet een class.
>> Oplossen met een counter kan idd, als je liever wegloopt voor t probleem
Je zou ook gewoon normaal kunnen communiceren in plaats van dat cynische toontje.
>> Hij zal trouwens ook de andere popups willen sluiten neem ik aan, los je die ook gelijk op voor hem? :)
Nogmaals ... je kunt ook gewoon normaal communiceren.
Ik wil niemand aanvallen en bedoel het ook niet zo
ben alsnog van mening dat class makkelijker is en t gebruik van closest vanuit de button
om hoofdzakelijk 'initieel' de popups te verbergen en minder code te gebruiken
alle mogelijkheden en opties zijn welkom zo kan ik zelf zien wat er mogelijk is en daarvan leren en toepassen wat het handigste voor mij is.
Dennis, je bedoelt dat ik voor elk resultaat van die query hetzelfde id gebruik omdat die loop voor elk product word herhaald, dus daarom moet ik een class gebruiken? Daar heb ik nog niet aan gedacht maar het klinkt logisch bedankt.
Ik ga me verdiepen in closest() en een class gebruiken en ik ga ook de code van ozzie eens proberen.
bedankt, ik laat wel weten of het lukt!
Stel we hebben 10 producten en ik wil dat product 5 openklapt, dan heb je dus een unieke identifier voor product 5 nodig. Dan moet je dus een id gebruiken. Een id moet altijd uniek zijn (logisch, want het is een identifier). Die teller die ik heb ingebouwd zorgt ervoor dat je dus unieke id's hebt. Je moet dan nog wel zorgen dat standaard die div's dicht staan. Daarvoor kun je bijvoorbeeld nog een class toevoegen.
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
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
<?php
$current_url = urlencode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$sql = ("SELECT * FROM producten WHERE aanbieding = 1");
if (!$result = $mysqli->query($sql))
{
trigger_error('Fout in query: '.$mysqli->error);
}
else
{
if ($mysqli->affected_rows > 0)
{
$i = 0;
while ($row = $result->fetch_assoc())
{
$i++;
echo '<div id="actionblok-item">';
echo '<form name="actionblok_form" method="POST" action="cart_update.php">';
echo '<table>';
echo '<input type="hidden" name="id" value="'.$row['id'].'" />';
echo '<input type="hidden" name="type" value="add"/>';
echo '<input type="hidden" name="return_url" value="{$current_url}"/>';
echo '<tr><td><img src="../'.$row['image'].'"/></td>';
echo '<td class="product-title">'.$row['name'].' </td>';
echo '<td class="new-img"><img src="../images/new.jpg"/></td></tr>';
echo '<tr><td class="product-price">'.$row['price'].'Euro</td>';
echo '<td class="product-aantal"><input type="text" size="2" maxlength="2" name="qty" value="1"/></td>';
echo '<td class="product-order"><button class="submit-order" name="submit"></button></td></tr>';
echo '<tr><td><input type="button" onclick="document.getElementById("productInfoPopup' . $i . '").style.display="block" value="Meer info"></button></td></tr>';
echo '<tr><td><div class="hideMe" id="productInfoPopup' . $i . '"><h4>Product Informatie</h4><p>'.$row['description'].'</p></div></td></tr>';
echo '</div></div></table></form></div>';
}
else
{
echo "Er zijn geen aanbiedingen vandaag.";
}
}
?>
$current_url = urlencode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$sql = ("SELECT * FROM producten WHERE aanbieding = 1");
if (!$result = $mysqli->query($sql))
{
trigger_error('Fout in query: '.$mysqli->error);
}
else
{
if ($mysqli->affected_rows > 0)
{
$i = 0;
while ($row = $result->fetch_assoc())
{
$i++;
echo '<div id="actionblok-item">';
echo '<form name="actionblok_form" method="POST" action="cart_update.php">';
echo '<table>';
echo '<input type="hidden" name="id" value="'.$row['id'].'" />';
echo '<input type="hidden" name="type" value="add"/>';
echo '<input type="hidden" name="return_url" value="{$current_url}"/>';
echo '<tr><td><img src="../'.$row['image'].'"/></td>';
echo '<td class="product-title">'.$row['name'].' </td>';
echo '<td class="new-img"><img src="../images/new.jpg"/></td></tr>';
echo '<tr><td class="product-price">'.$row['price'].'Euro</td>';
echo '<td class="product-aantal"><input type="text" size="2" maxlength="2" name="qty" value="1"/></td>';
echo '<td class="product-order"><button class="submit-order" name="submit"></button></td></tr>';
echo '<tr><td><input type="button" onclick="document.getElementById("productInfoPopup' . $i . '").style.display="block" value="Meer info"></button></td></tr>';
echo '<tr><td><div class="hideMe" id="productInfoPopup' . $i . '"><h4>Product Informatie</h4><p>'.$row['description'].'</p></div></td></tr>';
echo '</div></div></table></form></div>';
}
else
{
echo "Er zijn geen aanbiedingen vandaag.";
}
}
?>
Ik heb nu een class "hideMe" toegevoegd.
In je css doe je dan:
.hideMe { display: none; }
Het is nog niet helemaal gelukt hij gaf hier en daar wat syntax foutjes aan en verdwaalde divs.
Echter bij 1 regel blijf ik steken als ik op de button klik doet hij niks en bij de ontwikkelaars console staat er:
SyntaxError: expected expression, got end of script
Daarnaast staat een link naar de regel met de fout die in het rood staat beschreven hier maak ik ook uit op dat jou code werkt:) Hierboven bij jou antwoord is dat regel 28.
Code (php)
1
<input type = "button" onclick = "document.getElementById("productInfoPopup1").style.display = "block" value = "Meer info"></button>
De fout die er bij hoort zegt geen spatie tussen attributen.
Dit zegt hij ook als ik er een spatie inzet zoals net.
Uiteraard laat ik het weten als het gelukt is en hou ik mijn topic in de gaten.
Gewijzigd op 21/03/2017 06:20:49 door Jos Duis
je moet wel de 'quotes' in de gaten houden.
het script in de 'onClick' attribute staat binnen " "
zoals je hier ziet in je vorige stukje code, staat onclick="document.getElementById(" hier zie stopt de 'onclick'.
Daarom gebruiken we verschillende 'quotes' om dit te voorkomen, aangezien je met php echo'd kun je de enkele quote 'escapen' door \ ervoor te zetten.
Je eerste stukje code was beter, je hoeft alleen de $i toe te voegen:
Code (php)
1
echo '<tr><td><input type="button" onclick="document.getElementById(\'productInfoPopup' . $i . '\').style.display=\'block\'" value="Meer info"></button></td></tr>';
De output zal dan wezen:
Code (php)
1
<tr><td><input type="button" onclick="document.getElementById('productInfoPopup1').style.display='block'" value="Meer info"></button></td></tr>
En daar zie je dan goed dat onclick binnen " " valt, en de overige quotes enkel ' ' zijn
p.s. ozzie heeft aangegeven dat hij het niet getest heeft, dus let altijd op de quotes
Gewijzigd op 21/03/2017 08:10:53 door Dennis WhoCares
Ik had het inderdaad niet getest ... maar die quotes heb ik waarschijnlijk zelf kapotgemaakt (oeps). Ik dacht dat die verkeerd stonden en had ze gelijk maar even aangepast. Niet slim dus :-) Mijn excuses.
Hopelijk werkt het na de correctie van Dennis nu wel.
Ik had niet in de gaten dat dat overal telt wat betreft de quotes.
Is niet jou schuld Ozzie ik had het zoiezo verkeerd.
Laat zo weten of het is gelukt
Toevoeging op 21/03/2017 12:16:12:
Haha Heren super bedankt!!
Het werkt:D
Weer een hoop geleerd dank jullie wel!
Groeten Jos
Succes ermee!
Ozzie PHP op 21/03/2017 12:06:07:
>> p.s. ozzie heeft aangegeven dat hij het niet getest heeft, dus let altijd op de quotes
Ik had het inderdaad niet getest ... maar die quotes heb ik waarschijnlijk zelf kapotgemaakt (oeps). Ik dacht dat die verkeerd stonden en had ze gelijk maar even aangepast. Niet slim dus :-) Mijn excuses.
Hopelijk werkt het na de correctie van Dennis nu wel.
Ik had het inderdaad niet getest ... maar die quotes heb ik waarschijnlijk zelf kapotgemaakt (oeps). Ik dacht dat die verkeerd stonden en had ze gelijk maar even aangepast. Niet slim dus :-) Mijn excuses.
Hopelijk werkt het na de correctie van Dennis nu wel.
Hi Ozzie, ik hoop dat je dit ook niet verkeerd op pakte..
Ik probeer meer aan te geven dat je altijd zelf je quotes in de gaten moet houden, zelfs als je copy-paste van een ander :)
Niet iedereen heeft een kant en klare copy van iemand z'n project ;D
Nee hoor ;-)
Ik had zijn code in het antwoordveld geplakt en dan zie je geen kleurtjes meer. Ik dacht waarom gebruikt ie daar nu zomaar ineens ge-escapte single quotes ... gelijk maar even aanpassen naar dubbele quotes. Njah ... dat pakte dus niet goed uit :D Ik zag al aan zijn reactie wat er mis was, en jij had het gelukkig daarna goed hersteld. Dus het was een goed staaltje teamwork :)
Nou is het mooi gelukt maar ik wil dat bij het verschijnen van de extra info een X tevoorschijn komt waar je op kan drukken om het weer te laten verdwijnen.
Het is mij gelukt alleen wil ik niet dat de X er gelijk al staat maar pas verschijnt na het klikken op de meer info button hoe krijg ik dat voor elkaar ik heb het nou zo:
Code (php)
1
2
3
2
3
echo '<tr><td><input type="button" onclick="document.getElementById(\'productInfoPopup' . $i . '\').style.display=\'block\'" value="Meer info"></button></td></tr>';
echo '<tr><td><div class="hideMe" id="productInfoPopup' . $i . '"><h4>Product Informatie</h4><p>'.$row['description'].'</p></div></td></tr>';
echo '<tr><td><div class="closeMe" id="closeMe' . $i . '"><a href="#" onclick="document.getElementById(\'productInfoPopup' . $i . '\').style.display=\'none\'">X</a></div></td></tr>';
echo '<tr><td><div class="hideMe" id="productInfoPopup' . $i . '"><h4>Product Informatie</h4><p>'.$row['description'].'</p></div></td></tr>';
echo '<tr><td><div class="closeMe" id="closeMe' . $i . '"><a href="#" onclick="document.getElementById(\'productInfoPopup' . $i . '\').style.display=\'none\'">X</a></div></td></tr>';
En in mijn css:
.hideMe {
display:none;
}
.closeMe {
display:block;
}
Gewijzigd op 27/03/2017 16:59:02 door Jos Duis
Code (php)
1
2
3
2
3
echo '<tr><td><input type="button" onclick="document.getElementById(\'productInfoPopup' . $i . '\').style.display=\'block\'" value="Meer info"></button></td></tr>';
echo '<tr><td><div class="hideMe" id="productInfoPopup' . $i . '"><h4>Product Informatie</h4><p>'.$row['description'].'</p></td></tr>';
echo '<tr><td><div class="closeMe" id="closeMe' . $i . '"><a href="#" onclick="document.getElementById(\'productInfoPopup' . $i . '\').style.display=\'none\'">X</a></div></td></tr></div>';
echo '<tr><td><div class="hideMe" id="productInfoPopup' . $i . '"><h4>Product Informatie</h4><p>'.$row['description'].'</p></td></tr>';
echo '<tr><td><div class="closeMe" id="closeMe' . $i . '"><a href="#" onclick="document.getElementById(\'productInfoPopup' . $i . '\').style.display=\'none\'">X</a></div></td></tr></div>';
X Blijft staan.
Toevoeging op 27/03/2017 18:45:29:
Kan ik geen 2e onclick event aan die button hangen zodat hij gelijk de x toont desnoods hidden via een hidden actie?
Gewijzigd op 27/03/2017 18:42:15 door Jos Duis